Tambahkan layer GeoJSON ke OpenLayers 3

9

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.

— Selphiron
sumber

8

Saat Anda menentukan sumber vektor Anda, letakkan pengaturan proyeksi yang menunjuk ke sistem referensi koordinat target (lihat dokumen ):

new ol.layer.Vector({
      title: 'added Layer',
      source: new ol.source.GeoJSON({
         projection : 'EPSG:3857',
         url: 'mygeojson.json'
      })
  })

Lihat contoh ini (menggunakan data sampel Anda): http://jsfiddle.net/zzahmbff/4/

Mungkin sumber daya ini dapat membantu Anda melihat berbagai cara untuk memuat data vektor: http://acanimal.github.io/thebookofopenlayers3/chapter03_03_vector_source.html

— Germán Carrillo
sumber

terima kasih, itu berhasil! Apakah saya masih harus melakukan itu jika mygeojson.json ada di EPSG: 3857?

— Selphiron

1

Saya kira tidak.

— Germán Carrillo

1

Sintaks telah berubah, lihat jawaban @sevenboarder.

— jjmontes

16

FYI ... Saya percaya ini telah berubah untuk OL3 V3.5.0, jadi jawaban gcarrillo adalah:

new ol.layer.Vector({
      title: 'added Layer',
      source: new ol.source.Vector({
         url: 'mygeojson.json',
         format: new ol.format.GeoJSON()
      })
  })

Anda dapat melihat perubahannya di sini: https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350

— Sevenboarder
sumber

7

OpenLayers Vector API berubah banyak. Saya punya sampel yang berfungsi dengan OpenLayers 3.16.0.

Penting bahwa Anda harus mendefinisikan featureProjection: 'EPSG:3857'dalam opsi readFeaturesseperti ini:

.readFeatures(_geojson_object, { featureProjection: 'EPSG:3857' })

Referensi dapat ditemukan di https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350

Contoh:

_geojson_vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(_geojson_object, { featureProjection: 'EPSG:3857' })
});

_geojson_vectorLayer = new ol.layer.Vector({
  source: _geojson_vectorSource,
  style: styleFunction
});

map.addLayer(_geojson_vectorLayer);

Catatan: styleFunction

var image = new ol.style.Circle({
  radius: 5,
  fill: null,
  stroke: new ol.style.Stroke({ color: 'red', width: 1 })
});

var styles = {
  'Point': new ol.style.Style({
    image: image
  }),
  'LineString': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 1
    })
  }),
  'MultiLineString': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 1
    })
  }),
  'MultiPoint': new ol.style.Style({
    image: image
  }),
  'MultiPolygon': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 0, 0.1)'
    })
  }),
  '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)'
    })
  }),
  'GeometryCollection': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'magenta',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'magenta'
    }),
    image: new ol.style.Circle({
      radius: 10,
      fill: null,
      stroke: new ol.style.Stroke({
        color: 'magenta'
      })
    })
  }),
  'Circle': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.2)'
    })
  })
};

var styleFunction = function (feature) {
  return styles[feature.getGeometry().getType()];
};

— hoogw
sumber