高德地图画正六边形

题目:已知圆点的经纬度坐标 [ 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();

时间: 2024-12-15 22:26:55

高德地图画正六边形的相关文章

为何没有格点正三角形、正五边形和正六边形

遇到一道题  hdu 5365 Run Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission(s): 1081    Accepted Submission(s): 478 Problem Description AFA is a girl who like runing.Today,he download an app about runing .

css3--布局正六边形

怎样布局正六边形?-->如果不能直接布局,就只能采用图形的组合.-->既然是正六边形,则: -->AB=2分之根号3乘2倍的边长,也就是对于矩形ABCD来说,AB是BD的根号3倍(也可以用正切算tan30deg).这样的矩形旋转两次60deg,轨迹就恰好是一个正六边形. -->事实上我们常常是要让它有一个完整背景的,如果只是搞三个块拧在一起,必然背景是不能一体的, -->所以,我们的目标是:既要撑开其余四边,又要获得完整背景的. -->达到背景一体的思路思路:把其中两块

Unity3D 正六边形,环状扩散,紧密分布,的程序

最近在做一个正六边形的游戏,被一开始的布局难倒了. 需求:中心有个正六边形,输入围绕中心扩散的环数,自动创建和摆放. 大概就是这样的吧,我觉得这个非常轻松的就可以搞定了.啊~~~~~啊~~~ 五环~~,你比四环多一环,啊~~~~啊~~~五环~~,你比六环少一环~~~ 可是,到底每环要放多少个六边形?经过我缜密的观察发现一个规律. 如果假设第一个环编号为1,那么每个换六边形的数量就是 环数*6.啊~~~~~啊~~~ 五环~~,一环就是紫~禁~城~~~~. 可是摆放的具体位置是哪里?既然是圆形,那就

正六边形

用CSS3做的六边形 代码如下: <style> .cla{margin-top: 100px;margin-left: 100px;} .cla div{ width: 80px; height: 46px; background: red; } .c1,.c2{ -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60

画正六边形

描述 使用turtle库,绘制一个六边形. 注意:这不是自动评阅题目,仅用于练习,没有评阅. 输出示例 六边形效果如下: 代码: import turtle as t t.fd(100) for i in range(5): t.left(60) t.fd(100) t.fd(60) 分析: 跟前面的画正方形分析的一样,注意这个最后的转向还是原来的转向 原文地址:https://www.cnblogs.com/dushenda/p/9126067.html

HTML六边形蒙版的思路

前几天逛网页的时候偶然发现了个六边形的蒙版效果(其实是逛DNF官网看到的),今儿个突发奇想还原一个六边形 其实最开始做六边形我的思路是使用::before和::after 1 .box2{ 2 width: 400px; 3 height: 400px; 4 border: 1px solid black; 5 position: relative; 6 } 7 .six4{ 8 width: 100px; 9 height: 173px; 10 position: absolute; 11 t

css绘制六边形

CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: 1 <div id="box1"></div> 2 <div id="box2"></div> 3 <div id="box3"></div> CSS代码: #box1{width:0;border-left: 52px solid transp

css实现六边形图片(最简单易懂方法实现高逼格图片展示)

不说别的,先上效果: 用简单的div配合伪元素,即可'画出'这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. (1)那么第一步,当然是绘制容器,容器是一个有宽高的div. 绘制之前,必须明白一个问题,那就是,等边六边形是通过三个相同宽高的div拼合而成的(如下图所示),所以div的宽高必须满足 √3 倍的条件才能拼成一个正六边形,这里就不带大家计算这个值了,有兴趣可以用三角函数私下自己计算一下. 在此处,我

空心六边形

题目描述 画图形,是我们需要研究的一个重要课程.菱形好似练的差不多了啊.那么,什么东西,能够有些新意呢?弄个漂亮点的图形吧,空心六边形进入了我们的视线.那么我们就打印一个正六边型吧.根据输入的边长,输出对应大小的正六边型. 输入 只有一个正整数n(0 < n < 20),代表正六边形的边长. 输出 是一个边长为n的正多边形. 样例输入 [复制] 5 样例输出 [复制] AC代码: 1 import java.util.Scanner; 2 3 public class Main { 4 5 p