纳兰破产
maptalks 项目是一个 html5 的地图引擎, 基于原生 es6 javascript 开发： - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/three 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5k 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了
上面是一段 maptalks 官方介绍，下面来创建工程。首先利用 vue-cli3 搭建一个 spa 项目，然后写一段 maptalks 的 hello world。如果对 vue 项目的创建比较熟悉，可以跳过步骤一，直接看步骤二。
一、创建工程
vue create vue-maptalks
进入工程配置页面
选择 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，保存本次设置为模版，下次创建项目直接选择本次保留的模板。
输入保存的模板名字，进入项目初始化构建，等待构建完成。
完成后，打开浏览，输入
工程创建完成。
二、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 >carto</a>',
}),
});
console.log('map: ', map);
});
},
};
</script>
<style lang="scss">
html,body{ margin:0px;height:100%;width:100%; }
.container{ width:100%;height:100% }
</style>
效果如下：
总结
以上所述是小编给大家介绍的vue 地图可视化 maptalks 篇实例代码详解,希望对大家有所帮助
