单击-OpenLayers放大到标记位置

编程问答 2022-08-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);

解决方法

将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",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,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>
geojsonmarkeronclickopenlayerszoom