时间戳

首页 > 解决方案 > 如何将geojson点添加到地图

javascript - 如何将geojson点添加到地图

问题描述

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

geojson.features

但就我而言，当我打电话时，.features我会收到undefined. 请查看以下链接

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

在给定坐标的地图上绘制点与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]}

标签： javascriptangularopenlayersgeojson

解决方案

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

<!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>

推荐阅读