在 openlayers 中更改几何图形后如何选择特征？

Question

我正在尝试绘制一个矩形并增加它的大小以使其保持校正。可以选择和移动矩形的角。两个相邻的角会自动移动，多边形/矩形仍然被矫正。修改矩形后，它被正确绘制，但不再选择相邻的角。 如果鼠标位于角的旧位置，则可以选择并移动角

我正在使用修改交互，看起来如果正在更改特征的几何形状，交互无法识别它。我不确定如何更新交互功能。

我的出发点是这里的 * 代码：OpenLayers - lock rotation of box or rectangle geometry while modifying。

这是我的 React 组件的“游乐场”代码。我添加了所有代码，因为我不确定在地图初始化期间是否做错了什么：

import React, { useEffect, useState } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import LayerVector from 'ol/layer/Vector';
import Collection from 'ol/Collection';
import SourceVector from 'ol/source/Vector';
import OSM from 'ol/source/OSM'
import { fromLonLat} from 'ol/proj'

//Fancy CSS 
import 'ol/ol.css';

//Draw Box https://openlayers.org/en/latest/examples/draw-shapes.html?q=poly
import Draw, { createBox } from 'ol/interaction/Draw';
import { Modify } from 'ol/interaction'
import { never } from 'ol/events/condition';


function Map() {

  const mapsize = {
    height: '10%vp',
    width: '100%',
  };

  var old_coords;

  useEffect(() => {

    var collection = new Collection();
    var source = new SourceVector({
      feature: collection
      // wrapX: false
    });

    //default OpenStreetMap layer
    var raster = new TileLayer({ source: new OSM() });

    //drawing Rectangle
    var draw = new Draw({
      source: source,
      type: 'Circle',
      geometryFunction: createBox()
    });
    draw.on("drawend", function (e) {
      draw.setActive(false);
      old_coords = e.feature.getGeometry().getCoordinates()[0];
    });

    // create feature layer and vector source
    var layerVector = new LayerVector({
      source: source,
    });

    // create map object with feature layer
    var map = new Map({
      target: 'map',
      layers: [raster, layerVector],
      view: new View({
        center: fromLonLat([-0.164794921875, 51.481382896100996]),
        zoom: 13,
      })
    });


    // Only the corner can be modified
    var modify = new Modify({
      source: source,
      insertVertexCondition: never,
    });
    modify.on('modifystart', function (event) {
      var feature = event.features.getArray()[0];
      feature.on("change", changeFeatureFunction);
    });
    modify.on('modifyend', function (event) {
      old_coords = event.features.getArray()[0].getGeometry().getCoordinates()[0];
    })

    map.addInteraction(draw);
    map.addInteraction(modify);
  }, [])


  function changeFeatureFunction(event) {
    let feature = event.target;
    let geometry = feature.getGeometry();
    const coords = geometry.getCoordinates()[0];

    // Removing change event temporarily to avoid infinite recursion
    feature.un("change", changeFeatureFunction);

    var new_coords = rectanglifyModifiedGeometry(coords);
    feature.getGeometry().setCoordinates([[...new_coords]]);

    feature.on("change", changeFeatureFunction);
  }

  function rectanglifyModifiedGeometry(coords) {
    var new_coords = [...coords];
    //Bottom Left
    if (!SameCoordinate(coords[0], old_coords[0])) {
      console.log("first Coordinates has been change");
      new_coords[3][0] = new_coords[0][0]
      new_coords[1][1] = new_coords[0][1]
    }
    //Bottom Right
    else if (!SameCoordinate(coords[1], old_coords[1])) {
      console.log("second Coordinates has been change");
      new_coords[0][1] = new_coords[1][1]
      new_coords[2][0] = new_coords[1][0]
    }
    //Top Right
    else if (!SameCoordinate(coords[2], old_coords[2])) {
      console.log("third Coordinates has been change");
      new_coords[1][0] = new_coords[2][0]
      new_coords[3][1] = new_coords[2][1]
    }
    //Top Left
    else if (!SameCoordinate(coords[3], old_coords[3])) {
      console.log("fourth Coordinates has been change");
      new_coords[2][1] = new_coords[3][1]
      new_coords[0][0] = new_coords[3][0]
    }
    old_coords = coords;
    new_coords.length = 4;
    return new_coords
  }

  function SameCoordinate(point1, point2) {
    return (point1[0] === point2[0]) && (point1[1] === point2[1])

  }

  return (
    <div id="dummycontainer" >
      <div id="map" >
      </div>
    </div>
  )
}

export default Map;

Answer 1

您的新坐标无效，因为第一个和最后一个应该相同才能闭合多边形，因此一个矩形需要 5 对坐标。

替换

new_coords.length = 4;

与

  new_coords[4][0] = new_coords[0][0]
  new_coords[4][1] = new_coords[0][1]

避免递归的更好方法是使用

feature.once("change", changeFeatureFunction);