去重多边形州/国家共享边界

Question

我正在使用 GEOJSON 绘制带有传单的世界地图，并用虚线绘制边界，如下图所示。

我遇到的问题是，如果两个州共享边界，则两条线不会被两个州共享，而是为不同的状态分别绘制两条线。因此，当缩放足够多的线时，它们看起来很奇怪，因为它们相互重叠。如下图所示。

var GeoJsonLayer = L.geoJson();
var myStyle = {
                "color": "#fff",
                "weight": 0.8,
                "opacity": 1,
                "fillOpacity": "1",
                "fillColor": "#243E54"
            };
// here data.world contains GEOJson to draw whole map
            if (data.world) {
                GeoJsonLayer.options.className = "geojsonlayerpolygon";
                GeoJsonLayer.on("dblclick", function (ev) {
                    map.fireEvent("dblclick", ev);
                });
                GeoJsonLayer.addData(data.world);
                GeoJsonLayer.setStyle(myStyle);
            }

为了使它成为虚线，我在 CSS 下面使用

.geojsonlayerpolygon{
   stroke-dasharray: 6 4;
 }

我正在使用的 GEOJson 是 https://jsonblob.com/826f1a94-c1a3-11e9-a004-354d7c27cab2

如何确保共享时边界只有一行？

Answer 1

听起来像是TopoJSON 的工作。从它的自述文件中：

TopoJSON 是对拓扑进行编码的 GeoJSON 的扩展。 TopoJSON 文件中的几何不是离散地表示几何，而是从称为弧的共享线段缝合在一起。这种技术类似于 Matt Bloch 的 MapShaper 和 Arc/Info 导出格式 .e00。

TopoJSON 消除了冗余，允许将相关的几何图形有效地存储在同一个文件中。例如，加利福尼亚州和内华达州之间的共享边界仅表示一次，而不是两个州都重复。单个 TopoJSON 文件可以包含多个不重复的要素集合，例如州和县。或者，TopoJSON 文件可以有效地将多边形（用于填充）和边界（用于笔划）表示为共享相同弧形网格的两个特征集合。

所以，从加载 topojson 库开始...

<script src="https://unpkg.com/topojson@3"></script>

...然后为您的 GeoJSON 数据创建一个拓扑对象；请注意，TopoJSON 需要一组 GeoJSON 功能，例如我将通过fetch 加载包含自然地球国家边界的 GeoJSON FeatureCollection 并创建拓扑：

fetch("ne_110m_admin_0_countries.geojson")
.then(res=>res.json())
.then(json=>{

      var topo = topojson.topology([json]);

      /* ...more stuff here soon */

});

...然后添加一个仅填充多边形的L.GeoJSON 层，设置stroke 选项以避免在多边形的轮廓上绘制任何线条（记住path styling options can be passed to GeoJSON constructors）...

var layerFill = L.geoJson(json, { stroke: false }).addTo(map);

...计算拓扑的mesh，这将是一个 GeoJSON MultiLineString...

topojson.mesh(topo);

...并创建另一个L.GeoJSON 实例来绘制所述MultiLineString。随意设置线条样式（包括dashArray），例如...

var layerLines = L.geoJson(topojson.mesh(topo), { 
  fill: false, dashArray:[3, 6], weight: 2 
}).addTo(map);

最终结果 which you can see here as a working example 不包含重叠的虚线，正如预期的那样：

---

使用 TopoJSON 是一种可能的方法。还有其他可能的方法（例如，使用不同的工具等预先生成仅具有边界的 MultiLineString GeoJSON 文件）；但是在数据集上使用拓扑规则的想法是一样的。