围栏中心点

news2025/2/5 17:51:41

后端返回的数据格式是
[{height: 0,lat: 30.864277169098443,lng:114.35252972024682}{height: 1,lat: 30.864277169098443,lng:114.35252972024682}.........]

我们要转换成 
33.00494857612568,112.53886564762979;33.00307854503083,112.53728973842954;33.00170296814311,112.54292870618883;33.00424731914073,112.54441885173947;33.00493059521884,112.5388549273066


 转换代码 const formattePoints = this.saveFrom.electro_data.map(point => `${point.lat},${point.lng};`).join('')


算法
//参数数组points的每一项为每一个点的:纬度,经度
    //如 points = ['30.86660,104.390740', '30.861961,104.386963', '30.842287,104.388079', '点的纬度,点的经度'……];
    //返回中心点的数组[纬度,精度]
    getPointsCenter(points) {

      var point_num = points.length; //坐标点个数
      var X = 0, Y = 0, Z = 0;
      for (let i = 0; i < points.length; i++) {
        if (points[i] == '') {
          continue;
        }
        let point = points[i].split(',');
        var lat, lng, x, y, z;
        lat = parseFloat(point[0]) * Math.PI / 180;
        lng = parseFloat(point[1]) * Math.PI / 180;
        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 / point_num;
      Y = Y / point_num;
      Z = Z / point_num;

      var tmp_lng = Math.atan2(Y, X);
      var tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));

      return [tmp_lat * 180 / Math.PI, tmp_lng * 180 / Math.PI];
    },



调用 
var arr = formattePoints.split(';')
        var tmp_center = this.getPointsCenter(arr);
        console.log(tmp_center, "tmp_center");

初始化地图和围栏调用

 initMap() {

      // 初始化地图
      map = new TMap.Map('container', {
        zoom: 17, // 设置地图缩放级别
        center: new TMap.LatLng(this.creactLat, this.creactLng) // 设置地图中心点坐标
        // center: new TMap.LatLng(40.04019000341765, 116.27446815226199) // 设置地图中心点坐标
      });

      // 初始化几何图形及编辑器
      var polygon = new TMap.MultiPolygon({
        map: map,
      });
      editor = new TMap.tools.GeometryEditor({
        // TMap.tools.GeometryEditor 文档地址:https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
        map: map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层 文档地址:https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
          {
            overlay: polygon,
            id: 'polygon',
          },
          {
            overlay: new TMap.MultiPolygon({
              map,
              styles: {
                highlight: new TMap.PolygonStyle({
                  color: 'rgba(255, 255, 0, 0.6)'
                })
              },
              geometries: [
                {
                  paths: this.simplePath
                },
              ]
            }),
            // id: 'polygon',
            selectedStyleId: 'highlight'
          }
        ],
        geometries: [ //
          {
            paths: this.simplePath
          },
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: 'polygon', // 激活图层
        snappable: true, // 开启吸附
      });
      // 监听绘制结束事件,获取绘制几何图形
      editor.on('draw_complete', (geometry) => {
        // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle(矩形)图层
        if (editor.getActiveOverlay().id === 'polygon') {
          // 获取矩形顶点坐标
          var id = geometry.id;
          var geo = polygon.geometries.filter(function (item) {
            return item.id === id;
          });
          console.log('绘制的矩形定位的坐标:', geo[0].paths);
          // localStorage.setItem('coordinate', JSON.stringify(geo[0].paths))
          this.coordinate = geo[0].paths
          this.saveFrom.electro_data = geo[0].paths
          // if (this.coordinate) {
          //   this.coordinate.forEach(item => {
          //     console.log(item);
          //     this.simplePath.push(new TMap.LatLng(item.lat, item.lng))
          //   });
          // }
        }
        // 围栏中心点
        const formattePoints = this.saveFrom.electro_data.map(point => `${point.lat},${point.lng};`).join('')
        console.log(formattePoints, 'formattePoints')
        var arr = formattePoints.split(';')
        var tmp_center = this.getPointsCenter(arr);
        console.log(tmp_center, "tmp_center");
        this.saveFrom.center_lat = tmp_center[0]
        this.saveFrom.center_lng = tmp_center[1]

      });
    },

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1336999.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

