Javascript 从坐标地图绘制多边形画布_Javascript_Html_Canvas_Leaflet_Polygon

Javascript 从坐标地图绘制多边形画布

javascript html canvas leaflet

Javascript 从坐标地图绘制多边形画布,javascript,html,canvas,leaflet,polygon,Javascript,Html,Canvas,Leaflet,Polygon,如何将坐标贴图转换为点画布我有一份地图传单当我选择多边形时，我想用画布html5绘制多边形我有这样的坐标： [[2.809510437833253,49.408625488749216],[2.8095461924850422,49.40864172401838],[2.8095226856172806,49.40866595550704],[2.809565304449213,49.40868849340382],[2.8097185865450465,49.40858536874469

如何将坐标贴图转换为点画布

我有一份地图传单当我选择多边形时，我想用画布html5绘制多边形

我有这样的坐标：

[[2.809510437833253,49.408625488749216],[2.8095461924850422,49.40864172401838],[2.8095226856172806,49.40866595550704],[2.809565304449213,49.40868849340382],[2.8097185865450465,49.40858536874469],[2.809677338568488,49.40856463072128],[2.8096442193374154,49.408580757620854],[2.809609885351463,49.40855283978645],[2.809510437833253,49.408625488749216]]

难点在于如何从地图坐标中获取点

var minX,minY,maxX,maxY; 
myPoints.forEach((p,i) => {
   if(i === 0){ // if first point 
      minX = maxX = p[0];
      minY = maxY = p[1]; 
   }else{
      minX = Math.min(p[0],minX);
      minY = Math.min(p[1],minY);
      maxX = Math.max(p[0],maxX);
      maxY = Math.max(p[1],maxY);
   }
 });
 // now get the map width and heigth in its local coords
 const mapWidth = maxX-minX;
 const mapHeight = maxY-minY;
 const mapCenterX = (maxX + minX) /2;
 const mapCenterY = (maxY + minY) /2;

此示例演示如何显示多边形画布：

<!DOCTYPE html>
<html>
<body>
<svg height="110" width="200">
<polygon points="130,0 0,160 0,485 270,645 560,485 560,160"/>
</svg>
</body>
</html>

谢谢您的帮助。

地图投影难题地球的问题在于它不是平面的，我们人类用来绘制和渲染的大部分东西都是平面的。为了解决这个问题，我们接受地图所代表的东西的一些变形，通过从圆形地球到平面地图的投影。有许多不同类型的投影，一个常见的是墨卡托投影（见谷歌地图），它扭曲了赤道以南和以北的区域。但它这样做是为了保持方向。你可以把罗盘放在墨卡托投影地图上，获得准确的方位，但你不能拿尺子测量距离

但规模很重要，解决方法很简单但这一切都有一个可取之处。与地球相比，我们人类是渺小的，而对于局部地图来说，地球曲率造成的扭曲是如此之小，以至于无关紧要

如果你在一个小区域（如城市和郊区）有一组坐标，你可以使用正方形投影。其中，lat和long是渲染曲面网格上的x和y

一步一步地如何获取一些映射数据并将其适配到维护方面的画布

因此，您有一组点和画布上下文

<canvas id="canvas" width =300 height = 200></canvas>
ctx = canvas.getContext("2d");

 var myPoints = [[2.809510437833253,49.408625488749216],[2.8095461924850422,49.40864172401838],[2.8095226856172806,49.40866595550704],[2.809565304449213,49.40868849340382],[2.8097185865450465,49.40858536874469],[2.809677338568488,49.40856463072128],[2.8096442193374154,49.408580757620854],[2.809609885351463,49.40855283978645],[2.809510437833253,49.408625488749216]]

现在您拥有了地图范围，您可以通过找到适合宽度和高度的最小比例将其缩放到画布

 const scale = Math.min(canvas.width / mapWidth,canvas.height / mapHeight);

现在您可以绘制地图，首先减去地图中心，然后将其放大，然后将ot移动到画布中心

 ctx.beginPath();
 myPoints.forEach(p => { 
      ctx.lineTo(
          (p[0] - mapCenterX) * scale + canvas.width /2 ,
          (p[1] - mapCenterY) * scale + canvas.height / 2 
      );
 });
 ctx.stroke();

这是一个有效的例子。

ctx=canvas.getContext（“2d”）；
var myPoints=[[2.809510437833253,49.408625848749216]，[2.8095461924850422,49.40864172401838]，[2.8095226856172806,49.4086655550704]，[2.8095653044213,49.4086884849340382]，[2.8097185865450465,49.408585536874469]，[2.809677338568488,49.40854646307228]，[2.8096443374154,49.4088752835852835459]，[2.809845]，[2.809510437833253,49.408625488749216]]
变量minX，minY，maxX，maxY；
myPoints.forEach（（p，i）=>{
如果（i==0）{//如果第一个点
minX=maxX=p[0]；
minY=maxY=p[1]；
}否则{
minX=Math.min（p[0]，minX）；
minY=Math.min（p[1]，minY）；
maxX=Math.max（p[0]，maxX）；
maxY=Math.max（p[1]，maxY）；
}
});
//现在在本地坐标中获取地图的宽度和高度
常量mapWidth=maxX-minX；
常量映射高度=最大最小值；
常量mapCenterX=（maxX+minX）/2；
常量mapCenterY=（maxY+minY）/2；
//要找到适合画布的比例，请获取适合高度或宽度的最小比例
const scale=Math.min（canvas.width/mapWidth、canvas.height/mapHeight）；
//现在，您可以绘制以cavas为中心的地图
ctx.beginPath（）；
myPoints.forEach（p=>{
ctx.lineTo(
（p[0]-mapCenterX）*比例+画布宽度/2，
（p[1]-地图中心）*比例+画布高度/2
);
});
ctx.stroke（）；

canvas{border:2px纯黑；}

非常感谢您提供了这个无价的答案。ı正要问同样的问题。