如何从 JSON 文件在 OpenLayers 中绘制点类型几何图形

Question

我有一个网页，其中包含一个使用 OpenLayers 创建的 MAP 实例。它应该以点类型几何显示世界上所有的海峡。数据（纬度、经度）以 JSON 格式提供。我能够在地图上绘制一个点并给它一个 Style 像红点等。但是由于我在 openlayers 中很天真，所以我安静地想不出一种方法来做同样的事情对于 JSON 文件中的所有点。所以我的问题是如何在地图上绘制 JSON 文件中的所有点并为它们提供一些样式，例如着色并在 JSON 数据的点旁边显示名称。我正在使用 OpenLayers 5.1.3 和 jQuery 2.3，我的代码

<body> 
<div id="map" class="map"></div>

<script type="text/javascript">
     var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

    var vectorSource = new ol.source.Vector({
                wrapX: false
            });

    function styleFunction(feature) { 
                var geometry = feature.getGeometry();
                console.log(feature);

                var styles = [
                    new ol.style.Style({   
                        image: new ol.style.Circle({
                            radius: 3,
                            stroke: new ol.style.Stroke({
                                color: [180, 0, 0, 1]
                            }),
                            fill: new ol.style.Fill({
                                color: [180, 0, 0, 0.3]
                            })
                        })
                    })
                ];
               return styles;
    }

     var vectorPoints = new ol.layer.Vector({
                source: vectorSource,
                style: styleFunction
            });
     const map = new ol.Map({
            layers: [raster,vectorPoints],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
     });
</script>
</body>

和 json 数据

[{
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 67.259166666667,
    "longitude": 26.082222222222,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 280000,
    "preferredGazetteerName": "Denmark Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  },
  {
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 55.31,
    "longitude": 14.49,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 35000,
    "preferredGazetteerName": "Bornholm Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  }]

如何沿标记

显示 preferredGazetteerName

var features = data.map(item => { //iterate through array...
        let longitude = item.longitude,
            latitude = item.latitude,
            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                    'EPSG:3857')),
                name: item.preferredGazetteerName

            }),
iconStyle = new ol.style.Style({
                image: new ol.style.Icon ({
                    anchor: [0.3, 10],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
                }),
                text: new ol.style.text({
                    text: "sample"
                })
            });
iconFeature.setStyle(iconStyle);
        return iconFeature;

Answer 1

为此你需要使用 ol.Feature() 并且还需要为你的 json 数据做循环。

演示

var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
    }),

    vectorSource = new ol.source.Vector({
        wrapX: false
    }),

    json = [{
        "gazetteerSource": "ASFA thesaurus",
        "placeType": "Strait",
        "latitude": 67.259166666667,
        "longitude": 26.082222222222,
        "minLatitude": null,
        "minLongitude": null,
        "maxLatitude": null,
        "maxLongitude": null,
        "precision": 280000,
        "preferredGazetteerName": "Denmark Strait",
        "preferredGazetteerNameLang": "English",
        "status": "standard"
    }, {
        "gazetteerSource": "ASFA thesaurus",
        "placeType": "Strait",
        "latitude": 55.31,
        "longitude": 14.49,
        "minLatitude": null,
        "minLongitude": null,
        "maxLatitude": null,
        "maxLongitude": null,
        "precision": 35000,
        "preferredGazetteerName": "Bornholm Strait",
        "preferredGazetteerNameLang": "English",
        "status": "standard"
    }],


    /**
     * Elements that make up the popup.
     */
    container = document.getElementById('popup'),
    content = document.getElementById('popup-content'),
    closer = document.getElementById('popup-closer'),

    /**
     * Create an overlay to anchor the popup to the map.
     */
    overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });

/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
closer.onclick = function() {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
};

function styleFunction(feature) {
    var geometry = feature.getGeometry();
    console.log(feature);

    var styles = [
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 3,
                stroke: new ol.style.Stroke({
                    color: [180, 0, 0, 1]
                }),
                fill: new ol.style.Fill({
                    color: [180, 0, 0, 0.3]
                })
            })
        })
    ];
    return styles;
}

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

const map = new ol.Map({
    layers: [raster, vectorPoints],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 1
    }),

    overlays: [overlay]
});




/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
    let f = map.forEachFeatureAtPixel(
        evt.pixel,
        function(ft, layer) {
            return ft;
        }
    );

    if (f && f.get('type') == 'click') {
        let coordinate = evt.coordinate;

        content.innerHTML = '<p>You clicked here:</p><code>' + f.get('desc');
        overlay.setPosition(coordinate);
    }
});


function addMarker(data) {

    var features = data.map(item => { //iterate through array...
        let longitude = item.longitude,
            latitude = item.latitude,
            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                    'EPSG:3857')),

                type: 'click',
                desc: item.preferredGazetteerName,
            }),
            iconStyle = new ol.style.Style({
                image: new ol.style.Icon( /** @type {module:ol/style/Icon~Options} */ ({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
                })),
                text: new ol.style.Text({
                    text: item.preferredGazetteerName
                })
            });

        iconFeature.setStyle(iconStyle);
        return iconFeature;
    });

    var vectorSource = new ol.source.Vector({
        features: features //add an array of features
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

}

addMarker(json);

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet" />

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

<div id="map" class="map"></div>

<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

要在单击标记时显示弹出窗口，请遵循此 popup.html

Answer 2

我明白了，我缺少使用 style class

   text : new ol.style.Text({
                        font: '10px Verdana',
                        text: item.preferredGazetteerName,
                        fill: new ol.style.Fill({
                            color: [64, 64, 64, 1]
                        })
                    })

如何从 JSON 文件在 OpenLayers 中绘制点类型几何图形

How can I plot Point type geometry in OpenLayers from a JSON file

javascript

openlayers

openlayers-3

openlayers-5