資訊專欄INFORMATION COLUMN
摘要：百度地圖百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件等上有的組件可以直接使用，有興趣的同學可以直接上手這里不采用已經封裝好的地圖組件，而是從零開始，采用原生的百度地圖一
百度地圖
百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件（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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94082.html
MapBox 項目中用到MapBox也是偶然的機會，項目中需要采用3D地圖，當現有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高級開源的地圖，無奈谷歌地圖無法在國內使用，已是便找到Leafle，一開始驚艷于leafle的開源程度和其與眾不同的地圖風格，后來順藤摸瓜，找到一個商業性地圖，它便是我們的主角-MapBoxshowImg(https://segmentfault.com/img/b...
以下為個人目前接觸到的前端技術，歡迎大家補充。 一、前端技術框架 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:...
摘要：首先利用搭建一個項目，然后寫一段的。如果對項目的創建比較熟悉，可以跳過步驟一，直接看步驟二。輸入保存的模板名字，進入項目初始化構建，等待構建完成。二安裝刪除，新建，輸入如下代碼地圖初始化，應寫在函數中，以保證掛載點先于地圖渲染。 Maptalks 項目是一個 HTML5 的地圖引擎, 基于原生 ES6 Javascript 開發： 二三維一體化地圖, 通過二維地圖的旋轉 /傾斜增加三維視...
摘要：接上篇全家桶百度地圖，搭建數據可視化系統前言業務場景實現數據監控的系統。有線圖柱狀圖地圖，并具有定時刷新的功能。本篇將介紹一下剩下的部分。 接上篇vue全家桶+Echarts+百度地圖，搭建數據可視化系統 1 前 言 1.1 業務場景 實現數據監控的系統。有線圖、柱狀圖、地圖，并具有定時刷新的功能。 1.2 業務分析 上一篇分析的步驟大致有： 系統搭建vue-cli vuex...
閱讀 3669·2021-11-24 09:39
閱讀 1276·2021-09-30 09:48
閱讀 3258·2021-09-09 11:51
閱讀 2883·2021-09-08 10:41
閱讀 1329·2019-08-30 14:06
閱讀 2798·2019-08-30 14:01
閱讀 874·2019-08-29 17:11
閱讀 3169·2019-08-29 15:37
