基于点击的特定要素修改OpenLayers弹窗内容

问题说明 #

使用OpenLayers 5开发地图应用时，已成功在地图上显示三个不同颜色的圆形矢量要素，但点击任意要素时弹出的弹窗内容均相同，需要实现点击不同要素显示对应不同的弹窗内容。

修改后的代码 #

HTML部分 #

<div id="map"></div>
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

JavaScript部分 #

var attribution = new ol.control.Attribution({
  collapsible: false
});
var map = new ol.Map({
  controls: ol.control.defaults({ attribution: false }).extend([attribution]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        //url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    //Center map to producing office address
    center: ol.proj.fromLonLat([-76, 45]),
    zoom: 2.75
  })
});

var CircleStyle = ol.style.Circle
var {Fill, Icon, Stroke, Style} = ol.style;
var styles = {
  'greenCircle': new Style({
    image: new CircleStyle({
      radius: 7,
      stroke: new Stroke({
        color: 'green',
        width: 5,
      }),
    }),
  }),
  'yellowCircle': new Style({
    image: new CircleStyle({
      radius: 7,
      stroke: new Stroke({
        color: 'yellow',
        width: 5,
      }),
    }),
  }),
  'redCircle': new Style({
    image: new CircleStyle({
      radius: 7,
      stroke: new Stroke({
        color: 'red',
        width: 5,
      }),
    }),
  }),
};

// 给每个要素添加名称和对应政策标识的自定义属性
var Can = new ol.Feature({
  type: 'greenCircle',
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-79, 44])),
  id: 1,
  name: '加拿大',
  policyId: 'Canada'
});
var Ger = new ol.Feature({
  type: 'yellowCircle',
  geometry: new ol.geom.Point(ol.proj.fromLonLat([13, 53])),
  id: 2,
  name: '德国',
  policyId: 'Germany'
});
var Chn = new ol.Feature({
  type: 'redCircle',
  geometry: new ol.geom.Point(ol.proj.fromLonLat([116, 40])),
  id: 3,
  name: '中国',
  policyId: 'China'
});
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [Can, Ger, Chn]
  }),
  style: function (feature) {
    return styles[feature.get('type')];
  }
});
map.addLayer(layer);

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});
map.addOverlay(overlay);

closer.onclick = function () {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

map.on('singleclick', function (event) {
  // 获取当前点击位置的要素
  var feature = map.forEachFeatureAtPixel(event.pixel, function(feature) {
    return feature;
  });
  if (feature) {
    var coordinate = event.coordinate;
    var name = feature.get('name');
    var policyId = feature.get('policyId');
    // 根据要素属性动态生成弹窗内容
    content.innerHTML = `<b style="color:black;">${name}:</b><br/><a href="program.html#${policyId}" style="color:blue;">政策详情</a><br/><a href="service.html" style="color:blue;">服务详情</a>`;
    overlay.setPosition(coordinate);
  } else {
    overlay.setPosition(undefined);
    closer.blur();
  }
});

关键修改点 #

• 给每个ol.Feature添加了name（显示名称）和policyId（政策链接标识）的自定义属性，用于区分不同要素的弹窗内容。
• 在singleclick事件处理中，使用map.forEachFeatureAtPixel方法获取当前点击的要素，替代原代码中仅判断是否存在要素的逻辑。
• 根据获取到的要素属性，动态拼接弹窗的HTML内容，实现不同要素显示不同弹窗的效果。

内容的提问来源于stack exchange，提问作者warrenjb