[英]geoJson object not drawing with open layers
我有一個代碼筆演示了這個問題: https://codepen.io/ericg_off/pen/OJvqZMx
我可以得到這個 geojson object 來繪制 leaflet - https://codepen.io/ericg_off/pen/OJvqEdL
我正在使用 v6.15.1。
我相信解決方案將涉及 OpenLayers 的投影功能。
我需要更改什么以便 geojson object 將繪制?
HTML:
<div id="map"></div>
CSS:
#map {
height: 512px;
width: 1024px;
}
JS:
const kuwait = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
// lat/lon order
// [47.974519077349896, 29.9758192001485],
// [48.18318851094448, 29.534476630159766],
// [48.09394331237642, 29.306299343375002],
// [48.416094191283946, 28.55200429942667],
// [47.708850538937384, 28.526062730416143],
// [47.45982181172283, 29.002519436147224],
// [46.568713413281756, 29.09902517345229],
// [47.30262210469096, 30.05906993257072],
// [47.974519077349896, 29.9758192001485]
// lon/lat order
[47.974519077349896, 29.9758192001485],
[48.18318851094448, 29.534476630159766],
[48.09394331237642, 29.306299343375002],
[48.416094191283946, 28.55200429942667],
[47.708850538937384, 28.526062730416143],
[47.45982181172283, 29.002519436147224],
[46.568713413281756, 29.09902517345229],
[47.30262210469096, 30.05906993257072],
[47.974519077349896, 29.9758192001485]
]
]
}
}
]
};
const styles = {
Polygon: new ol.style.Style({
stroke: new ol.style.Stroke({
color: "blue",
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: "rgba(0, 0, 255, 0.1)"
})
})
};
const styleFunction = function (feature) {
const featureType = feature.getGeometry().getType();
return styles[featureType];
};
const vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(kuwait)
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
const map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
解析 GeoJSON 時,您需要指定要在其中查看要素的投影
features: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'}).readFeatures(kuwait)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.