效果:
代码:
圈的部分有两种写法一种是用组件直接写,一种是不用组件。这里因为我的数据是动态的,上面地图的点还有路线需要切换,但是区域的线不用切换。就采用了不是组件的写法。
圈的地区。
方法一:采用画线组件bm-polyline
<bm-polyline
:path="polylinePath"
stroke-color="#00ccff"
:stroke-opacity="1"
:stroke-weight="2"
:editing="false"
></bm-polyline>
// 渐变色是在app.vue里面写的
svg path{
filter: drop-shadow(2px 4px 6px #00ccff);
}
方法二:自己手动添加
// 我是把这个方法单独拿出来了,使用的时候引用就好
getArea(){
var polyliness = []
this.polylinePath.forEach((i) => {
polyliness.push(new this.BMap.Point(i.lng, i.lat));
});
var polylinea = new this.BMap.Polyline(polyliness, {strokeColor: "#00ccff", strokeWeight: 1, strokeOpacity: 3}); //创建折线
//参数:颜色,线的宽度,线的透明度
this.map.addOverlay(polylinea);
polylinea.disableMassClear();//这个是防止下面我删除线的时候它不删除
},
路径的折线
同样我也是分出来了。但因为它的数据是根据后台获得的,会有延迟,所以在调用它的时候需要加个延迟器
//添加路线箭头
getPoly(){
//创建路线
var sy = new this.BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.6, //图标缩放大小
strokeColor: "#24a9fa", //设置矢量图标的线填充颜色
strokeWeight: "2", //设置线宽
});
var icons = new this.BMap.IconSequence(sy, "10", "30");
this.pointList = JSON.parse(JSON.stringify(this.pointList))
// 创建polyline对象
var pois = [];
this.pointList.forEach((i) => {
pois.push(new this.BMap.Point(i.lng, i.lat));
});
// 插入渐变
// let mapE = document.getElementsByClassName("bm-view")[1];
setTimeout(()=>{
let svgE = document.getElementsByTagName("svg")[0];
console.log("svg",svgE)
let def = `<defs>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="#2c468b" />
<stop offset="50%" stop-color="#2f5d95" />
<stop offset="100%" stop-color="#24a9fa" />
</linearGradient>
</defs>`;
// if (svgE.length==0) {
// for(let i in svgE) {
// console.log("i",i)
svgE.insertAdjacentHTML("afterBegin",def);
// }
// }
},1000)
var sj = new this.BMap.Polyline(pois, {
enableEditing: false, //是否启用线编辑,默认为false
enableClicking: true, //是否响应点击事件,默认为true
icons: [icons],
strokeWeight: "3", //折线的宽度,以像素为单位
strokeOpacity: 0.8, //折线的透明度,取值范围0 - 1
strokeColor: "url(#MyGradient)", //折线颜色
// strokeColor: "red", //折线颜色
});
this.map.addOverlay(sj); //增加折线
},
//调用,在需要调用的地方加上它
setTimeout(()=>{
this.getPoly()
},300)