Início / user-3692806

hansmei's questions

Martin Hope
hansmei
Asked: 2023-09-17 04:25:29 +0800 CST
  • 5

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: Comportamento desejado

Para outros locais, ele arrastará apenas alguns, mas não todos os vértices: Mau comportamento

Ele não modificará (sempre, mas às vezes) ambas as subentidades ao arrastar para adicionar novos segmentos: Inserindo novos vértices

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>

openlayers