使用Leaflet显示横跨180度经线的GeoJSON

Question

我正在尝试展示一个跨越180度经线的geoJSON对象（在本例中是俄罗斯的轮廓）。目前，该对象显示为国家的一部分在地图的左侧，一部分在右侧：

看起来leaflet有一个解决方法，但似乎不起作用: https://github.com/Leaflet/Leaflet/issues/82。我也尝试添加coordsToLatLng函数，但似乎也无法使其正常工作。瓷砖图层有一个continuousWorld选项，我认为它不能与geoJSON对象一起使用。

这些数据在这里：https://dl.dropboxusercontent.com/u/12085570/RUS.json。该数据是从shapefile生成的，转换为geojson，最终转换为topojson。转换topojson时，我使用了--no-stitch-poles选项，这使得它在地图上“漂亮”地显示，意味着它不会将右侧的点连接到地图左侧。

有没有办法使其连续显示而不围绕子午线分割？

- Rob

Answer 1

我遇到了同样的问题，我的解决方案涉及利用以下几点： 1）Leaflet允许您将元素放置在180/-180经度以外。 2）跨越本初子午线的地理实体主要包含所有负或正经度坐标。

我的解决方案是使用递归函数来遍历geoJSON对象中的坐标数组，并在俄罗斯的情况下将负坐标值转换为等效的正值。例如，-175的值将被转换为185。

下面是我用来处理坐标数组的函数。我用它来处理东半球的位置 - 您需要修改转换以便与西半球的位置一起使用。

  antimeridian(elem: any) {
   if (Array.isArray(elem)) {
     for (var i = 0; i < elem.length; i++) {
       if (Array.isArray(elem[i][0])) {
         this.antimeridian(elem[i]);
       } else {
         if (elem[i][0] < 0) {
           elem[i][0] = 180 + (180 + elem[i][0]);
         }
       }
     }
   }
 };

- jcarapia

---

我完全同意。我没有看到其他的做法。我将船舶航线从温哥华到日本进行映射，所以采用相反的方式：将经度在140E到180E范围内变为负数，而不是将负经度变为正数，但无论哪种方式都可以。 - Auspex

我在加载GeoJSON文件时该如何使用它？ - Giox

Answer 2

ReactJS解决方案

import React from "react";
import * as GeoJson from "./data/RUS_simple.json";

function Process180Meredian() {
  function download(content, fileName, contentType) {
    var a = document.createElement("a");
    var file = new Blob([content], { type: contentType });
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
  }

  function process(obj) {
    const coordinates = obj.features[0].geometry.coordinates;

    //loop through all coordinates and add 360 to all negative values
    for (let i = 0; i < coordinates.length; i++) {
      for (let j = 0; j < coordinates[i].length; j++) {
        for (let k = 0; k < coordinates[i][j].length; k++) {
          if (coordinates[i][j][k][0] < 0) {
            coordinates[i][j][k][0] += 360;
          }
        }
      }
    }

    //download the new file
    download(JSON.stringify(obj), "RUS_simple_processed.json", "text/plain");
  }

  return (
    <div>
      <button onClick={() => process(GeoJson)}>Process</button>
    </div>
  );
}

export default Process180Meredian;

之前

之后

- Mykola Tokariev