vue 地图可视化（1）

1treeS 发布于2019-08-22 16:08 / 1440人阅读

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

百度地图

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

github上有vue-baidu-map的组件可以直接使用，有兴趣的同学可以直接上手
https://github.com/Dafrok/vue...

这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图api,一步步组合封装

项目引入地图

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

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

    // 初始化
    reset () {
      const {getMapScript, initMap} = this
      getMapScript().then(initMap)
    },
    // 获取baidumap
    getMapScript () {
      if (!global.BMap) {
        const ak = this.ak || this._BMap().ak
        global.BMap = {}
        global.BMap._preloader = new Promise((resolve, reject) => {
          global._initBaiduMap = function () {
            resolve(global.BMap)
            global.document.body.removeChild($script)
            global.BMap._preloader = null
            global._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 = BMap
      this.init(BMap)
    },
    init (BMap) {
      let $el = this.$refs.basicMap
      const map = new BMap.Map($el)
      this.map = map
      this.setMapOptions()
      map.centerAndZoom(this.initCenter, this.initZoom)
      this.$emit("ready", {BMap, map})
    },
    // 设置地图配置
    setMapOptions () {
    }

某业务组件

效果如图：

加入可视化工具

地图上常规的可视化需求可以分成3种，分别是点线面

点（定位、数据打点）

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

baiduMap.vue

   this.$emit("ready", {BMap, 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)
   }

效果图：

----------

线（导航、迁移路线）

业务组件

 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)

效果图：

----------

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

业务组件

 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插槽分发内容），之后业务只需引用组件并传递所需参数即可

待续，持续更新......

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

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

云服务器 GPU云服务器地图可视化数据地图可视化 Vue_Vue Vue

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

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

vue 地图可视化 mapbox篇(2)

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

_DangJin 2019-08-22 16:15 评论0 收藏0
web前端技术体系大全

以下为个人目前接触到的前端技术，欢迎大家补充。一、前端技术框架 1、Vue.js 官网：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鸟教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面应用Electron：https:...

RaoMeng 2019-08-23 15:53 评论0 收藏0
vue 地图可视化 maptalks 篇

摘要：首先利用搭建一个项目，然后写一段的。如果对项目的创建比较熟悉，可以跳过步骤一，直接看步骤二。输入保存的模板名字，进入项目初始化构建，等待构建完成。二安装删除，新建，输入如下代码地图初始化，应写在函数中，以保证挂载点先于地图渲染。 Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发：二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视...

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

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

hiyayiji 2019-08-26 13:57 评论0 收藏0