vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
Maptalks 項(xiàng)目是一個(gè) HTML5 的地圖引擎, 基于原生 ES6 Javascript 開(kāi)發(fā)： - 二三維一體化地圖, 通過(guò)二維地圖的旋轉(zhuǎn) /傾斜增加三維視角 - 插件化設(shè)計(jì), 能與其他圖形庫(kù)結(jié)合, 開(kāi)發(fā)各種二三維效果, 例如 echarts/d3/THREE 等 - 很認(rèn)真的優(yōu)化了繪制性能 - 很重視測(cè)試, 有接近 1.5K 個(gè)單元測(cè)試用例, 所以穩(wěn)定性還不錯(cuò), 已經(jīng)應(yīng)用在很多大大小小的系統(tǒng)上了
上面是一段 maptalks 官方介紹，下面來(lái)創(chuàng)建工程。首先利用 vue-cli3 搭建一個(gè) SPA 項(xiàng)目，然后寫一段 maptalks 的 HELLO WORLD。如果對(duì) vue 項(xiàng)目的創(chuàng)建比較熟悉，可以跳過(guò)步驟一，直接看步驟二。
一、創(chuàng)建工程
vue create vue-maptalks
進(jìn)入工程配置頁(yè)面
選擇 Manually select features
選擇 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter
輸入 n
選擇 sass/scss
選擇 ESLint + Airbnb config
選擇 Lint on save
選擇 In dedicated config files
輸入 y，保存本次設(shè)置為模版，下次創(chuàng)建項(xiàng)目直接選擇本次保留的模板。
輸入保存的模板名字，進(jìn)入項(xiàng)目初始化構(gòu)建，等待構(gòu)建完成。
完成后，打開(kāi)瀏覽，輸入 http://localhost:8080/
工程創(chuàng)建完成。
二、HELLO WORLD
安裝 maptalks
yarn add maptalks
刪除 src/App.vue，新建 App.vue，輸入如下代碼
<template>
<div id="map" class="container"></div>
</template>
<script>
import 'maptalks/dist/maptalks.css';
import * as maptalks from 'maptalks';
export default {
mounted() {
this.$nextTick(() => {
const map = new maptalks.Map('map', {
center: [-0.113049, 51.498568],
zoom: 14,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c', 'd'],
attribution: '© <a >OpenStreetMap</a> contributors, © <a ,
}),
});
console.log('map: ', map);
});
},
};
</script>
<style lang="scss">
html,body{ margin:0px;height:100%;width:100%; }
.container{ width:100%;height:100% }
</style>
效果如下：
總結(jié)
以上所述是小編給大家介紹的vue 地圖可視化 maptalks 篇實(shí)例代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue常用的三種傳值方式有:??父?jìng)髯??子傳父??非父子傳值?引用官網(wǎng)的一句話:父子組件的關(guān)系可以總結(jié)為?prop?向下傳遞,事件向上傳遞,熟悉vue各類關(guān)系的組件之間傳值方法會(huì)令開(kāi)發(fā)更加得心應(yīng)手,下面將對(duì)父子、兄弟、頁(yè)級(jí)組件之間的傳值作淺談2023-12-12
這篇文章主要介紹了vue項(xiàng)目中使用多選框的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue使用Vuex一步步封裝并使用store全過(guò)程
這篇文章主要介紹了Vue使用Vuex一步步封裝并使用store全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue 父組件獲取子組件里面的data數(shù)據(jù)(實(shí)現(xiàn)步驟)
在Vue中,父組件可以通過(guò)`ref`引用子組件,并通過(guò)`$refs`屬性來(lái)訪問(wèn)子組件的數(shù)據(jù),下面分步驟給大家介紹vue 父組件獲取子組件里面的data數(shù)據(jù),感興趣的朋友一起看看吧2024-06-06
Ant Design Upload 文件上傳功能的實(shí)現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue組件基礎(chǔ)操作，組件是vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用2023-01-01
elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
最近工作遇到個(gè)需求,表單可以進(jìn)行增加刪除操作,需要進(jìn)行表單校驗(yàn),這篇文章主要給大家介紹了關(guān)于elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，json數(shù)組數(shù)據(jù)以csv格式導(dǎo)出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue中關(guān)于@media媒體查詢的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08