Openlayer 添加标记点(2)

2021-03-02 16:21:32 浏览数 (3)

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)

0 人点赞