Openlayer 添加標記點(2)

import   *   as   ol   from   'openlayers'

也可以採用 new ol.Overlay 添加標記點

            // 過濾出將要刪除的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)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章