Thêm lớp GeoJSON vào OpenLayers 3

9

Tôi có một tệp GeoJSON được gọi là mygeojson.json và tôi muốn thêm nó dưới dạng một lớp trong OpenLayers 3 trên đầu một lớp openstreetmap. Cho đến nay tôi có thể hiển thị thế giới openstreetmap bao gồm thu phóng, v.v. nhưng vì một số lý do tôi không thể có được mygeojson.json trên đó.

Geojson chứa nhiều đa giác và trông như thế này:

{
"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 ] ] ] } }
]
}

chính của tôi.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>

Tôi cũng đã cố gắng loại bỏ thông tin chiếu nhưng không sử dụng.

— Selphiron
nguồn

8

Khi bạn xác định nguồn vectơ của mình, hãy đặt cài đặt chiếu chỉ vào hệ quy chiếu tọa độ đích (xem tài liệu ):

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

Nhìn vào ví dụ này (sử dụng dữ liệu mẫu của bạn): http://jsfiddle.net/zzahmbff/4/

Có lẽ tài nguyên này có thể giúp bạn xem các cách khác nhau để tải dữ liệu vectơ: http://acanimal.github.io/thebookofopenlayers3/ch CHƯƠNG03_03_vector_source.html

— Đức
nguồn

cảm ơn, nó đã làm việc Tôi vẫn sẽ phải làm điều đó nếu mygeojson.json ở trong EPSG: 3857 chứ?

— Selphiron

1

Tôi không nghĩ vậy.

— Germán Carrillo

1

Cú pháp đã thay đổi, xem câu trả lời @sevenboarder.

— jjmontes

16

FYI ... Tôi tin rằng điều này đã thay đổi cho OL3 V3.5.0, vì vậy câu trả lời của gcarrillo sẽ là:

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

Bạn có thể xem các thay đổi tại đây: https://github.com/openlayers/ol3/blob/master/changelog/upTHER-notes.md#v350

— bảy ván
nguồn

7

API Vector OpenLayers đang thay đổi rất nhiều. Tôi có một mẫu làm việc với OpenLayers 3.16.0.

Điều quan trọng là bạn phải xác định featureProjection: 'EPSG:3857'trong các tùy chọn readFeaturesnhư thế này:

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

Có thể tìm thấy tài liệu tham khảo tại https://github.com/openlayers/ol3/blob/master/changelog/upTHER-notes.md#v350

Thí dụ:

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

Lưu ý: kiểu chức năng

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
nguồn