如何将GeoJSON放入OpenLayers? [英] How to get GeoJSON into OpenLayers?

问题描述

我已经尝试将以下函数和新的Vector Layer放入我的代码中.我将GeoJSON文件上传到我的BPlaced帐户中，以在代码中链接该文件，对吗?Geojson与网站具有相同的坐标系.代码似乎也可以工作，但我看不到任何Geojson.

I already tried to put the following function and new Vector Layer into my code. I uploaded the GeoJSON File into my BPlaced account to link the file in my code, is that right? The Geojson has the same Coordinate System as the website. Also the code seems to work but I don't see any of the Geojson.

或者还有另一种将GeoJSON嵌入OpenLayers的方法?

Or is there another way to embed GeoJSON into 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'
      })
    }))
  })
});

推荐答案

欢迎使用SO:)

我相信有几种方法可以添加向量(geojson)数据以映射到地图

I believe that there are several ways to add vectors (geojson) data to map

1)使用geojson文件url加载向量:

1) loading vectors using geojson file url:

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

2)从geojson对象生成矢量层

2) generating vector layer from geojson object

  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示例

More detailed example on OpenLayer 3 example page Geojson Example

3)从ajax读取矢量特征

3) reading vector features from 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
        })
      });

希望它会有所帮助:)

这篇关于如何将GeoJSON放入OpenLayers?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！