消除多边形州/国家/地区共享边界的重复数据

问题描述

我正在使用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

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

推荐答案

听起来像是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多线串...

topojson.mesh(topo);

...并创建另一个L.GeoJSON实例来绘制所述多行字符串。根据您的喜好设置线条样式(包括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如预期的那样，不包含重叠的虚线：

---

使用Topo JSON是一种可能的方法。还有其他可能的方法(例如，预先生成仅具有边界的多线串GeoJSON文件，使用不同的工具等)；但在数据集上使用拓扑规则的想法是相同的。

这篇关于消除多边形州/国家/地区共享边界的重复数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！