vue 地图可视化 maptalks 篇

enali 发布于2019-05-22 15:21 / 2086人阅读

摘要：首先利用搭建一个项目，然后写一段的。如果对项目的创建比较熟悉，可以跳过步骤一，直接看步骤二。输入保存的模板名字，进入项目初始化构建，等待构建完成。二安装删除，新建，输入如下代码地图初始化，应写在函数中，以保证挂载点先于地图渲染。

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，保存本次设置为模版，下次创建项目直接选择本次保留的模板。

输入保存的模板名字，进入项目初始化构建，等待构建完成。

完成后，打开浏览，输入 http://localhost:8080/

工程创建完成。

二、HELLO WORLD

安装 maptalks

yarn add maptalks

删除 src/App.vue，新建 App.vue，输入如下代码

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

效果如下：

云服务器 GPU云服务器地图可视化数据地图可视化 maptalks 上一篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6747.html

地图绘制初探——基于maptalks的2.5D地图绘制

摘要：下面，以贵州省的伪地图为例，进行代码的编写和相应数据的简单处理。根据问答如何合并区域边界，访问在线的地图数据处理网站，给每个县市取一个相同的别名，一番输入输出，我们就得到了贵州省的外边界。进行图形可视化，难免会遇到地理数据的可视化需求。通常情况下，直接使用echarts对配置项进行处理，就可以满足大部分需求。当然，更加复杂的定制化需求，可能就需要借助d3、Three.js等工具。如果...

qylost 2019-08-23 14:15 评论0 收藏0
vue 地图可视化 mapbox篇(2)

MapBox 项目中用到MapBox也是偶然的机会，项目中需要采用3D地图，当现有的工具（百度地图）无法满足我们的需求，我们肯定需要更高级开源的地图，无奈谷歌地图无法在国内使用，已是便找到Leafle，一开始惊艳于leafle的开源程度和其与众不同的地图风格，后来顺藤摸瓜，找到一个商业性地图，它便是我们的主角-MapBoxshowImg(https://segmentfault.com/img/b...

_DangJin 2019-08-22 16:15 评论0 收藏0
vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇）

摘要：接上篇全家桶百度地图，搭建数据可视化系统前言业务场景实现数据监控的系统。有线图柱状图地图，并具有定时刷新的功能。本篇将介绍一下剩下的部分。接上篇vue全家桶+Echarts+百度地图，搭建数据可视化系统 1 前言 1.1 业务场景实现数据监控的系统。有线图、柱状图、地图，并具有定时刷新的功能。 1.2 业务分析上一篇分析的步骤大致有：系统搭建vue-cli vuex...

hiyayiji 2019-08-26 13:57 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0
vue 地图可视化（1）

摘要：百度地图百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件等上有的组件可以直接使用，有兴趣的同学可以直接上手这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图一百度地图百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件（echarts、Mapv等...

1treeS 2019-08-22 16:08 评论0 收藏0