openlayer 点击标记点

原创
08/22 13:50
阅读数 96
我用的版本是"openlayers" "^4.6.5" ,首先在Feature设置ID,便于获取这个标记点的信息  iconFeature.set("Id",item.id)
           if(this.PointsLayer.length){
              console.log("you")
              this.PointsLayer.forEach(item=>{
                 this.OLMap.removeLayer(item)
              })
            }
            // let iconFeatures=[]  // 保存所有的点Feature
            this.allOnlinePersonInfo.forEach(item=>{
                // console.log(item)
                let PointsLayer = new ol.layer.Vector({
                  source: new ol.source.Vector(),
                });              
                let iconFeature = new ol.Feature({ 
                    geometry: new ol.geom.Point(   //绘制图形(点)
                      item.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:require("@/assets/imgs/xujianPerson.png")
                      
                      }),
                      //文本样式
                      text: new ol.style.Text({
                        textAlign: "center", //对齐方式
                        textBaseline: "middle", //文本基线
                        font: "normal 12px 微软雅黑", //字体样式
                        text: item.label, //文本内容
                        offsetY: 20, // Y轴偏置
                        offsetX:40,
                        fill: new ol.style.Fill({
                          //填充样式
                          color: "#333",
                        }),
                        backgroundStroke:new ol.style.Stroke({color: '#ffcc33', width:1}),
                        backgroundFill: new ol.style.Fill({
                          // 填充背景
                          color: "#FFF",
                        }),
                        padding: [2, 5, 2, 5],
                      }),                      

                    },
                    )
                  ); 
                  // iconFeature.setId(item.id); // 这种设置无效
                  iconFeature.set("Id",item.id)
                  PointsLayer.getSource().addFeature(iconFeature)  
                  this.OLMap.addLayer(PointsLayer) 
                  this.PointsLayer.push(PointsLayer)
                  console.log(this.PointsLayer)
     
            })  

 点击的时候获取ID 

          this.OLMap = new ol.Map({
          view: new ol.View({
            projection: "EPSG:4326", // 经纬度       
            center: center,        
            zoom: zoom || 8,
            minZoom: 6, 
            maxZoom: 18,
          }),
          target: "OLMap",
          layers: [tileLayer],
        });
      this.getSitePointInfoList();  
      this.showPersonMarker()
      this.OLMap.on("singleclick", (evt) => {
        console.log("hi");
        let arr = [];
        let id = "";
        var pixel = this.OLMap.getEventPixel(evt.originalEvent);
        var feature = this.OLMap.forEachFeatureAtPixel(
          evt.pixel,
          function (feature, layer) {
            id = feature.get("Id");
            arr.push(id);
          }
        );
        id = arr[0];
        this.olMarkerClick(id);

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部