快捷導(dǎo)航

vue 地圖可視化 maptalks 篇實(shí)例代碼詳解

更新時(shí)間：2019年05月21日 08:53:48 作者：lifefriend_007

這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

Maptalks 項(xiàng)目是一個(gè) HTML5 的地圖引擎, 基于原生 ES6 Javascript 開發(fā)： - 二三維一體化地圖, 通過二維地圖的旋轉(zhuǎn) /傾斜增加三維視角 - 插件化設(shè)計(jì), 能與其他圖形庫(kù)結(jié)合, 開發(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)建比較熟悉，可以跳過步驟一，直接看步驟二。

一、創(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)建完成。

完成后，打開瀏覽，輸入 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: '&copy; <a >OpenStreetMap</a> contributors, &copy; <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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: