来自geojson的Openlayers 3个圆圈不适用于不同于TileWMS的图层平铺源答案

【问题标题】：Openlayers 3 circles from geojson not working with layer tile source different from TileWMS来自geojson的Openlayers 3个圆圈不适用于不同于TileWMS的图层平铺源
【发布时间】：2014-12-12 10:06:11
【问题描述】：

我正在使用带有 mapbox 或 openstreetmap 图层的 openlayers 3，我需要在其上绘制一些圆圈。

我可以打印带有投影 EPSG:4326 的视图的圆圈，但是我没有地图。使用变换更改投影会显示地图，但点都在一起。我让它工作的唯一方法是使用 TileWMS 作为源，但我无法在生产环境中使用它

这是我的代码：

版本 1：使用 TileWMS

  var source = new ol.source.GeoJSON({
    url: 'geojson url'
  });
  var pointsLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 15,
            fill: new ol.style.Fill({color: 'rgba(170,33,33, 0.8)'}),
            stroke: new ol.style.Stroke({color: 'rgba(170,33,33, 0.3)', width: 8})
          })
        })
      });

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
              title: "Global Imagery",
              source: new ol.source.TileWMS({
                url: 'http://maps.opengeo.org/geowebcache/service/wms',
                params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
              })
        }),
        pointsSource
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-82.3, -10.65],
      zoom: 3
    })
});

这是结果

使用mapbox或osm，失败：

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
                    })
                }),
        /*
          new ol.layer.Tile({
          source: new ol.source.OSM()
        }),*/
        pointsSource
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-82.3, -10.65],
      zoom: 3
    })
});

这是结果

最后，改变视图显示地图，但圆圈

  var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
                    })
                }),
        /*
          new ol.layer.Tile({
          source: new ol.source.OSM()
        }),*/
        pointsSource
    ],
    view: new ol.View({
      center: ol.proj.transform([-82.3, -10.65], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3
    })
});

结果

有没有办法让它工作？提前致谢。

【问题讨论】：

标签： javascript openlayers-3 map-projections

【解决方案1】：

我找到了解决方案，这是因为它可以帮助任何人

在 gis stackexchange https://gis.stackexchange.com/a/118818/42868 中遵循这个答案 ol.source.GeoJSON 对象有一个不稳定的选项，因此以这种方式添加它使其工作

var source = new ol.source.GeoJSON({
    url: 'geojson url',
    projection: 'EPSG:3857'
});

【讨论】：