polygon startEdit时能控制只沿x,y方向拖拽方向吗 #2697
Description
最开始在做rectangle编辑的时候，发现rectangle会有显示偏移问题 #1118 ，于是换成了用polygon显示rectangle，但是polygon做出来的rectangle可以沿多个方向拖拽，polygon能控制只沿x，y方向拖拽吗
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>交互 - 编辑多边形</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
.pane{background:#34495e;line-height:28px;color:#fff;z-index:10;position:absolute;top:20px;right:20px}
.pane a{display:block;color:#fff;text-align:left;padding:0 10px;min-width:28px;min-height:28px;float:left}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js"></script>
<body>
<div id="map" class="container"></div>
<div class="pane"><a href="javascript:startEdit();">Start edit</a><a href="javascript:endEdit();">End edit</a></div>
<script>
var map = new maptalks.Map('map', {
center: [100.588195, 35.652116],
zoom: 6.7,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
var layer = new maptalks.VectorLayer('vector')
layer.addTo(map);
const points = [
[
[100.588195, 35.652116],
[104.946203, 35.652116],
[104.946203, 32.29422],
[100.588195, 32.29422]
]
]
for (let i = 0; i < points[0].length; i++) {
const p = points[0][i]
var point = new maptalks.Marker(
p,
{
visible : true,
editable : true,
cursor : 'pointer',
draggable : false,
dragShadow : false,
drawOnAxis : null,
symbol : {
'textFaceName' : 'sans-serif',
'textName' : `${i+1}`,
'textFill' : '#34495e',
'textHorizontalAlignment' : 'right',
'textSize' : 40
}
}
);
point.addTo(layer)
}
var polygon = new maptalks.Polygon(points, {
visible : true,
editable : true,
cursor : 'pointer',
draggable : false,
interactive: false,
symbol: {
'lineColor' : '#34495e',
'lineWidth' : 2,
'polygonFill' : 'rgb(135,196,240)',
'polygonOpacity' : 0.6
}
});
const rect = polygonToRectangle(points[0]);
console.log('rect', rect)
var rectangle = new maptalks.Rectangle(rect.corner,373381, 373381, {
visible : true,
editable : true,
cursor : 'pointer',
draggable : false,
interactive: false,
symbol: {
'lineColor' : '#34495e',
'lineWidth' : 2,
'polygonFill' : 'rgb(251,76,71)',
'polygonOpacity' : 0.6
}
});
function polygonToRectangle(polygonCoords) {
var leftTop = turf.point( polygonCoords[0]);
var rightTop = turf.point(polygonCoords[1]);
var rightBottom = turf.point(polygonCoords[2]);
var leftBottom = turf.point(polygonCoords[3]);
var options = { units: "meters" };
var width = turf.distance(leftTop, rightTop, options);
var height = turf.distance(leftTop, leftBottom, options);
return {
corner:polygonCoords[0], // 左上角
width,
height
};
}
polygon.addTo(layer);
rectangle.addTo(layer);
console.log('rectangle', rectangle)
startEdit();
function startEdit() {
polygon.startEdit();
}
function endEdit() {
polygon.endEdit();
}
</script>
</body>
</html>