旋转传单 Polyline/Rectangle
Rotate leaflet Polyline/Rectangle
我正在尝试使用此 question 中的代码旋转 Leaflet 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
}
问题是旋转时矩形歪斜了。
有什么想法可以优化这个功能吗?
固定
最终代码:
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
}
球体上的 "rectangle" 是什么?这是将当前投影应用于这样的坐标的结果,即它们在 map/screen 上的图像形成矩形。请注意,每个矩形边的经纬度坐标不应该相等(例如,赤道对齐矩形的经度在大多数常用投影中的顶部和底部点将不同)
所以为了在地图上得到好看的矩形,你需要在屏幕坐标中旋转顶点,并反投影到经纬度space。
我正在尝试使用此 question 中的代码旋转 Leaflet 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
}
问题是旋转时矩形歪斜了。 有什么想法可以优化这个功能吗?
固定 最终代码:
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
}
球体上的 "rectangle" 是什么?这是将当前投影应用于这样的坐标的结果,即它们在 map/screen 上的图像形成矩形。请注意,每个矩形边的经纬度坐标不应该相等(例如,赤道对齐矩形的经度在大多数常用投影中的顶部和底部点将不同)
所以为了在地图上得到好看的矩形,你需要在屏幕坐标中旋转顶点,并反投影到经纬度space。