vue 地图可视化（1）

百度地图

百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件（echarts、Mapv等）

github上有vue-baidu-map的组件可以直接使用，有兴趣的同学可以直接上手
https://github.com/Dafrok/vue-baidu-map.git
这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图api,一步步组合封装

项目引入地图

网上教程多数为index.html加入百度地图api，然而这种写法并不符合我们的组件化思想，我的思想是先抽取百度地图为单独组件.vue，在需要地图的业务中加载

参考vue-baidu-map动态获取百度地图api
baiduMap.vue

        // 初始化reset () {const {getMapScript, initMap} = thisgetMapScript().then(initMap)},// 获取baidumapgetMapScript () {if (!global.BMap) {const ak = this.ak || this._BMap().akglobal.BMap = {}global.BMap._preloader = new Promise((resolve, reject) => {global._initBaiduMap = function () {resolve(global.BMap)global.document.body.removeChild($script)global.BMap._preloader = nullglobal._initBaiduMap = null}const $script = document.createElement('script')global.document.body.appendChild($script)$script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`})return global.BMap._preloader} else if (!global.BMap._preloader) {return Promise.resolve(global.BMap)} else {return global.BMap._preloader}},// 获取BMap, 初始化地图initMap (BMap) {this.BMap = BMapthis.init(BMap)},init (BMap) {let $el = this.$refs.basicMapconst map = new BMap.Map($el)this.map = mapthis.setMapOptions()map.centerAndZoom(this.initCenter, this.initZoom)this.$emit('ready', {BMap, map})},// 设置地图配置setMapOptions () {}

某业务组件

    <template><baidu-map mapWidth="100%" mapHeight="500px"></baidu-map></template><script>import BaiduMap from '@/components/baiduMap'export default {components: {BaiduMap}}</script>

效果如图：

加入可视化工具

地图上常规的可视化需求可以分成3种，分别是点线面
1. 点（定位、数据打点）

在百度地图api官网实例中，可以通过addOverlay()将标点添加到地图上，因此在vue中，只要我们获取到BMap和map构造函数就可以满足我们的操作
在组件中，我通过$emit父子组件间广播事件，并将BMap、map传到业务组件

baiduMap.vue

        this.$emit('ready', {BMap, map})

业务组件

        <baidu-map mapWidth="100%" mapHeight="500px" @ready="initReady"></baidu-map>initReady ({BMap, map}) {let point = new BMap.Point(116.404, 39.915)map.centerAndZoom(point, 15)let marker = new BMap.Marker(point)map.addOverlay(marker)}

效果图：

----------

2. 线（导航、迁移路线）

业务组件

     map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)let myP1 = new BMap.Point(116.380967, 39.913285)let myP2 = new BMap.Point(116.424374, 39.914668)let driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}})driving.search(myP1, myP2)

效果图：

----------

3. 面（区域选定、覆盖物、热力图）

业务组件

 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)map.enableScrollWheelZoom()// 创建多边形let polygon = new BMap.Polygon([new BMap.Point(116.387112, 39.920977),new BMap.Point(116.385243, 39.913063),new BMap.Point(116.394226, 39.917988),new BMap.Point(116.401772, 39.921364),new BMap.Point(116.41248, 39.927893)], {strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5})// 增加多边形map.addOverlay(polygon)polygon.enableEditing()

效果图：

上面简单举了几个实例，真实环境中还会很多其他的API，比如方向、定位、搜索、放大缩小等控件
但我们也发现在不同业务重复调用同一模块时，上面的代码就显得过于累赘，因此我们需要把添加到地图上的图层（点线面工具）都抽取封装成组件（需要用到[`slot`插槽分发内容][7]），之后业务只需引用组件并传递所需参数即可

---------- 待续 ----------

完整项目地址： https://github.com/hty7/vue-demo.git

下一篇文章：vue 地图可视化（2）Mapbox地图篇

vue 地图可视化（1）相关推荐

vue 地图可视化 (2)
MapBox 项目中用到MapBox也是偶然的机会,项目中需要采用3D地图,当现有的工具(百度地图)无法满足我们的需求,我们肯定需要更高级开源的地图,无奈谷歌地图无法在国内使用,已是便找到Leafle ...
vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
炫酷，SpringBoot+Echarts实现用户访问地图可视化（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 SpringBoot+Echarts用户访问地图可视化意义在常 ...
【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
在数据可视化大屏中,地图可视化是常用的高级图表之一. 很多小伙伴们以为地图太高大上了,那么实现起来估计也不容易,说实话,确实不那么容易,直接用echarts是要花些时间研究的,但是我们可以将其二次封装 ...
三维地图前端arcgis_vue地图可视化 ArcGIS篇（3）
ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看官方解释 arc ...
R语言ggplot2进行特定国家或者地区的地图可视化、在地图上标出所有首府城市所在地（plot the locations of the capital cities）
R语言ggplot2进行特定国家或者地区的地图可视化.在地图上标出所有首府城市所在地(plot the locations of the capital cities) 目录
你不曾见过的酷炫地图可视化作品（一）
一.前言前不久在微博上看到一个"世界顶级10,000个学者(h-index最高的学者)过去50年在世界各地的迁移图"(点击查看完整视频),于是打算整理下看过的一些可视化.信息图等 ...
动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成
EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...
Python地信专题 | 基于geopandas玩转地图可视化
文章来源于Python大数据分析,作者费弗里本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes[1] ...

vue 地图可视化（1）

百度地图

vue 地图可视化（1）相关推荐

最新文章

热门文章