维护 MultiLineString 上的拓扑

Question

我正在尝试使用 TopoJSON 通过 Leaflet-Geoman 插件获得线的拓扑运动。有一个 method 叫做 topojson.mesh ，

Returns the GeoJSON MultiLineString geometry object representing the mesh for the specified object in the given topology. This is useful for rendering strokes in complicated objects efficiently, as edges that are shared by multiple features are only stroked once. If object is not specified, a mesh of the entire topology is returned.

感谢 post 中的回答，我已经能够 return 使用 topojson.mesh 的 MultiLineString。由于 Leaflet-Geoman 支持 MultiLineString 我想到了可能是 returned 网格可以在保持拓扑属性的同时使用 Leaflet-Geoman 进行编辑。

但是当我尝试完成它时，当我尝试使用 geoman 插件编辑它时，returned MultiLineString 被分成两部分。我的问题是它是否真的是 return 从 topojson.mesh 编辑的网格，为什么线条会分开？这是由 geoman 插件引起的吗？如果是这样，我该如何完成？有什么方法可以在保持拓扑结构的同时通过拖动来更改节点的位置？

我会在下面附上代码

<!DOCTYPE html>
<html>

<head>
    <title>Topology Test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/css/leaflet.css" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />

    <style>
        #mapdiv {
            height: 899px;
            background-color: #acd6e2;
        }
    </style>

</head>

<body>
    <div id="mapdiv"></div>
    <script src="https://unpkg.com/topojson@3"></script>
    <script src="src/js/leaflet-src.js"></script>
    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
    <script>
        var mymap = L.map('mapdiv', {
            layers: [
                new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
                })
            ],
        });

        mymap.pm.addControls({
            position: 'topleft',
            drawCircle: false,
        });


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

                //var layer = L.geoJSON(json).addTo(map);
                var topo = topojson.topology([json]);

                console.log(json, topo, topojson.mesh(topo));

                var layerLines = L.geoJson(topojson.mesh(topo), {
                    fill: false,
                }).addTo(mymap);


                mymap.fitBounds(layerLines.getBounds());

            });
    </script>


</body>

</html>

data.geojson

 {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -113,
              37
            ],
            [
              -113,
              40
            ],
            [
              -109,
              40
            ],
            [
              -109,
              37
            ],
            [
              -113,
              37
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -109,
              37
            ],
            [
              -109,
              39
            ],
            [
              -104,
              39
            ],
            [
              -104,
              37
            ],
            [
              -109,
              37
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -109,
              34
            ],
            [
              -109,
              37
            ],
            [
              -102,
              37
            ],
            [
              -102,
              34
            ],
            [
              -109,
              34
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -104,
              37
            ],
            [
              -104,
              40
            ],
            [
              -100,
              40
            ],
            [
              -100,
              37
            ],
            [
              -104,
              37
            ]
          ]
        ]
      }
    }
  ]
}

Answer 1

对于正在寻找此类问题答案的任何人，我找到了一种使用 OpenLayers v6.5.0 的方法。他们是Draw and Modify Features的例子，可以维护线和多边形的拓扑。

希望这对某些人有所帮助:)

维护 MultiLineString 上的拓扑

Maintaining the topology on a MultiLineString

topology

multilinestring

topojson

openlayers-6

leaflet-geoman