在 Openlayers 中跨日期线包装 Geojson 数据答案

【问题标题】：Wrapping Geojson data across date line in Openlayers在 Openlayers 中跨日期线包装 Geojson 数据
【发布时间】：2020-03-21 21:28:50
【问题描述】：

我正在使用 OpenLayers 使用 USGS 数据集绘制地震地图：

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson

我正在添加图层并像这样配置视图：

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new ImageLayer({
      opacity: 0.3,
      source: raster
    }),
    new WebGLPointsLayer({
      source: new VectorSource({
        url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
        format: new GeoJSON(),
        attributions: 'USGS'
      })
    })
  ],
  view: new View({
    center: fromLonLat([103.8198, 1.3521]),
    zoom: 1
  })
});

我的视图设置为在缩放级别 1 时，日期线包含在范围内。 USGS 数据不会呈现在日期线的右侧。我知道这是因为 VectorSource 的默认范围是 [-180, -90, 180, 90]。我的问题是，如何将该范围更改为地图视图的范围，以便数据呈现在日期线的另一侧？

似乎最好的方法是截取 USGS 数据的坐标并对 lon 坐标进行转换，可能通过 ol/proj.transform 或 ol/proj.transformExtent，但我一直无法找到 openlayers 数据包含坐标的对象，也不包含对其应用地图或变换的方式。

【问题讨论】：

标签： openlayers openlayers-6

【解决方案1】：

向量层使用以格林威治子午线为中心的 EPSG:3857 除非指定的视图投影

您可以尝试定义一个以日期线为中心的球形墨卡托

proj4.defs('sphmerc180', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=180.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs');
register(proj4);

var sphmerc180 = getProjection('sphmerc180');
sphmerc180.setExtent(getProjection('EPSG:3857').getExtent());
sphmerc180.setGlobal(true);

然后将其用作视图投影

  view: new View({
    projection: sphmerc180,
    center: fromLonLat([103.8198, 1.3521], sphmerc180),
    zoom: 1
  })

【讨论】：

这感觉像是在朝着正确的方向发展。数据现在在整个视图中进行，但现在整个地图是原始大小的 1/4，并且视图不再以 [103.8198, 1.3521] 为中心。它以日期线为中心。
设置投影范围以匹配 EPSG:3857 应该可以解决这个问题。
现在底图很好地居中在我开始时的正确位置，但数据呈现在 [0, 360] 之间，即从本初子午线到本初子午线。
如果我将 +lon_0=180.0 调整为 +lon_0=103.8198，数据会对齐，但也许现在我要走很长的路才能找到解决方案。
您可以在任何经度上将投影居中，但目前您只能在该投影的一个世界内使用 WebGL 进行渲染（与 VectorLayer 不同，源的 wrapX 设置无效）。在支持之前，我认为投影更改是最好的解决方法，尽管如果您还使用矢量图块，这将是一个问题，因为为一种投影设计的矢量图块不适用于另一种投影。