Как получить GeoJSON в OpenLayers? - PullRequest
Новая
       25

Как получить GeoJSON в OpenLayers?

0 голосов
/ 07 мая 2018

Я уже пытался добавить в свой код следующую функцию и новый векторный слой. Я загрузил файл GeoJSON в свою учетную запись BPlaced, чтобы связать файл в моем коде, верно? Geojson имеет ту же систему координат, что и веб-сайт. Также кажется, что код работает, но я не вижу Geojson.

Или есть другой способ встроить GeoJSON в OpenLayers?

Вот мой код: 

var vectorLayerJSON = new ol.layer.Vector({
  source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: 'http://kristinab.bplaced.net/ALDI_LIDL_Buffer_KBS_3857.geojson'
  }),
  style: new ol.style.Style({
    image: new ol.style.Circle(({
      radius: 20,
      fill: new ol.style.Fill({
        color: '#ffff00'
      })
    }))
  })
});

1 Ответ

0 голосов
/ 07 мая 2018

добро пожаловать в SO:)

Я считаю, что есть несколько способов добавить данные векторов (геоджон) для отображения

1) загрузка векторов с помощью URL-адреса файла геоджон: 

var vectorLayerJSON_1 = new ol.source.Vector({
   projection : 'EPSG:3857',
   url: 'myFolder/yourFile_1.geojson',
   format: new ol.format.GeoJSON()
});

2) создание векторного слоя из объекта geojson 

  var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [0, 0]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [[456, -256], [816, 226]]
          }...

var vectorLayerJSON_2 = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
      });

Более подробный пример на странице примера OpenLayer 3 Пример Geojson

3) чтение векторных объектов изajax 

    var vectorLayerJSON_3 = new ol.layer.Vector({
    renderMode: 'image',
    source: new ol.source.Vector({
        loader: function() {
            $.ajax({
                type: 'GET',
                url: 'myFolder/yourFile_2.geojson',
                context: this
            }).done(function(data) {
                var format = new ol.format.GeoJSON();
                this.addFeatures(format.readFeatures(data));
            });
        }
    }),
    style: myDefinedStyle 
});


 var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
                            source: new ol.source.OSM()
                        }),
                        vectorLayerJSON_1,
                        vectorLayerJSON_2,
                        vectorLayerJSON_3  
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

Надеюсь, это поможет:)

...