高德地圖畫正六邊形

時間 2019-12-11

標籤圖畫正六邊形简体版

原文原文鏈接

題目：已知圓點的經緯度座標 [ longitude, latitude ] ，以3千米爲半徑畫一個正六邊形，畫出六邊形git

思路：將經緯度座標轉化爲平面座標，在平面座標上求六個點的座標，最後將平面座標轉爲經緯度座標app

實現：最後的計算單位都相應轉化爲米code

1. 經緯度座標轉化爲米對象

#獲取當前的「米/像素」的轉化比例

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

#將經緯度座標轉成「像素」var toPx = map.lnglatToPixel(point, zoom); //轉換像素

#根據像素以及比例轉成「米」單位 var centerX = per * toPx.getX(); //將像素轉化爲米
var centerY = per * toPx.getY();

2. 根據圓心位置求出六個平面點的座標(先不考慮浮點數計算的問題)ci

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. 將六個平面座標轉爲經緯度座標get

#獲取當前地圖的縮放比例

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. 展現六邊形it

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();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。