我正在使用mapbox-gl-draw
向地图添加可移动功能。除了可移动性功能之外,我还需要 旋转/转换功能 功能,以实现类似于 Leaflet.Path.Transform
的功能。
目前,我唯一的选择是创建 custom mode 吗?
例如类似于:
map.on('load', function() {
Draw.changeMode('transform');
});
我无法将我的地图及其功能转换为 mapbox-gl-leaflet
以实现Leaflet.Path.Transform
,因为失去旋转/方位/音调支持不是一种选择。< / p>
答案 0 :(得分:2)
答案很长。 (有关最终产品http://mapster.me/mapbox-gl-draw-rotate-mode)
,请参阅http://npmjs.com/package/mapbox-gl-draw-rotate-mode和https://github.com/mapstertech/mapbox-gl-draw-rotate-mode我一直在为自定义项目做类似的事情,而不是使用绘图库。我的项目涉及一些非常规模的对象,而不是非常复杂的多边形,因此解决方案对您来说可能过于简单,但它可能是正确的路径。我只是旋转并移动。
在地理上做动作并不太难。这里有一些帮助你入门。一个基本的JSBin在https://jsbin.com/yoropolewo/edit?html,output处有一些拖动功能(太累了也无法旋转)。
首先,注册必要的点击事件以进行拖动事件。您可以监听mousedown的特定Mapbox图层,然后在整个文档上监听鼠标移动和鼠标移动。
要进行单独的形状旋转,您需要确保引用正确的功能。在这个例子中,我假设源数据中只有一个特征,但对于大多数用途来说这可能太简单了,所以你必须进行推断。源数据是我们稍后setData()
时会影响的。显然有很多方法可以做我在这里做的事情,但我想要清楚。
var currentDragging = false;
var currentDraggingFeature = false;
var currentDraggingType = false;
var firstDragEvent = false;
map.on('mousedown','my-layer-id',function(e) {
currentDragging = 'my-source-id'; // this must correspond to the source-id of the layer
currentDraggingFeature = e.features[0]; // you may have to filter this to make sure it's the right feature
currentDraggingType = 'move'; // rotation or move
firstDragEvent = map.unproject([e.originalEvent.layerX,e.originalEvent.layerY]);
});
window.addEventListener('mousemove',dragEvent);
window.addEventListener('mouseup',mouseUpEvent);
然后,您将需要一个函数,它接受一个初始点,一个距离和一个旋转,然后将一个点返回给您。像这样:
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
Number.prototype.toDeg = function() {
return this * 180 / Math.PI;
}
function getPoint(point, brng, dist) {
dist = dist / 63.78137; // this number depends on how you calculate the distance
brng = brng.toRad();
var lat1 = point.lat.toRad(), lon1 = point.lng.toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return [lon2.toDeg(),lat2.toDeg()];
}
现在,关键是Mapbox GL JS中的unproject
方法,因此您可以在鼠标上的x / y坐标和地图上的lng / lat之间移动。然后,使用map.getSource().setData()
函数设置新的geoJSON。
我正在将x / y立即转换为坐标,但您可以随时进行。移动时的内容如下:
function moveEvent(e) {
// In the case of move, you are just translating the points based on distance and angle of the drag
// Exactly how your translate your points here can depend on the shape
var geoPoint = map.unproject([e.layerX,e.layerY]);
var xDrag = firstDragEvent.lng - geoPoint.lng;
var yDrag = firstDragEvent.lat - geoPoint.lat;
var distanceDrag = Math.sqrt( xDrag*xDrag + yDrag*yDrag );
var angle = Math.atan2(xDrag, yDrag) * 180 / Math.PI;
// Once you have this information, you loop over the coordinate points you have and use a function to find a new point for each
var newFeature = JSON.parse(JSON.stringify(currentDraggingFeature));
if(newFeature.geometry.type==='Polygon') {
var newCoordinates = [];
newFeature.geometry.coordinates.forEach(function(coords) {
newCoordinates.push(getPoint(coords,distanceDrag,angle));
});
newFeature.geometry.coordinates = newCoordinates;
}
map.getSource(currentDragging).setData(newFeature);
}
旋转有点困难,因为您希望形状围绕中心点旋转,并且您需要知道每个点到该中心点的距离才能做到这一点。如果你有一个简单的方形多边形,这个计算很容易。如果没有,那么使用这样的东西会有所帮助(Finding the center of Leaflet polygon?):
var getCentroid2 = function (arr) {
var twoTimesSignedArea = 0;
var cxTimes6SignedArea = 0;
var cyTimes6SignedArea = 0;
var length = arr.length
var x = function (i) { return arr[i % length][0] };
var y = function (i) { return arr[i % length][1] };
for ( var i = 0; i < arr.length; i++) {
var twoSA = x(i)*y(i+1) - x(i+1)*y(i);
twoTimesSignedArea += twoSA;
cxTimes6SignedArea += (x(i) + x(i+1)) * twoSA;
cyTimes6SignedArea += (y(i) + y(i+1)) * twoSA;
}
var sixSignedArea = 3 * twoTimesSignedArea;
return [ cxTimes6SignedArea / sixSignedArea, cyTimes6SignedArea / sixSignedArea];
}
一旦你能够知道多边形的中心,你就是金色的:
function rotateEvent(e) {
// In the case of rotate, we are keeping the same distance from the center but changing the angle
var findPolygonCenter = findCenter(currentDraggingFeature);
var geoPoint = map.unproject([e.layerX,e.layerY]);
var xDistanceFromCenter = findPolygonCenter.lng - geoPoint.lng;
var yDistanceFromCenter = findPolygonCenter.lat - geoPoint.lat;
var angle = Math.atan2(xDistanceFromCenter, yDistanceFromCenter) * 180 / Math.PI;
var newFeature = JSON.parse(JSON.stringify(currentDraggingFeature));
if(newFeature.geometry.type==='Polygon') {
var newCoordinates = [];
newFeature.geometry.coordinates.forEach(function(coords) {
var xDist = findPolygonCenter.lng - coords[0];
var yDist = findPolygonCenter.lat - coords[1];
var distanceFromCenter = Math.sqrt( xDist*xDist + yDist*yDist );
var rotationFromCenter = Math.atan2(xDist, yDist) * 180 / Math.PI;
newCoordinates.push(
getPoint(coords,distanceFromCenter,rotationFromCenter+angle)
);
});
newFeature.geometry.coordinates = newCoordinates;
}
}
当然,在整个过程中,请确保正确传递坐标并从函数中正确返回。其中一些代码可能包含不正确的数组级别。使用lat / lng对象和geoJSON数组很容易遇到错误。
我希望解释简短但足够清楚,并且您在逻辑上理解我们正在做些什么来重新定位这些点。这是重点,确切的代码是细节。
也许我应该制作一个模块或分叉GL Draw ......