javascript - 来自 geojson 的 Openlayers 3 圆不适用于与 TileWMS 不同的图层图 block 源

Question

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

我可以用投影 EPSG:4326 的 View 打印圆圈，但我没有 map 。通过变换更改投影， map 会显示，但点都在一起。我让它工作的唯一方法是使用 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
    })
});

这就是结果

最后，更改显示 map 的 View ，但显示圆圈

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