labuladong日常刷题-递归魔法 | LeetCode 206反转链表 92反转链表-ii

递归魔法 LeetCode 206 反转链表 2023.12.26 题目链接labuladong讲解[链接] ListNode* reverseList(ListNode* head) {//递归退出条件if(head NULL || head->next NULL)return head;//递归ListNode* last reverseList(head->next);//处理head->next->next …

腾讯云轻量服务器4核8G12M有三年优惠价表

腾讯云轻量服务器4核8G12M有三年优惠价吗&#xff1f;有&#xff0c;但是不怎么优势&#xff0c;相对于云轻量2核2G4M带宽三年价格是540元、2核4G5M带宽3年优惠价756元&#xff0c;4核8G12M轻量应用服务器三年价格是5292元&#xff0c;怎么样&#xff1f;还想买吗&#xff1f;阿…

9.独立看门狗IWDG窗口看门狗WWDG编码思路

前言&#xff1a; 看门狗是维护系统稳定性的一向技术&#xff0c;可以让代码跑飞及时复位&#xff0c;在产品中非常常用&#xff0c;俗话说&#xff0c;重启能解决90%的问题&#xff0c;作为产品来说&#xff0c;你总不能因为一次bug就让程序卡死不动了&#xff0c;肯定要试着重…

微信小程序云开发-下载云存储中的文件

一、前言 很多时候我们需要实现用户在客户端下载服务端的文件&#xff08;图片、视频、pdf等&#xff09;到用户本地并保存起来&#xff0c;小程序也经常需要实现这样的需求。 在传统服务器开发下网上已经有很多关于小程序下载服务端文件的资料了&#xff0c;但是基于云开发的…

【滑动窗口】LeetCode:30串联所有单词的子串

作者推荐 【二叉树】【单调双向队列】LeetCode239:滑动窗口最大值 相关知识点 滑动窗口 题目 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0…

GBASE南大通用-管理函数

包括创建函数&#xff0c;修改函数过程定义和删除函数功能。这些操作在 GBASE南大通用数据源节点展开后的 Stored Functions 节点上进行。 创建函数 在 Stored Functions 节点上点击右键选择‚创建函数‛命令或者执行 Visual Studio 的‚数据‛菜单的‚新增‛子菜单下的‚函…

大创项目推荐 深度学习YOLO图像视频足球和人体检测 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov5算法5 数据集6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习YOLO图像视频足球和人体检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非…

效果图渲染电脑渲染好?还是云渲染更好?

效果图的渲染是建筑和室内设计领域中不可或缺的一步&#xff0c;随着技术的发展&#xff0c;云渲染作为一项新技术&#xff0c;正逐渐受到人们关注。今天&#xff0c;让我们深入探讨电脑渲染和云渲染这两种方法的优缺点以及它们的适用场景。 本地电脑渲染 本地电脑渲染是利用用…

麒麟信安桌面操作系统顺利上线长沙职业技术学院,深度促进产教融合,赋能信创人才培养

随着信息基础设施国产化进程的加快&#xff0c;信息技术创新产业对人才的需求量激增&#xff0c;为解决信创人才培养难题、深度促进产教融合&#xff0c;近日&#xff0c;麒麟信安、湖南欧拉生态创新中心携手长沙职业技术学院共同组建的“麒麟信安&欧拉(openEuler)国产操作…

apisix 路由转发成功 但响应502异常(转发导致客户端来源发生变化)

访问报如下异常 这种情况通常是通过apisix转发后&#xff0c;导致丢失原有域名&#xff08;也可以理解为客户端来源变了&#xff09;导致最终程序端某些安全检查不通过 此时有两种解决方法 路由中修改 操作路径&#xff1a; 路由-域名改写 如下图 上游&#xff08;upstream…

小白备战蓝桥杯:Java集合与数据结构

目录 什么是集合&#xff1f; 集合的分类 <> : 泛型 浅谈泛型 代码示例 细说泛型 泛型类 泛型方法 泛型接口 泛型通配符 Collection接口 集合的通用遍历方式 1、迭代器遍历 2、增强for循环 3、forEach方法 4、代码示例 List接口 方法 List集合的遍历方…

【数据结构初阶】二叉树(2)

二叉树顺序结构 1.二叉树的顺序结构及实现1.1二叉树的顺序结构 1.2 堆的概念及结构1.3 堆的实现1.3.1向上调整1.3.2向下调整1.3.3交换函数1.3.4打印1.3.5初始化1.3.6销毁1.3.7插入1.3.8删除1.3.9获得堆顶元素1.3.10判断是否为空1.3.6 堆的代码实现 1.3.2堆的创建1.3.3 建堆时间…

迪文屏开发保姆级教程5—表盘时钟和文本RTC显示

这篇文章要讲啥事呢&#xff1f; 本篇文章主要介绍了在DGBUS平台上使用表盘时钟和文本时钟RTC显示功能的方法。 文哥悄悄话&#xff1a; 官方开发指南PDF&#xff1a;&#xff08;不方便下载的私聊我发给你&#xff09; https://download.csdn.net/download/qq_21370051/8864…

一文了解什么是微信小程序

如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样&#xff1f;腾讯通过微信小程序实现了这一替代方案。 一、什么是微信小程序&#xff1f;它们与原生应用程序和 H5 迷你网站相比如何 什么是微信小程序&#xff1f; 小程序是微信平台内构建的“…

Stage 模型

1. 基本概念 FA模型&#xff1a;HarmonyOS早期版本开始支持的模型&#xff0c;已经不再推荐。Stage模型&#xff1a;HarmonyOS 3.1版本开始新增的模型&#xff0c;目前主推并且会长期演进的模型。 Stage模型结构&#xff1a; 2. 应用及组件配置 2.1 工程级目录 AppScope 中…

Zookeeper应用场景有哪些?

ZooKeeper是⼀个典型的发布/订阅模式的分布式数据管理与协调框架&#xff0c;我们可以使⽤它来进⾏分布式数据的发布与订阅。另⼀⽅⾯&#xff0c;通过对ZooKeeper中丰富的数据节点类型进⾏交叉使⽤&#xff0c;配合Watcher事件通知机制&#xff0c;可以⾮常⽅便地构建⼀系列分…

Dockerfile构建镜像

Dockerfile构建镜像 Dockerfile 是一个文本格式的配置文件&#xff0c; 用户可以使用 Dockerfile 来快速创建自定义的镜像&#xff0c;另外&#xff0c;使 用Dockerfile去构建镜像好比使用pom去构建maven项目一样&#xff0c;有异曲同工之妙 基本结构 Dockerfile 由一行行…

【JavaWeb学习笔记】16 - JSon和Ajax

项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/json https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/ajax 目录 〇、官方文档 一、JSon 1.JSon介绍 2.JSon快速入门 3.JSON对象和字符串对象转换 1.应用案例 2.注意事项和细节 …

【基础篇】二、字节码文件的组成 Arthas + jclasslib +javap

文章目录 1、jclasslib工具2、基础信息部分3、常量池部分4、方法部分&#xff08;从字节码指令看i&#xff09;5、三种1操作的性能对比6、javap -v命令7、jclasslib插件8、Arthas 1、jclasslib工具 字节码文件中保存的是源代码编译后的内容&#xff0c;以二进制方式存储&#…

面试题:Zabbix 和 Prometheus 到底怎么选?

文章目录 前言历史简介PrometheusZabbix 架构对比PrometheusZabbix 综合对比总结 前言 新公司要上监控&#xff0c;面试提到了 Prometheus 是公司需要的监控解决方案&#xff0c;我当然是选择跟风了。 之前主要做的是 Zabbix&#xff0c;既然公司需要 Prometheus&#xff0c;…