zoukankan      html  css  js  c++  java
  • 高德地图画正六边形

    题目:已知圆点的经纬度坐标 [ 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();
  • 相关阅读:
    大型项目前端架构浅谈
    图标使用新姿势- react 按需引用 svg 的实现
    为什么json 不能使用 int64类型
    SSL证书对SEO网站优有什么影响?使用HTTPS的SEO优势
    web安全测试必须注意的五个方面
    在小程序中实现 Mixins 方案
    网站web前端常见的优化措施
    前端 HTML空格的六种方式
    如何正确选型,React Native 还是 Native?
    CSS3 渐变(Gradients)
  • 原文地址:https://www.cnblogs.com/nalixueblog/p/6291227.html
Copyright © 2011-2022 走看看