单击时缩放到标记位置 -OpenLayers答案

【问题标题】：Zoom to Marker location on click -OpenLayers单击时缩放到标记位置 -OpenLayers
【发布时间】：2020-09-02 07:05:12
【问题描述】：

我正在地图上显示来自 geojson 文件的标记。在当前代码中，我可以在地图上添加标记。我想在单击标记时添加飞行或放大标记的确切位置。如何使用 OpenLayers 来实现。

var cityMarker = new ol.layer.Vector({
  source: new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      url: "data/cities.js"
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            scale:0.03,
            src: "icons/red-circle.png"
          })
      })  
});
map.addLayer(cityMarker);

【问题讨论】：

标签： onclick zooming openlayers geojson marker

【解决方案1】：

将singleclick事件绑定到地图

map.on('singleclick', event => {
 // get the feature you clicked
 const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => {
  return feature
 })
 if(feature instanceof ol.Feature){
   // Fit the feature geometry or extent based on the given map
   map.getView().fit(feature.getGeometry())
   // map.getView().fit(feature.getGeometry().getExtent())
 }
})

为您提供单独的 HTML 文件！

<!DOCTYPE html>
<html>
  <head>
    <title>GeoJSON</title>
    <link
      rel="stylesheet"
      href="https://openlayers.org/en/v4.6.5/css/ol.css"
      type="text/css"
    />
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var image = new ol.style.Circle({
        radius: 5,
        fill: null,
        stroke: new ol.style.Stroke({ color: "red", width: 1 }),
      });

      var styles = {
        Point: new ol.style.Style({
          image: image,
        }),
      };

      var styleFunction = function (feature) {
        return styles[feature.getGeometry().getType()];
      };

      var geojsonObject = {
        type: "FeatureCollection",
        crs: {
          type: "name",
          properties: {
            name: "EPSG:3857",
          },
        },
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [0, 0],
            },
          },
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [13369643, 3572500],
            },
          },
        ],
      };

      var vectorSource = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(geojsonObject),
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction,
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
          }),
          vectorLayer,
        ],
        target: "map",
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false,
          },
        }),
        view: new ol.View({
          center: [0, 0],
          zoom: 2,
        }),
      });
      map.on("singleclick", (event) => {
        // get the feature you clicked
        const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => {
          return feature;
        });
        if (feature instanceof ol.Feature) {
          // Fit the feature geometry or extent based on the given map
          map.getView().fit(feature.getGeometry());
          // map.getView().fit(feature.getGeometry().getExtent())
        }
      });
    </script>
  </body>
</html>

【讨论】：

我可以将单击事件绑定到标记而不是地图吗？
您能否举个例子，因为我尝试绑定到标记并使用您上面的代码，但仍然无法获得点击事件。
对不起！之前的代码有问题，我已经修改了。
谢谢你这确实有效，但我正在寻找标记点击事件。
特征也可以绑定单击事件，先获取特征：const features = cityMarker.getSource().getFeatures()