来自geoj​​son的Openlayers 3圈子不适用于不同于TileWMS的图层图块源

Question

我正在使用带有来自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
    })
});

结果

有没有办法使这项工作？ 提前致谢。

Answer 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'
});