Question

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

我正在使用“交互”进行修改，并且好像在更改要素的几何图形时，“交互”无法识别它。我不确定如何更新交互功能。

我的起点是这里的堆栈溢出代码：OpenLayers - lock rotation of box or rectangle geometry while modifying。

这是我的Reactcomponent的“游乐场”代码。我添加了所有代码，因为我不确定在地图的初始化过程中是否做错了什么：

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);

在Openlayer中更改几何形状后，如何选择特征？

1 个答案: