import * as ol from 'openlayers'
也可以采用 new ol.Overlay 添加标记点
代码语言:javascript复制 // 过滤出将要删除的markers为非空项
let willClearMarkers = this.stationMarkers.filter(clearMarkerObjs=>{
return clearMarkerObjs.markers.length
})
// 清空marker
willClearMarkers.forEach(item=>{
// getOverlays().clear()
this.OLMap.getOverlays().clear()
})
this.allStationInfo.forEach((item) => {
// let marker;
let pointerInfo = item.resultList;
let len = pointerInfo.length;
let filterStationMarker = this.stationMarkers.filter(itemObj=>{
return item.typeCode == itemObj.typeCode
})
console.log(filterStationMarker)
for (let i = 0; i < len; i ) {
pointerInfo[i].img = "";
if (item.typeCode == "001") {
pointerInfo[i].img = require("@/assets/imgs/mapInput.jpg");
} else if (item.typeCode == "002") {
pointerInfo[i].img = require("@/assets/imgs/mapOutput.jpg");
} else {
pointerInfo[i].img = require("@/assets/imgs/mapMainCustom.jpg");
}
let labelContent = "<div class='labelWrap'>";
labelContent =
"<div class='title'>"
'<img class="mapLabelPic" src="'
pointerInfo[i].img
'" />'
pointerInfo[i].title
"</div>";
for (let j = 0; j < pointerInfo[i].content.length; j ) {
labelContent = "<div>";
let temp = "";
let name = "";
let value = "";
let unit = "";
for (let key in pointerInfo[i].content[j]) {
if (key == "name") {
name = pointerInfo[i].content[j][key] " : ";
} else if (key == "value") {
value = pointerInfo[i].content[j][key];
} else {
unit = pointerInfo[i].content[j][key];
}
}
temp = name value unit;
labelContent = labelContent temp "</div>";
}
labelContent = "</div>";
let divWrap = document.createElement("div")
divWrap.className="olLabelWrap"
divWrap.innerHTML = labelContent
var marker = new ol.Overlay({
// position:[120.50,28.0], // position:fromLonLat([120.50,28.0]),
position:pointerInfo[i].position,
positioning:"bottom-center",
element:divWrap, // element是节点不能是html字符串
stopEvent:false
})
this.OLMap.addOverlay(marker)
filterStationMarker[0].markers.push(marker)