Espero poder modificar um MultiPolygon em Openlayers que consiste em vários subpolígonos. Ativei a interação Modificar padrão e arrastar ambos os vértices e criar novos segmentos de linha ao arrastar a linha funciona bem. No entanto, parece que é inconsistente quando se trata da operação de edição.
O comportamento é muito inconsciente. Para alguns vértices, ele arrastará todos os vértices conectados (comportamento desejado) assim:
Para outros locais, ele arrastará apenas alguns, mas não todos os vértices:
Ele não modificará (sempre, mas às vezes) ambas as subentidades ao arrastar para adicionar novos segmentos:
Este é o código para reproduzir o comportamento inesperado:
var multiPolygon = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": "1.1"
},
"geometry": {
"type": "Polygon",
"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
]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "2.1"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
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) {
// return the coordinates of the first ring of the polygon
const type = feature.getGeometry().getType();
let coordinates;
if (type === 'Polygon') {
coordinates = feature.getGeometry().getCoordinates()[0];
} else if (type === 'MultiPolygon') {
const coordArray = feature.getGeometry().getCoordinates();
coordinates = [];
coordArray.forEach((ring) => {
coordinates.push(...ring[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);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);
}<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>
Após inspeção detalhada dos dados brutos (os dados do polígono), cheguei à conclusão de que a interação de modificação exige que os vértices do polígono compartilhem exatamente a mesma coordenada (até a décima casa decimal) para acionar a edição compartilhada . Eu acreditava que o encaixe detectaria diferenças tão pequenas. Aparentemente eu estava errado nessa suposição.
No meu código acima, aqueles vértices que não trabalhavam com edição compartilhada tinham o último dígito diferente.
Alterando a forma como a fonte (o GeoJSON) é gerada e adicionando alguns arredondamentos a ela, funciona conforme desejado.
Apenas uma das coordenadas correspondia exatamente entre os dois polígonos, a outra diferia no último dígito.
A interação Modificar atualizará uma coordenada de cada geometria na mesma posição. (Havia um bug nas versões mais antigas do OpenLayers onde múltiplas coordenadas da mesma geometria eram modificadas quando eram iguais. Nesse caso, você pode querer usar a versão mais recente.)
Aqui está o exemplo atualizado: