【问题标题】:Adding geojson layer to openlayers 3将geojson图层添加到openlayers 3
【发布时间】:2015-09-25 19:35:15
【问题描述】:

我已经经历了几个不同的例子,但似乎没有任何效果。我正在尝试使用 GeoJSON 作为源在地图上简单地绘制一个点。这是我目前拥有的:

var staticGeo = new ol.source.GeoJSON(({
    object: {
        type: 'Feature Collection',
        crs: {
           type: 'name',
           properties: {name: 'EPSG:4326'}
        },
        features: [{
           type: 'Feature',
           geometry: {
               type: 'Point',
               coordinates: [0,0]
           }
        }]
     },
     projection: 'EPSG:3857'
   }));

   var vectorSource = new ol.source.Vector({
       source: staticGeo
   });

   var vectorLayer = new ol.layer.Vector({
       source: vectorSource,
       style: new ol.style.Style({
           fill: new ol.style.Fill({
                color: 'rgba(255,255,255,0.2)'
           }),
           stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
           })
        })
     })

     this.map.addLayer(vectorLayer);

this.map 指的是正在工作的 ol.Map 对象。总体而言,这似乎需要很多代码来做一些看似微不足道的事情(也许我做错了什么?)。

【问题讨论】:

  • 可以使用最新的OL 3版本吗?
  • 使用 OL 3.4.0,如果我使用的是 3.9.0,这段代码应该可以工作吗? @乔纳塔斯沃克

标签: javascript geojson openlayers-3


【解决方案1】:

您将从OL 3.5.0 添加geojson,如下所示:

var geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
        'type': 'name',
        'properties': {
            'name': 'EPSG:4326'
        }
    },
    'features': [
        {
            'type': 'Feature',
            'geometry': {
                'type': 'Point',
                'coordinates': [21.54967, 38.70250]
            }
        }
    ]
};
var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
    featureProjection: 'EPSG:3857'
});
var vectorSource = new ol.source.Vector({
  features: features
});

注意投影坐标。

http://jsfiddle.net/jonataswalker/w5uuxhov/

【讨论】:

  • 这似乎仍然不适用于 3.4,但我将升级到 3.9 并希望最好。感谢您的帮助。
  • 3.4 及更低版本也不例外。不客气。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-24
  • 1970-01-01
相关资源
最近更新 更多