旋转传单折线/矩形 [英] Rotate leaflet Polyline/Rectangle
问题描述
我正在尝试使用此问题.
rotatePoints (center, points, yaw) {
const res = []
const angle = yaw * (Math.PI / 180)
for (let i = 0; i < points.length; i++) {
const p = points[i]
// translate to center
const p2 = new LatLng(p.lat - center.lat, p.lng - center.lng)
// rotate using matrix rotation
const p3 = new LatLng(Math.cos(angle) * p2.lat - Math.sin(angle) * p2.lng, Math.sin(angle) * p2.lat + Math.cos(angle) * p2.lng)
// translate back to center
const p4 = new LatLng(p3.lat + center.lat, p3.lng + center.lng)
// done with that point
res.push(p4)
}
return res
}
问题是矩形在旋转时会倾斜. 有什么想法可以优化此功能吗?
The problem is that the rectangle is skewed while rotating. Any ideas how to optimize this function?
已修复 最终代码:
rotatePoints (center, points, yaw) {
const res = []
const centerPoint = map.latLngToLayerPoint(center)
const angle = yaw * (Math.PI / 180)
for (let i = 0; i < points.length; i++) {
const p = map.latLngToLayerPoint(points[i])
// translate to center
const p2 = new Point(p.x - centerPoint.x, p.y - centerPoint.y)
// rotate using matrix rotation
const p3 = new Point(Math.cos(angle) * p2.x - Math.sin(angle) * p2.y, Math.sin(angle) * p2.x + Math.cos(angle) * p2.y)
// translate back to center
let p4 = new Point(p3.x + centerPoint.x, p3.y + centerPoint.y)
// done with that point
p4 = map.layerPointToLatLng(p4)
res.push(p4)
}
return res
}
推荐答案
球形上的矩形"是什么?将当前投影应用于这样的坐标的结果是,它们的图像在地图/屏幕上形成矩形.请注意,纬度-经度坐标在每个矩形边都不应该相等(例如,在大多数通常的投影中,赤道对齐矩形的经度在顶点和底点会有所不同)
What is "rectangle" on sphere? It is result of applying of current projection to such coordinates that their image on the map/screen form rectangle. Note that lat-long coordinates are not ought to be equal for every rectangle side (for example, longitude for equator-aligned rectangle will differ for top and bottom point in the most of usual projections)
因此,要在地图上获得漂亮的矩形,您需要旋转屏幕坐标中的顶点,并向后投影到经纬度空间中.
So to to get good-looking rectangle in map, you need to rotate vertices in screen coordinates, and make back-projection into lat-long space.
这篇关于旋转传单折线/矩形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!