前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Openlayer 添加标记点(2)

Openlayer 添加标记点(2)

作者头像
tianyawhl
发布2021-03-02 16:21:32
9170
发布2021-03-02 16:21:32
举报
文章被收录于专栏:前端之攻略前端之攻略

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)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档