电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解

瀏覽:124日期:2022-06-12 10:45:27

在開發過程中發現 vue-baidu-map 封裝的 BmPolyline 折線組件不能順利繪制出帶箭頭的紋理。

原因是 BmPolyline 文檔中雖然有 icons 屬性,但是對應的源文件中并沒有props接收 icons

最初的開發思路:

根據 vue-baidu-map 折線組件的官方文檔,在vue中通過Prop,為 BmPolyline 組件傳遞一個 icons 數組,數組的元素必須為 IconSequence 類的實例對象。

vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解

而 IconSequence 類的實例對象則是在 BaiduMap 組件的 ready 事件中拿到 BMap 類和 map 地圖實例對象,然后依次調用 BMap 基類的 Symbol , IconSequence 子類,完成 IconSequence 對象的初始化。具體參數含義及代碼實現見上文發的官方案例地址。

按照上述思路完成代碼編寫后并不能得到預期中的結果。因為 BmPolyline 對應的源文件中并沒有props接收 icons 。

解決方案

將 /node_modules/vue-baidu-map/components/overlays 目錄下的 BmPolyline 源文件復制,粘貼到另一個vue文件中,然后手動為折線組件配置 icons

詳細解決方案見下方代碼:

new_polyline.vue新的折線組件文件

<script>/** * 注意此處三個引入路徑 * 在源文件中使用的是相對路徑 * 但是因為現在是自定義組件,所以要重新調整路徑 */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, // 參數解構 加入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 :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, // 圖標縮放大小 strokeColor: '#fff', // 設置矢量圖標的線填充顏色 strokeWeight: '3' // 設置線寬 }); 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; }, // 查重 如果數組中只有一組有意義的坐標,繪制折線時可能會報錯,因為繪制一條折線需要兩組不同的坐標點 checkPoints({ points }) { // 拿到第一組點 var originPoint = points[0]; // 將第一組點與后續點進行對比 如果坐標集合中只有一組實際坐標點則return false // 只要坐標集合中有兩組不同的實際坐標點,則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>

到此這篇關于vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解的文章就介紹到這了,更多相關vue 百度地圖方向箭頭折線內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: 百度 地圖
相關文章:
主站蜘蛛池模板: 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 单机除尘器 骨架-脉冲除尘器设备生产厂家-润天环保设备 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 飞歌臭氧发生器厂家_水处理臭氧发生器_十大臭氧消毒机品牌 | 热镀锌槽钢|角钢|工字钢|圆钢|H型钢|扁钢|花纹板-天津千百顺钢铁贸易有限公司 | 智慧养老_居家养老_社区养老_杰佳通| 盘扣式脚手架-附着式升降脚手架-移动脚手架,专ye承包服务商 - 苏州安踏脚手架工程有限公司 | 粉丝机械,粉丝烘干机,粉丝生产线-招远市远东粉丝机械有限公司 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 路面机械厂家 | 六自由度平台_六自由度运动平台_三自由度摇摆台—南京全控科技 | 跨境物流_美国卡派_中大件运输_尾程派送_海外仓一件代发 - 广州环至美供应链平台 | 法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 诺冠气动元件,诺冠电磁阀,海隆防爆阀,norgren气缸-山东锦隆自动化科技有限公司 | 我车网|我关心的汽车资讯_汽车图片_汽车生活! | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 分光色差仪,测色仪,反透射灯箱,爱色丽分光光度仪,美能达色差仪维修_苏州欣美和仪器有限公司 | 板材品牌-中国胶合板行业十大品牌-环保板材-上海声达板材 | 湖南自考_湖南自学考试网| 心肺复苏模拟人|医学模型|急救护理模型|医学教学模型上海康人医学仪器设备有限公司 | 河南膏药贴牌-膏药代加工-膏药oem厂家-洛阳今世康医药科技有限公司 | 不锈钢搅拌罐_高速搅拌罐厂家-无锡市凡格德化工装备科技有限公司 | 防爆暖风机_防爆电暖器_防爆电暖风机_防爆电热油汀_南阳市中通智能科技集团有限公司 | 磁力轮,磁力联轴器,磁齿轮,钕铁硼磁铁-北京磁运达厂家 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | 耐酸碱泵-自吸耐酸碱泵型号「品牌厂家」立式耐酸碱泵价格-昆山国宝过滤机有限公司首页 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 | 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 网站seo优化_seo云优化_搜索引擎seo_启新网络服务中心 | 新车测评网_网罗汽车评测资讯_汽车评测门户报道 | 百度关键词优化_网站优化_SEO价格 - 云无限好排名 | 半容积式换热器_北京浮动盘管换热器厂家|北京亿丰上达 | 板材品牌-中国胶合板行业十大品牌-环保板材-上海声达板材 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 北京公寓出租网-北京酒店式公寓出租平台 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 防腐储罐_塑料储罐_PE储罐厂家_淄博富邦滚塑防腐设备科技有限公司 |