vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解
在開發(fā)過程中發(fā)現(xiàn) vue-baidu-map
封裝的 BmPolyline
折線組件不能順利繪制出帶箭頭的紋理。
原因是 BmPolyline
文檔中雖然有 icons
屬性,但是對應(yīng)的源文件中并沒有props接收 icons
最初的開發(fā)思路:
根據(jù) vue-baidu-map
折線組件的官方文檔,在vue中通過Prop,為 BmPolyline
組件傳遞一個 icons
數(shù)組,數(shù)組的元素必須為 IconSequence
類的實例對象。
而 IconSequence
類的實例對象則是在 BaiduMap
組件的 ready
事件中拿到 BMap
類和 map
地圖實例對象,然后依次調(diào)用 BMap
基類的 Symbol
, IconSequence
子類,完成 IconSequence
對象的初始化。具體參數(shù)含義及代碼實現(xiàn)見上文發(fā)的官方案例地址。
按照上述思路完成代碼編寫后并不能得到預(yù)期中的結(jié)果。因為 BmPolyline
對應(yīng)的源文件中并沒有props接收 icons
。
解決方案
將 /node_modules/vue-baidu-map/components/overlays
目錄下的 BmPolyline
源文件復(fù)制,粘貼到另一個vue文件中,然后手動為折線組件配置 icons
詳細(xì)解決方案見下方代碼:
new_polyline.vue新的折線組件文件
<script> /** * 注意此處三個引入路徑 * 在源文件中使用的是相對路徑 * 但是因為現(xiàn)在是自定義組件,所以要重新調(diào)整路徑 */ import commonMixin from "vue-baidu-map/components/base/mixins/common.js"; import bindEvents from "vue-baidu-map/components/base/bindEvent.js"; import { createPoint } from "vue-baidu-map/components/base/factory.js"; export default { // 起一個新名字 name: "new-polyline", render() {}, mixins: [commonMixin("overlay")], props: { path: { type: Array }, // 新聲明一個icons icons: { type: Array }, strokeColor: { type: String }, strokeWeight: { type: Number }, strokeOpacity: { type: Number }, strokeStyle: { type: String }, massClear: { type: Boolean, default: true }, clicking: { type: Boolean, default: true }, editing: { type: Boolean, default: false } }, watch: { path: { handler(val, oldVal) { this.reload(); }, deep: true }, strokeColor(val) { this.originInstance.setStrokeColor(val); }, strokeOpacity(val) { this.originInstance.setStrokeOpacity(val); }, strokeWeight(val) { this.originInstance.setStrokeWeight(val); }, strokeStyle(val) { this.originInstance.setStrokeStyle(val); }, editing(val) { val ? this.originInstance.enableEditing() : this.originInstance.disableEditing(); }, massClear(val) { val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear(); }, clicking(val) { this.reload(); } }, methods: { load() { const { BMap, map, path, // 參數(shù)解構(gòu) 加入icons icons, strokeColor, strokeWeight, strokeOpacity, strokeStyle, editing, massClear, clicking } = this; const overlay = new BMap.Polyline( path.map(item => createPoint(BMap, { lng: parseFloat(item.lng), lat: parseFloat(item.lat) }) ), { strokeColor, strokeWeight, strokeOpacity, strokeStyle, // 配置icons icons, enableEditing: editing, enableMassClear: massClear, enableClicking: clicking } ); this.originInstance = overlay; map.addOverlay(overlay); bindEvents.call(this, overlay); } } }; </script>
地圖文件
<template> <div class="container"> <baidu-map class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="ready"> <new-polyline v-if="points && points.length >= 2 && checkPoints({ points })" :path="points" :icons="icons" stroke-color="#0091ea" :stroke-opacity="0.8" :stroke-weight="10" ></new-polyline> </baidu-map> </div> </template> <script> import newPolyline from "./new_polyline"; export default { components: { newPolyline }, data() { return { center: { lng: 116.404, lat: 39.915 }, zoom: 5, points: [], icons: [] }; }, methods: { ready({ BMap, map }) { this.points = this.getPointsSomehow(); var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, { scale: 0.5, // 圖標(biāo)縮放大小 strokeColor: "#fff", // 設(shè)置矢量圖標(biāo)的線填充顏色 strokeWeight: "3" // 設(shè)置線寬 }); var icons = new BMap.IconSequence(sy, "5%", "15%"); this.icons.push(icons) }, getPointsSomehow() { // 116.324356,39.980648 // 118.532031,32.010158 // 121.475599,31.380939 var arr = [ { lng: 116.324356, lat: 39.980648 }, { lng: 118.532031, lat: 32.010158 }, { lng: 121.475599, lat: 31.380939 } ]; return arr; }, // 查重 如果數(shù)組中只有一組有意義的坐標(biāo),繪制折線時可能會報錯,因為繪制一條折線需要兩組不同的坐標(biāo)點 checkPoints({ points }) { // 拿到第一組點 var originPoint = points[0]; // 將第一組點與后續(xù)點進行對比 如果坐標(biāo)集合中只有一組實際坐標(biāo)點則return false // 只要坐標(biāo)集合中有兩組不同的實際坐標(biāo)點,則return true for (var i = 1; i < points.length; i++) { if ( points[i].lat !== originPoint.lat || points[i].lng !== originPoint.lng ) { return true; } } return false; } } }; </script> <style> .map { width: 100%; height: 300px; } </style>
到此這篇關(guān)于vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解的文章就介紹到這了,更多相關(guān)vue 百度地圖方向箭頭折線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue + OpenLayers 快速入門學(xué)習(xí)教程
大家都知道使用 Openlayers可以很靈活自由的做出各種地圖和空間數(shù)據(jù)的展示。而且這個框架是完全免費和開源的,本文記錄下 Vue 使用 OpenLayers 入門,使用 OpenLayers 創(chuàng)建地圖組件的相關(guān)知識,需要的朋友一起學(xué)習(xí)下吧2021-09-09vue實現(xiàn)圖片路徑轉(zhuǎn)二進制文件流(binary)
這篇文章主要介紹了vue實現(xiàn)圖片路徑轉(zhuǎn)二進制文件流(binary),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue中使用 ElementUi 的 el-select 實現(xiàn)全選功能(思路詳解
在開發(fā)中,有一個需求是 選項組件中使用到一個 全選的功能,特在這記錄下實現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對vue ElementUi 全選功能感興趣的朋友一起看看吧2024-02-02詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04