画线跟标记点类似都是先创建一个矢量图层,把feature添加到矢量图层中
setMapLineOL(arr, color, typecode){
let iconFeatures=[] // 保存所有的点Feature
let path = arr.map(item=>{
return [+item.longitude,+item.latitude]
})
let PointerArr = arr.map(item=>{
return {position:[+item.longitude,+item.latitude],
nodeTypeCode: item.nodeTypeCode
}
})
// 点的矢量图层
let PointsLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
});
for(let i=0;i<PointerArr.length;i++){
let iconFeature = new ol.Feature({
geometry: new ol.geom.Point( //绘制图形(点)
PointerArr[i].position
),
});
iconFeature.setStyle(
new ol.style.Style({
image: new ol.style.Icon({
// scale:0.5,
//控制标注图片和文字之间的距离
// anchor: [0.2, 1],
//标注样式的起点位置
anchorOrigin: 'top-right',
//X方向单位:分数
anchorXUnits: 'fraction',
//Y方向单位:像素
anchorYUnits: 'pixels',
//偏移起点位置的方向
offsetOrigin: 'top-right',
//透明度
opacity: 1,
//图片路径
src:PointerArr[i].nodeTypeCode == "NT001"
? require("@/assets/imgs/mark_normal.png")
: PointerArr[i].nodeTypeCode == "NT002"
? require("@/assets/imgs/mark_pressure.png")
: require("@/assets/imgs/mark_Leak.png"),
}),
},
)
);
iconFeatures.push(iconFeature)
}
// 线的矢量图层
let lineLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
});
let feature = new ol.Feature({
type:"route",
geometry: new ol.geom.LineString(
path
),
});
feature.setStyle(
new ol.style.Style({
stroke:new ol.style.Stroke({
width:3,
color:color // 不同颜色的线
}),
})
)
PointsLayer.getSource().addFeatures(iconFeatures)
lineLayer.getSource().addFeature(feature)
let filterData = this.olLines.filter((item) => {
return item.typecode == typecode;
});
if (filterData.length) {
filterData[0].lines.push(lineLayer);
filterData[0].markers.push(PointsLayer);
} else {
let tempObj = {};
tempObj.typecode = typecode;
tempObj.lines = [];
tempObj.markers = [];
tempObj.lines.push(lineLayer);
tempObj.markers.push(PointsLayer);
this.olLines.push(tempObj);
}
this.OLMap.addLayer(lineLayer)
this.OLMap.addLayer(PointsLayer)
},
可以把图层保存在数组中,移除时采用removeLayer,只能单个移除图层,暂时没看到移除多个图层的方法
layers.forEach(innerItem=>{
this.OLMap.removeLayer(innerItem)
})