开放层读取.带有角度的 JSON

Question

我想从网址'geodat.geojson'读取并显示一个json文件。 问题是我可以使用OSM显示法线贴图，但不会读取和显示geoJSON文件。 有人可以帮助我吗？

initMap() {
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM({
attributions: []
})
}), new VectorLayer({
source: new VectorSource({
url: 'geodat.geojson',
format: new GeoJSON()
}),
style: new Style({
fill: new Fill({
color: 'rgba(255,255,5,0.8)'
}),
stroke: new Stroke({
color: 'rgba(255,255,255,0.8)'
})
})
})
], view: new View({
center: [0, 0],
zoom: 2
})

Answer 1

您需要指定 geojson 的相对路径，设置投影并根据要素类型设置要素样式。

var styles = {
'Point': new Style({
image: new Icon({
src: './marker.png'// should be in same directory
})
}),
'LineString': new Style({
fill: new Fill({
color: '#3985da'
}),
stroke: new Stroke({
color: '#3985da',
width: 2
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: '#ffcc33'
})
})
}),
'Polygon': new Style({
stroke: new Stroke({
color: '#3985da',
width: 2
}),
fill: new Fill({
color: 'rgba(57, 133, 218, 0.4)'
}),
})
};
var styleFunction = function (feature) {
return styles[feature.getGeometry().getType()];
};
initMap() {
this.map = new Map({
target: 'map',
projection: 'EPSG:4326',
layers: [
new TileLayer({
source: new OSM({
attributions: []
})
}), new VectorLayer({
source: new VectorSource({
url: './geodat.geojson',//if geojson is in same directory
format: new GeoJSON()
}),
style: styleFunction
})
], view: new View({
center: [0, 0],
zoom: 2
})

能够从Openlayers 6.1.1中的上述代码中获得所需的结果