如何将geojson点添加到地图

Question

我有一个点数组，所有点都是 Geojson 格式。我想知道如何将这些点添加到地图中。我参考了一些问题，一些使用了以下

geojson.features

但就我而言，当我调用 .features 时，我收到了 undefined。请参阅以下链接

https://gis.stackexchange.com/questions/282208/drawing-a-polygon-over-a-point-in-openlayers

请告诉我如何正确地将 geojson 点添加到地图。

geojson 点数组:

["{\"type\":\"Point\",\"coordinates\":[6.73648711211944,51.1144539430392]}", "{\"type\":\"Point\",\"coordinates\":[6.73628689838002,51.1141803601161]}", "{\"type\":\"Point\",\"coordinates\":[6.73648765865954,51.1141088970156]}", "{\"type\":\"Point\",\"coordinates\":[6.7368576747845,51.1141914104954]}", "{\"type\":\"Point\",\"coordinates\":[6.73641043458919,51.1141123530415]}", "{\"type\":\"Point\",\"coordinates\":[6.73655920234526,51.1144536412875]}", "{\"type\":\"Point\",\"coordinates\":[6.73614395402386,51.1142745754592]}", "{\"type\":\"Point\",\"coordinates\":[6.73642965248497,51.1141830888474]}", "{\"type\":\"Point\",\"coordinates\":[6.73641750225145,51.1144305273589]}", "{\"type\":\"Point\",\"coordinates\":[6.73671503777408,51.1141886499952]}", "{\"type\":\"Point\",\"coordinates\":[6.73671498356252,51.1141886122033]}", "{\"type\":\"Point\",\"coordinates\":[6.73657228945022,51.1141858496955]}", "{\"type\":\"Point\",\"coordinates\":[6.73655926013517,51.1144536295152]}", "{\"type\":\"Point\",\"coordinates\":[6.7364332915611,51.1141086186341]}", "{\"type\":\"Point\",\"coordinates\":[6.73642959244726,51.1141831229718]}", "{\"type\":\"Point\",\"coordinates\":[6.73688015139349,51.1142293782007]}

Answer 1

geojson 仅包含几何图形，因此您需要从数组中读取每个几何图形并创建一个可以显示在地图上的要素。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style>
    html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
      
      var geojsons = [
        "{\"type\":\"Point\",\"coordinates\":[6.73648711211944,51.1144539430392]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73628689838002,51.1141803601161]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73648765865954,51.1141088970156]}",
        "{\"type\":\"Point\",\"coordinates\":[6.7368576747845,51.1141914104954]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73641043458919,51.1141123530415]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73655920234526,51.1144536412875]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73614395402386,51.1142745754592]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73642965248497,51.1141830888474]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73641750225145,51.1144305273589]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73671503777408,51.1141886499952]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73671498356252,51.1141886122033]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73657228945022,51.1141858496955]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73655926013517,51.1144536295152]}",
        "{\"type\":\"Point\",\"coordinates\":[6.7364332915611,51.1141086186341]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73642959244726,51.1141831229718]}",
        "{\"type\":\"Point\",\"coordinates\":[6.73688015139349,51.1142293782007]}"
      ];

      var features = [];
      geojsons.forEach(function(geojson) {
        var geometry = new ol.format.GeoJSON().readGeometry(geojson, {
          dataProjection: 'EPSG:4326',
          featureProjection: map.getView().getProjection()
        });
        features.push(new ol.Feature(geometry));
      });

      var source = new ol.source.Vector({
        features: features
      });

      map.addLayer(new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
              color: 'red'
            }),
            stroke: new ol.style.Stroke({
              color: 'blue',
              width: 2
            })
          })
        })
      }));

      map.getView().fit(source.getExtent());
      map.getView().adjustZoom(-4);

    </script>
  </body>
</html>

如何将geojson点添加到地图

How to add geojson points to the map

javascript

openlayers

geojson

angular