Openlayers中修改共享边/顶点的MultiPolygon时出现异常

问题描述 #

在OpenLayers中使用标准Modify交互编辑由多个子多边形组成的图形时，出现编辑行为不一致的问题：

• 拖拽部分共享顶点时，所有关联顶点能同步移动（符合预期），但部分顶点仅能移动部分关联顶点；
• 拖拽添加新线段时，有时无法同时修改两个子实体。

原因分析 #

当前代码中加载的是两个独立的Polygon Feature，而非一个完整的MultiPolygon类型Feature。OpenLayers的Modify交互仅会同步同一Feature内部的共享顶点，不同Feature之间即使坐标完全相同的顶点，也会被视为独立顶点，无法自动同步编辑操作。

解决方案 #

将两个Polygon合并为一个MultiPolygon类型的Feature，让所有子多边形属于同一几何对象，这样Modify交互就能正确识别并同步所有共享顶点的编辑行为。

修正后的代码 #

JavaScript #

var multiPolygon = {
  "type": "Feature",
  "properties": {
    "id": "multi-1"
  },
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      // 第一个子多边形
      [
        [
          1193836.0495014254,
          8383930.129123866
        ],
        [
          1193847.7380479588,
          8383914.044627354
        ],
        [
          1193861.7086440534,
          8383894.250081073
        ],
        [
          1193873.9649199897,
          8383877.232589948
        ],
        [
          1193883.717211206,
          8383863.628916129
        ],
        [
          1193894.5047360454,
          8383944.666907605
        ],
        [
          1193881.5012495161,
          8383963.164657038
        ],
        [
          1193860.4841296545,
          8383947.813224077
        ],
        [
          1193843.674886545,
          8383935.594306091
        ],
        [
          1193836.0495014254,
          8383930.129123866
        ]
      ],
      // 第二个子多边形
      [
        [
          1193883.717211206,
          8383863.628916128
        ],
        [
          1193889.0153151448,
          8383856.238480768
        ],
        [
          1193890.5403921688,
          8383857.260414857
        ],
        [
          1193909.1752749276,
          8383870.745514915
        ],
        [
          1193929.301838863,
          8383884.8526888145
        ],
        [
          1193934.6451744211,
          8383888.740497403
        ],
        [
          1193929.168255474,
          8383896.316176012
        ],
        [
          1193903.787411573,
          8383931.462094758
        ],
        [
          1193894.5047360454,
          8383944.666907605
        ],
        [
          1193883.717211206,
          8383863.628916128
        ]
      ]
    ]
  }
}

const styleFunction = () => {
  const style = [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0,0,255,0.4)',
        width: 2,
      }),
      fill: new ol.style.Fill({
        color: `rgba(0,0,255,0.2)`,
      }),
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 3,
        fill: new ol.style.Fill({
          color: 'rgba(0,0,255,0.4)',
        }),
      }),
      geometry: function(feature) {
        // 获取所有子多边形的顶点
        const coordinates = [];
        feature.getGeometry().getPolygons().forEach(polygon => {
          coordinates.push(...polygon.getCoordinates()[0]);
        });
        return new ol.geom.MultiPoint(coordinates);
      },
    }),
  ];
  return style;
};

var multiPolygonFeatures = new ol.format.GeoJSON().readFeatures(multiPolygon);
var vectorSource = new ol.source.Vector({
  features: multiPolygonFeatures,
});

var viewCenter = [1193887, 8383870];
var view = new ol.View({
  projection: 'EPSG:3857',
  center: viewCenter,
  zoom: 18,
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction
    })
  ],
  target: 'map',
  view: view,
});


const modify = new ol.interaction.Modify({
  source: vectorSource
});
map.addInteraction(modify);

CSS #

html,
body,
.map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.ol-dragbox {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(100, 150, 0, 1);
}

HTML #

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<div id="map" class="map"></div>

内容的提问来源于stack exchange，提问作者hansmei