vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
程序员文章站
2022-06-23 18:24:54
在开发过程中发现 vue-baidu-map 封装的 bmpolyline 折线组件不能顺利绘制出带箭头的纹理。原因是 bmpolyline 文档中虽然有 icons 属性,但是对应的源文件中并没有p...
在开发过程中发现 vue-baidu-map
封装的 bmpolyline
折线组件不能顺利绘制出带箭头的纹理。
原因是 bmpolyline
文档中虽然有 icons
属性,但是对应的源文件中并没有props接收 icons
最初的开发思路:
根据 vue-baidu-map
折线组件的官方文档,在vue中通过prop,为 bmpolyline
组件传递一个 icons
数组,数组的元素必须为 iconsequence
类的实例对象。
而 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 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, // 图标缩放大小 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 百度地图方向箭头折线内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!