[英]How can I plot Point type geometry in OpenLayers from a JSON file
我有一个网页,其中包含使用OpenLayers创建的MAP实例。 它应该通过点类型几何显示世界上所有的海峡。 数据(纬度,经度)以JSON格式提供。 我能够在地图上绘制一个Point并给它一个类似红点等的样式但是因为我在openlayers中很天真,所以我很安静无法找到一种方法来为JSON文件中的所有Point做同样的事情。 所以我的问题是我如何从地图上的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;
为此,您需要使用ol.Feature()
并且还需要为您的json数据进行循环。
DEMO
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进行操作
我明白了,我错过了使用style
课
text : new ol.style.Text({
font: '10px Verdana',
text: item.preferredGazetteerName,
fill: new ol.style.Fill({
color: [64, 64, 64, 1]
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.