如何在OpenLayers中从一个点开始移动一个选择?

huangapple go评论67阅读模式
英文:

How to move a selection starting from a point in OpenLayer?

问题

我正在尝试复制这种行为:

我有一个基于ol.interaction.Transform的选择,就像这个例子中一样:
https://viglino.github.io/ol-ext/examples/interaction/map.interaction.transform.html

然后,我在地图上添加了一个新的Draw,类型为“Point”,以选择地图中的一个点。

问题是:我如何创建一个具有以下属性的新选择:

  1. 中心是我在地图上绘制的点。
  2. 4个角与中心的距离与以前的选择相同。

我有点的坐标(x,y)
我有以前选择的矩形的坐标(因此有五对坐标)

var newCoordinate = [];
var newCoordinateArray = [];
var newSelection = originalSelection.clone();
for (i = 0; i < newSelection.getGeometry().getCoordinates()[0].length; i++) {
    var x = getDifference(coordinatePunto.getGeometry().getCoordinates([0],newSelection.getGeometry().getCoordinates()[0][i][0]);
    var y = getDifference(coordinatePunto.getGeometry().getCoordinates()[1],newSelection.getGeometry().getCoordinates()[0][i][1]);
    newCoordinateArray.push([newSelection.getGeometry().getCoordinates()[0][i][0] - x,newSelection.getGeometry().getCoordinates()[0][i][1] + y]);
} 
newCoordinate.push(newCoordinateArray);
newSelection.getGeometry().setCoordinates(newCoordinate);
transform.select(newSelection, true);
function getDifference(a, b) {
    return Math.abs(a - b);
}

originalSelection 包含了5对旧坐标

newSelection 是我尝试填充所有需要显示相同角度的坐标的变量(因此相同的矩形),但位于地图上不同的位置(其中心是我的点)。

英文:

I'm trying to reproduce this kind of behaviour:

I've a selection based on an ol.interaction.Transform, just like in this example:
https://viglino.github.io/ol-ext/examples/interaction/map.interaction.transform.html

Then i add a new Draw of type "Point" to the map, to select a point into the map itself.

The question is: How i can create a new selection who have this properties:

  1. The center is the point i drew on map.
  2. The 4 angles have same distance from the center just as the previous selection

I've the coordinates of the point (x,y)
I've the coordinates of the previous selection rectangle (so five couple of coordinates)

var newCoordinate = [];
var newCoordinateArray = [];
var newSelection = originalSelection.clone();
     for (i = 0; i &lt; newSelection.getGeometry().getCoordinates()[0].length; i++) {
	    var x = getDifference( coordinatePunto.getGeometry().getCoordinates([0],newSelection.getGeometry().getCoordinates()[0][i][0])
	  	var y = getDifference( coordinatePunto.getGeometry().getCoordinates()[1],newSelection.getGeometry().getCoordinates()[0][i][1])
	  	newCoordinateArray.push([newSelection.getGeometry().getCoordinates()[0][i][0] - x,newSelection.getGeometry().getCoordinates()[0][i][1] + y]);
	 } 
newCoordinate.push(newCoordinateArray);
newSelection.getGeometry().setCoordinates(newCoordinate);
transform.select(newSelection, true);
function getDifference(a, b) {
  return Math.abs(a - b);

 }

originalSelection contains the 5 couple of old coordinates

newSelection is the var i'm trying to populate with all the coordinates i need to show a selection with same angles (so same rectangle) but in a different place of the map (where the center is my point)

答案1

得分: 0

根据评论,这是解决方案:

var oldExtend = originalSelection.getGeometry().getExtent();
var oldCenter = ol.extent.getCenter(oldExtend);
var newExtend = coordinatePunto.getGeometry().getExtent();
var newCenter = ol.extent.getCenter(newExtend);

你只需要翻译提供新坐标的部分:

newSelection.getGeometry().translate(newCenter[0] - oldCenter[0], newCenter[1] - oldCenter[1]);
英文:

According with comments, that's the solution:

var oldExtend = originalSelection.getGeometry().getExtent();
var oldCenter = ol.extent.getCenter(oldExtend);
var newExtend = coordinatePunto.getGeometry().getExtent();
var newCenter = ol.extent.getCenter(newExtend);

You can just translate giving new coordinates:

newSelection.getGeometry().translate(newCenter[0] - oldCenter[0], newCenter[1] - oldCenter[1]);

huangapple
  • 本文由 发表于 2023年7月20日 22:28:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76730916.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定