高德多边形数据求中心点记录

6 篇文章 0 订阅
5 篇文章 0 订阅

代码结构

注意点 下方数组结构取值别取错了要不计算报错
let lng = lnglat[0] * Math.PI / 180; let lat = lnglat[1] * Math.PI / 180;

    PolygonArr: [
      [113.2131231, 42.2212312],
      [113.2131231, 42.2212312],
      [113.2131231, 42.2212312],
      [113.2131231, 42.2212312],
      [113.2131231, 42.2212312],
      [113.2131231, 42.2212312]
    ]
    // 取面对象 中心点
    getCenter(PolygonArr) {
      let total = PolygonArr.length;
      let X = 0; let Y = 0; let Z = 0;
      PolygonArr.forEach((lnglat) => {
          let lng = lnglat[0] * Math.PI / 180;
          let lat = lnglat[1] * Math.PI / 180;
          let x, y, z;
          x = Math.cos(lat) * Math.cos(lng);
          y = Math.cos(lat) * Math.sin(lng);
          z = Math.sin(lat);
          X += x;
          Y += y;
          Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      let Lng = Math.atan2(Y, X);
      let Hyp = Math.sqrt(X * X + Y * Y);
      let Lat = Math.atan2(Z, Hyp);
      console.log(Lng, Lat, Hyp);
      return [Lng * 180 / Math.PI, Lat * 180 / Math.PI];
    },

参考至他人文章笔记记录

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在Vue中使用高德地图API画多边形需要进行以下步骤: 1. 在index.html中引入高德地图API的js文件: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script> ``` 2. 在Vue组件中使用高德地图API的AMap对象创建地图实例: ```javascript mounted() { // 创建地图实例 this.map = new AMap.Map('mapContainer', { zoom: 13, // 地图缩放级别 center: [116.397428, 39.90923], // 地图中心点坐标 }); } ``` 3. 在地图上绘制多边形: ```javascript drawPolygon() { // 创建多边形路径 const path = [ [116.403322, 39.920255], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365], [116.393699, 39.90684], ]; // 创建多边形实例 const polygon = new AMap.Polygon({ path: path, strokeColor: '#FF33FF', strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, }); // 添加多边形到地图 this.map.add(polygon); } ``` 4. 在Vue组件中调用drawPolygon方法,即可在地图上绘制多边形。 完整代码示例: ```html <template> <div id="mapContainer" style="height: 500px;"></div> <button @click="drawPolygon">绘制多边形</button> </template> <script> export default { mounted() { // 创建地图实例 this.map = new AMap.Map('mapContainer', { zoom: 13, // 地图缩放级别 center: [116.397428, 39.90923], // 地图中心点坐标 }); }, methods: { drawPolygon() { // 创建多边形路径 const path = [ [116.403322, 39.920255], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365], [116.393699, 39.90684], ]; // 创建多边形实例 const polygon = new AMap.Polygon({ path: path, strokeColor: '#FF33FF', strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, }); // 添加多边形到地图 this.map.add(polygon); }, }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值