【vue-baidu-map】绘制带方向箭头的【多条】折线

需求

技术说明

官方文档地址

实现方案

啥都不说，上效果图大家就懂了

需求

点为站点，白框显示名称+报警图标
站点颜色根据参数设置
站点间有河流方向

技术说明

引用 vue-baidu-map
引用自定义插件，以下会做说明

官方文档地址

vue-baidu-map
原生JS在折线上添加方向箭头官方案例

实现方案

原文档是满足不了我们需求的，所以我们需要自己封装。（本来我这边只是CDN加速引用，但是自己封装用到了源文件，所以还是要npm一下）

加入：

main.js :

import VueBaiduMap from 'vue-baidu-map'
Vue.use(VueBaiduMap, {ak: '***'
})

npm:

cnpm install vue-baidu-map --save

引入封装文件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: {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,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,enableEditing: editing,enableMassClear: massClear,enableClicking: clicking});this.originInstance = overlay;map.addOverlay(overlay);bindEvents.call(this, overlay);}}
};
</script>

引入封装文件MyOverlay.vue（固定弹框）:

<template><bm-overlayref="customOverlay":class="{sample: true, active}"pane="labelPane"@draw="draw"><div><div class="text">{{text}}</div><img v-if="img1!=''" :src="img1" height="13vh" width="13vh" alt="图像" /><img v-if="img2!=''" :src="img2" height="13vh" width="13vh" alt="图像" /></div> </bm-overlay>
</template><script>
export default { props: ['text','img1','img2', 'position', 'active'],watch: {position: { handler () { this.$refs.customOverlay.reload() },deep: true }},methods: {draw ({el, BMap, map}) {const {lng, lat} = this.positionconst pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))el.style.left = pixel.x +20 + 'px'el.style.top = pixel.y - 30 + 'px'}}
}
</script><style>
.text{padding: 2px;/* text-overflow: ellipsis;overflow: hidden;display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
}
.sample {width: 80px;/* height: 30px; */background: rgba(255,255,255,0.5);overflow: hidden;box-shadow: 0 0 5px #fff;color: #323232;padding: 5px;position: absolute;font-size: 10px;}
</style>

主代码：

      <baidu-map style="width: 100%;height: 100%;z-index:0;" :center="center" :zoom="zoom" @ready="handler":scroll-wheel-zoom="true" :mapClick="false" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom"><!-- 图标+默认跳动+点击跳动 --><bm-marker v-for="item in maps" :key="item.id" :position="{lng: item.longitude, lat: item.latitude}":icon="{url: (item.qualityLevel==1?'static/img/stationAlarm.png':item.qualityLevel==2?'static/img/outLine.png':'static/img/stationNormal.png'), size: {width: 48, height: 48}}":animation="nowStationId==item.id?'BMAP_ANIMATION_BOUNCE':''" @click="clickStation(item)"></bm-marker><!-- 固定弹框内容 --><MyOverlay v-if="nameShow" v-for="item in maps" :key="item.id":position="{lng: item.longitude, lat: item.latitude}" :text="item.name":img1="item.deviceWarn?'static/img/alarm2.png':''" :img2="item.qualityWarn?'static/img/alarm1.png':''"></MyOverlay><!-- 箭头折线 --><div v-for="item in points"><new-polyline :path="item.point" :icons="item.icon" stroke-color="#0091ea" :stroke-opacity="0.8":stroke-weight="10"></new-polyline></div></baidu-map>

  import MyOverlay from '@/components/common/MyOverlay.vue'import newPolyline from "./children/new_polyline";export default {components: {MyOverlay,newPolyline},data() {return {map: "", // 地图maps: [], // 站点信息数组nowStationId: '',timeId: "", //循环center: {lng: 0,lat: 0},zoom: 3,contentShow: false,nameShow: true,points: [],};},

methods: {handler({BMap,map}) {this.map = mapthis.getTreePath()this.getMapData()this.zoom = 15},draw({el,BMap,map}) {const pixel = map.pointToOverlayPixel(new BMap.Point(map.re.lng, map.re.lat))el.style.left = pixel.x - 60 + 'px'el.style.top = pixel.y - 20 + 'px'},//设置当前点+移动坐标clickStation(item) {this.nowStationId = item.idthis.center.lng = item.longitudethis.center.lat = item.latitude},//移动或缩放时syncCenterAndZoom(e) {let Zoom =  e.target.getZoom()if (Zoom < 13) {this.nameShow = false} else {this.nameShow = true}},//获取首次加载点（引接口）getTreePath() {this.center.lng = 114.52785300795644this.center.lat = 38.14758574827796this.nowStationId = '1'},//获取数据（引接口）getMapData() {
this.maps = [{"id": "1","name": "站点名称站点名称站点名称站点名称站点名称","longitude": 114.52785300795644,"latitude": 38.14758574827796,"qualityLevel": 1,"deviceWarn": true,"qualityWarn": true,"upSiste": []},{"id": "2","name": "站点名称2","longitude": 114.54050114953694,"latitude": 38.13759635572114,"qualityLevel": 2,"deviceWarn": true,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "2-1", //上游站点id"name": "上游站点2-1", //上游站点名称"longitude": 114.52785300795644, //上游经度"latitude": 38.14758574827796 //上游维度}]},{"id": "3","name": "站点名称3","longitude": 114.56579743269792,"latitude": 38.12419932394176,"qualityLevel": 3,"deviceWarn": false,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.54050114953694, //上游经度"latitude": 38.13759635572114 //上游维度}]},{"id": "4","name": "站点名称4","longitude": 114.5908781225365,"latitude": 38.12056580319661,"qualityLevel": 3,"deviceWarn": false,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.56579743269792, //上游经度"latitude": 38.12419932394176 //上游维度}]},{"id": "5","name": "站点名称5","longitude": 114.6115750814864,"latitude": 38.11613720325717,"qualityLevel": 3,"deviceWarn": true,"qualityWarn": true,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.5908781225365, //上游经度"latitude": 38.12056580319661 //上游维度}]},{"id": "6","name": "站点名称6","longitude": 114.63838051790414,"latitude": 38.11556941444744,"qualityLevel": 2,"deviceWarn": true,"qualityWarn": false,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.6115750814864, //上游经度"latitude": 38.11613720325717 //上游维度}]},{"id": "6","name": "站点名称6","longitude": 114.68336765784383,"latitude": 38.10284977850926,"qualityLevel": 1,"deviceWarn": true,"qualityWarn": true,"upSiste": [ //上游站点信息{"id": "3-1", //上游站点id"name": "上游站点3-1", //上游站点名称"longitude": 114.63838051790414, //上游经度"latitude": 38.11556941444744 //上游维度}]}]for (var i in this.maps) {for (var j in this.maps[i].upSiste) {if (this.maps[i].upSiste.length != 0) {var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {scale: 0.5, // 图标缩放大小strokeColor: "#fff", // 设置矢量图标的线填充颜色strokeWeight: "3" // 设置线宽});var icon = new BMap.IconSequence(sy, "5%", "15%");var icons = []icons.push(icon)var item = {point: [{lng: this.maps[i].upSiste[j].longitude,lat: this.maps[i].upSiste[j].latitude},{lng: this.maps[i].longitude,lat: this.maps[i].latitude}],icon: icons}this.points.push(item)}}}
},
}

测试数据在上方，自己封装的代码，拿走不谢！

这之前，实现了vue-baidu-map与mapv的结合实现动态水流动画，但是对于电脑要求有点高，GPU直接就占满了，没想到好的解决方案

【vue-baidu-map + mapv】结合实现动态水流动画

【vue-baidu-map】绘制带方向箭头的【多条】折线相关推荐

Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回
话不多说,直接上代码: 参考官网代码改编:https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 效果图 index.vue <te ...
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线
临时接到一个小任务,要封装一个绘制带有方向箭头的折线的功能接口,就下面这种样式: 百度地图给的示例是这样的: var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BA ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue+echarts+json绘制地图“绝对干货”
vue+echarts+json绘制地图"绝对干货" 不多说,直接干该样式实现及其简单跟着我做就好了 vue没安装的回去看基础吧 echarts没安装的 npm instal ...
arcgis for android: 绘制带流向箭头的线
arcgis for android: 绘制带流向箭头的线需求描述项目中需要绘制如下图所示的线,但arcgis for android中linesymbol只提供了单箭头/颜色/实虚线等简单配置项 ...

【vue-baidu-map】绘制带方向箭头的【多条】折线

需求

技术说明

官方文档地址

实现方案

【vue-baidu-map】绘制带方向箭头的【多条】折线相关推荐

最新文章

热门文章