正在做什么
尝试做的是,让用户使用google drawingManager在Google地图上绘制多边形,然后将该多边形转移到threejs中的3D地面上。
问题
我试图在threejs 3D场景中定义顶点,但是我需要在公制坐标系中定义x和y,我可以从谷歌地图中的latlng,世界,点坐标系中获取多边形点,但是如何将这些坐标转换为公制坐标系:\?
代码
let map;
let paths;
let edges = [];
let points = [];
let edgesByPoints = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.984868, lng: 36.027031},
zoom: 18
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
]
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
paths = polygon.getPath().j;
for (let i = 0; i < paths.length; i++) {
let nextPath = (i + 1 >= paths.length) ? paths[0] : paths[i + 1];
edges[i] = getDistance(paths[i], nextPath);
// let latlng = new google.maps.LatLng(paths[i].lat(),paths[i].lng());
// console.log(paths[i].lat());
points[i] = map.getProjection().fromLatLngToPoint(paths[i]);
let nextPoint = map.getProjection().fromLatLngToPoint(nextPath);
edgesByPoints[i] = findDistance(points[i],nextPoint);
}
});
}
// a function that I made to calculate the distance between points
function findDistance(point1,point2) {
return Math.sqrt(Math.pow((point1.x - point2.x),2) + Math.pow((point1.y - point2.y),2));
}
var rad = function (x) {
return x * Math.PI / 180;
};
// a function that i found in the internet, it get the distance right but, I need to find the coordinates not just the distance between points.
var getDistance = function (p1, p2) {
var R = 6378137; // Earth’s mean radius in meter
var dLat = rad(p2.lat() - p1.lat());
var dLong = rad(p2.lng() - p1.lng());
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) *
Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c; // returns the distance in meter
};
// i don't know but the result from this function seem to be incorrect
function latLng2Point(latLng, map) {
var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
var scale = Math.pow(2, map.getZoom());
var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
}