vue 地图可视化 maptalks 篇

Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发： - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了

vue create vue-maptalks

yarn add maptalks

 1 <template>
 2   <div id="map" class="container"></div>
 3 </template>
 4 <script>
 5 import 'maptalks/dist/maptalks.css';
 6 import * as maptalks from 'maptalks';
 7 
 8 export default {
 9   mounted() {
10     this.$nextTick(() => {
11       const map = new maptalks.Map('map', {
12         center: [-0.113049, 51.498568],
13         zoom: 14,
14         baseLayer: new maptalks.TileLayer('base', {
15           urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
16           subdomains: ['a', 'b', 'c', 'd'],
17           attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
18         }),
19       });
20       console.log('map: ', map);
21     });
22   },
23 };
24 </script>
25 
26 <style lang="scss">
27 html,body{ margin:0px;height:100%;width:100%; }
28 .container{ width:100%;height:100% }
29 </style>

 地图初始化，应写在 nextTick 函数中，以保证挂载点 #map 先于地图渲染。