成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue 地圖可視化（1）

1treeS / 1511人閱讀

摘要：百度地圖百度地圖作為項(xiàng)目中地圖可視化最重要的一部分，不止其為國(guó)人自己的地圖，還因?yàn)槠渫晟频募夹g(shù)文檔案例和多樣化的開(kāi)源插件等上有的組件可以直接使用，有興趣的同學(xué)可以直接上手這里不采用已經(jīng)封裝好的地圖組件，而是從零開(kāi)始，采用原生的百度地圖一

百度地圖

百度地圖作為項(xiàng)目中地圖可視化最重要的一部分，不止其為國(guó)人自己的地圖，還因?yàn)槠渫晟频募夹g(shù)文檔案例和多樣化的開(kāi)源插件（echarts、Mapv等）

github上有vue-baidu-map的組件可以直接使用，有興趣的同學(xué)可以直接上手
https://github.com/Dafrok/vue...

這里不采用已經(jīng)封裝好的地圖組件，而是從零開(kāi)始，采用原生的百度地圖api,一步步組合封裝

項(xiàng)目引入地圖

網(wǎng)上教程多數(shù)為index.html加入百度地圖api，然而這種寫(xiě)法并不符合我們的組件化思想，我的思想是先抽取百度地圖為多帶帶組件.vue，在需要地圖的業(yè)務(wù)中加載

參考vue-baidu-map動(dòng)態(tài)獲取百度地圖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})
    },
    // 設(shè)置地圖配置
    setMapOptions () {
    }

某業(yè)務(wù)組件

效果如圖：

加入可視化工具

地圖上常規(guī)的可視化需求可以分成3種，分別是點(diǎn)線面

點(diǎn)（定位、數(shù)據(jù)打點(diǎn)）

在百度地圖api官網(wǎng)實(shí)例中，可以通過(guò)addOverlay()將標(biāo)點(diǎn)添加到地圖上，因此在vue中，只要我們獲取到BMap和map構(gòu)造函數(shù)就可以滿足我們的操作
在組件中，我通過(guò)$emit父子組件間廣播事件，并將BMap、map傳到業(yè)務(wù)組件

baiduMap.vue

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

業(yè)務(wù)組件

   
   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)
   }

效果圖：

----------

線（導(dǎo)航、遷移路線）

業(yè)務(wù)組件

 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)

效果圖：

----------

面（區(qū)域選定、覆蓋物、熱力圖）

業(yè)務(wù)組件

 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)
 map.enableScrollWheelZoom()
 // 創(chuàng)建多邊形
 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()

效果圖：

上面簡(jiǎn)單舉了幾個(gè)實(shí)例，真實(shí)環(huán)境中還會(huì)很多其他的API，比如方向、定位、搜索、放大縮小等控件
但我們也發(fā)現(xiàn)在不同業(yè)務(wù)重復(fù)調(diào)用同一模塊時(shí)，上面的代碼就顯得過(guò)于累贅，因此我們需要把添加到地圖上的圖層（點(diǎn)線面工具）都抽取封裝成組件（需要用到slot插槽分發(fā)內(nèi)容），之后業(yè)務(wù)只需引用組件并傳遞所需參數(shù)即可

待續(xù)，持續(xù)更新......

下一篇文章： vue 地圖可視化（2） mapbox地圖篇

完整項(xiàng)目地址： https://github.com/hty7/vue-d...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94082.html

相關(guān)文章

  • vue 地圖可視化 mapbox篇(2)

    MapBox 項(xiàng)目中用到MapBox也是偶然的機(jī)會(huì)，項(xiàng)目中需要采用3D地圖，當(dāng)現(xiàn)有的工具（百度地圖）無(wú)法滿足我們的需求，我們肯定需要更高級(jí)開(kāi)源的地圖，無(wú)奈谷歌地圖無(wú)法在國(guó)內(nèi)使用，已是便找到Leafle，一開(kāi)始驚艷于leafle的開(kāi)源程度和其與眾不同的地圖風(fēng)格，后來(lái)順藤摸瓜，找到一個(gè)商業(yè)性地圖，它便是我們的主角-MapBoxshowImg(https://segmentfault.com/img/b...

    _DangJin 評(píng)論0 收藏0

  • web前端技術(shù)體系大全

    以下為個(gè)人目前接觸到的前端技術(shù)，歡迎大家補(bǔ)充。 一、前端技術(shù)框架 1、Vue.js 官網(wǎng)：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鳥(niǎo)教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面應(yīng)用Electron：https:...

    RaoMeng 評(píng)論0 收藏0

  • vue 地圖可視化 maptalks 篇

    摘要：首先利用搭建一個(gè)項(xiàng)目，然后寫(xiě)一段的。如果對(duì)項(xiàng)目的創(chuàng)建比較熟悉，可以跳過(guò)步驟一，直接看步驟二。輸入保存的模板名字，進(jìn)入項(xiàng)目初始化構(gòu)建，等待構(gòu)建完成。二安裝刪除，新建，輸入如下代碼地圖初始化，應(yīng)寫(xiě)在函數(shù)中，以保證掛載點(diǎn)先于地圖渲染。 Maptalks 項(xiàng)目是一個(gè) HTML5 的地圖引擎, 基于原生 ES6 Javascript 開(kāi)發(fā)： 二三維一體化地圖, 通過(guò)二維地圖的旋轉(zhuǎn) /傾斜增加三維視...

    enali 評(píng)論0 收藏0

  • vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)（【續(xù)】接口篇）

    摘要：接上篇全家桶百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)前言業(yè)務(wù)場(chǎng)景實(shí)現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖柱狀圖地圖，并具有定時(shí)刷新的功能。本篇將介紹一下剩下的部分。 接上篇vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng) 1 前 言 1.1 業(yè)務(wù)場(chǎng)景 實(shí)現(xiàn)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖、柱狀圖、地圖，并具有定時(shí)刷新的功能。 1.2 業(yè)務(wù)分析 上一篇分析的步驟大致有： 系統(tǒng)搭建vue-cli vuex...

    hiyayiji 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<