GeoJSON katmanını OpenLayers 3'e ekleme

9

Mygeojson.json adında bir GeoJSON dosyası var ve bunu bir openstreetmap katmanının üstüne OpenLayers 3'te bir katman olarak eklemek istiyorum. Şimdiye kadar zoom vb. Dahil olmak üzere openstreetmap dünyasını görüntüleyebilirim, ancak nedense mygeojson.json'u bulamıyorum.

Geojson birçok çokgen içerir ve şöyle görünür:

{
"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:

<!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>

Ayrıca projeksiyon bilgilerini kaldırmayı denedim ama faydası olmadı.

— Selphiron
kaynak

8

Vektör kaynağınızı tanımlarken, projeksiyon ayarını hedef koordinat referans sistemine yönlendirin ( belgelere bakın ):

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

Bu örneğe bakın (örnek verilerinizi kullanarak): http://jsfiddle.net/zzahmbff/4/

Belki de bu kaynak vektör verilerini yüklemek için farklı yollar görmenize yardımcı olabilir: http://acanimal.github.io/thebookofopenlayers3/chapter03_03_vector_source.html

— Germán Carrillo
kaynak

teşekkürler, işe yaradı! Mygeojson.json EPSG: 3857'deyse yine de yapmam gerekir mi?

— Selphiron

1

Ben öyle düşünmüyorum.

— Germán Carrillo

1

Sözdizimi değişti, bkz. Sevenboarder cevabı.

— jjmontes

16

FYI ... Bunun OL3 V3.5.0 için değiştiğine inanıyorum, bu yüzden gcarrillo'nun cevabı şöyle olacaktır:

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

Değişiklikleri burada görebilirsiniz: https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350

— sevenboarder
kaynak

7

OpenLayers Vector API çok değişiyor. OpenLayers 3.16.0 ile çalışan bir örnek var.

Bunun gibi featureProjection: 'EPSG:3857'seçeneklerde tanımlamanız önemlidir readFeatures:

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

Referansa https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350 adresinden ulaşılabilir.

Misal:

_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);

Not: 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
kaynak