英文:
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”,以选择地图中的一个点。
问题是:我如何创建一个具有以下属性的新选择:
- 中心是我在地图上绘制的点。
- 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:
- The center is the point i drew on map.
- 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 < 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]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论