如何将 geojson 点添加到 map

Question

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

geojson.features

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

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

在 map 上绘制点给定与 openlayers 的坐标？

请让我知道如何正确地将 geojson 点添加到 map。

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

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

 <: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 点添加到 map

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-04 11:10:41

如何将 geojson 点添加到 map

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-04 11:10:41

解决方案1
1 已采纳 2021-06-04 11:10:41