我正在尝试使用 TopoJSON 使用 Leaflet-Geoman 插件获得线条的拓扑移动。有一个方法叫topojson.mesh
返回表示给定拓扑中指定对象的网格的 GeoJSON MultiLineString 几何对象。这对于有效地在复杂对象中渲染笔触很有用，因为由多个特征共享的边缘仅被描边一次。如果未指定对象，则返回整个拓扑的网格。
感谢在这篇文章中的回答，我已经能够使用topojson.mesh. 由于 Leaflet-Geoman 支持 MultiLineString，我想到了可以使用 Leaflet-Geoman 编辑返回的网格，同时保持拓扑属性。
但是当我尝试完成它时，当我尝试使用 geoman 插件对其进行编辑时，返回的 MultiLineString 会分成两部分。我的问题是，它是否真的是从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>
数据.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
]
]
]
}
}
]
}