高德地图画正六边形

时间：2017-01-17 00:09:07 阅读：539 评论：0 收藏：0 [点我收藏+]

标签：sel enter 缩放 att wrap etl 对象 getx double

题目：已知圆点的经纬度坐标 [ longitude, latitude ] ，以3公里为半径画一个正六边形，画出六边形

思路：将经纬度坐标转化为平面坐标，在平面坐标上求六个点的坐标，最后将平面坐标转为经纬度坐标

实现：最后的计算单位都相应转化为米

1. 经纬度坐标转化为米

#获取当前的 “米/像素” 的转化比例

var per = map.getResolution(point); // 获取单位米/像素

#将经纬度坐标转成“像素”var toPx = map.lnglatToPixel(point, zoom); //转换像素

#根据像素以及比例转成“米”单位 var centerX = per * toPx.getX(); //将像素转化为米
var centerY = per * toPx.getY();

2. 根据圆心位置求出六个平面点的坐标(先不考虑浮点数计算的问题)

var pointNum = [];

pointNum.push({x: centerX, y: centerY + radius},

              {x: centerX + sin60, y: centerY + cos60},

              {x: centerX + sin60, y: centerY - cos60},

              {x: centerX, y: centerY - radius},

              {x: centerX - sin60, y: centerY - cos60},

              {x: centerX - sin60, y: centerY + cos60});

3. 将六个平面坐标转为经纬度坐标

#获取当前地图的缩放比例

var zoom = map.getZoom();

var path = [];

pointNum.map((cur, index) => {

   #将 “米” 转化 “像素”单位

   var x = cur.x / per,
   y = cur.y / per;

   #将平面坐标转经纬度坐标

   pointNum[index] = map.pixelToLngLat(new AMap.Pixel(x, y), zoom);

   #获取转化后的经度、纬度，并保存

   path.push([pointNum[index].getLng(), pointNum[index].getLat()]);
});

4. 展示六边形

let polygon = new AMap.Polygon({
   path: path,
   strokeColor: ‘red‘,
   strokeOpacity: 1,
   strokeWeight: 3,
   fillColor: ‘red‘, 
   fillOpacity: 0.45
});
polygon.setMap(map);

#创建编辑对象

var editor = new AMap.PolyEditor(map, polygon);

editor.open();

高德地图画正六边形

标签：sel enter 缩放 att wrap etl 对象 getx double

原文地址：http://www.cnblogs.com/nalixueblog/p/6291227.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行