Saya memiliki file GeoJSON bernama mygeojson.json dan saya ingin menambahkannya sebagai layer di OpenLayers 3 di atas layer openstreetmap. Sejauh ini saya bisa menampilkan dunia openstreetmap termasuk zoom dll. Tetapi untuk beberapa alasan saya tidak bisa mendapatkan mygeojson.json di atasnya.
Geojson mengandung banyak poligon dan terlihat seperti ini:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "DN": 2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 13.559093915055664, 52.545214330050563 ], [ 13.559633429050496, 52.545205649772548 ], [ 13.559633415380715, 52.545214636296755 ], [ 13.559093915055664, 52.545214330050563 ] ] ] } }
]
}
main.html saya:
<!doctype html>
<html lang="en">
<head>
<link rel='stylesheet' href='http://ol3js.org/en/master/css/ol.css'>
<style>
#map {
height: 100%;
width: 100%;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'added Layer',
source: new ol.source.GeoJSON({
projection : 'EPSG:4326',
url: 'mygeojson.json'
})
})
],
view: new ol.View({
center:[52.5243700 , 13.4105300],
zoom:2
})
});
</script>
</body>
</html>
Saya juga mencoba menghapus info proyeksi tetapi tidak digunakan.
sumber
FYI ... Saya percaya ini telah berubah untuk OL3 V3.5.0, jadi jawaban gcarrillo adalah:
Anda dapat melihat perubahannya di sini: https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350
sumber
OpenLayers Vector API berubah banyak. Saya punya sampel yang berfungsi dengan OpenLayers 3.16.0.
Penting bahwa Anda harus mendefinisikan
featureProjection: 'EPSG:3857'
dalam opsireadFeatures
seperti ini:Referensi dapat ditemukan di https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350
Contoh:
Catatan: styleFunction
sumber