vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
Maptalks 項(xiàng)目是一個(gè) HTML5 的地圖引擎, 基于原生 ES6 Javascript 開發(fā)： - 二三維一體化地圖, 通過二維地圖的旋轉(zhuǎn) /傾斜增加三維視角 - 插件化設(shè)計(jì), 能與其他圖形庫結(jié)合, 開發(fā)各種二三維效果, 例如 echarts/d3/THREE 等 - 很認(rèn)真的優(yōu)化了繪制性能 - 很重視測試, 有接近 1.5K 個(gè)單元測試用例, 所以穩(wěn)定性還不錯, 已經(jīng)應(yīng)用在很多大大小小的系統(tǒng)上了
上面是一段 maptalks 官方介紹，下面來創(chuàng)建工程。首先利用 vue-cli3 搭建一個(gè) SPA 項(xiàng)目，然后寫一段 maptalks 的 HELLO WORLD。如果對 vue 項(xiàng)目的創(chuàng)建比較熟悉，可以跳過步驟一，直接看步驟二。
一、創(chuàng)建工程
vue create vue-maptalks
進(jìn)入工程配置頁面
選擇 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)建完成。
完成后，打開瀏覽，輸入 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í)例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯，也許這篇文章就是你的菜，一起來看看吧2022-08-08
Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄實(shí)現(xiàn)
本文主要介紹了vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
VuePress使用Algolia實(shí)現(xiàn)全文搜索
這篇文章主要為大家介紹了VuePress使用Algolia實(shí)現(xiàn)全文搜索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue3狀態(tài)管理的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
下面小編就為大家?guī)硪黄猇ue.js項(xiàng)目模板搭建圖文教程。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測的操作方法，感興趣的朋友一起看看吧2021-10-10
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05