围栏中心点

后端返回的数据格式是
[{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]

      });
    },

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL日期查询 今天、明天、本月、下月、星期、本周第一天、本周最后一天、本周七天日期

文章目录 今天日期明天日期本月第一天本月最后一天下个月第一天当前月已过几天当前月天数当前月所有日期获取星期本周第一天本周最后一天获取本周的七天日期今天日期 select curdate()明天日期 select DATE_SUB(curdate(),INTERVAL -1 DAY) AS tomorrow本月第一天 select da…

阿春的450MT售价提前大曝光,符合你的预期吗?

最新消息&#xff0c;阿春的450MT在国外的官网上已经曝光&#xff0c;售价8990澳元&#xff0c;折合RMB 4.35万元&#xff0c;毕竟对他们来说这也是进口车嘛。那么从这个售价可以看出一些端倪&#xff0c;同平台的450SR海外售价8290澳元&#xff0c;450MT和450SR差价700澳元&am…

UI自动化测试的痛点

当我们找工作的时候查看招聘信息发现都需要有自动化测试经验&#xff0c;由此看来测试人员不会一点自动化测试技术都不好意思说自己是做软件测试的。大部分测试人员也都是从使用自动化测试工具、录制回放、测试脚本、开发小工具入门自动化测试的&#xff0c;然后在慢慢的接触 U…

idea设置自定义快捷键定义代码块

文章目录 idea设置自定义快捷键定义代码块1、首先打开setting然后找到editor中的live templates2、点击加号先新建一个Mygroup3、然后就可以按下图添加自己的group进行代码块快捷键的设置了 idea设置自定义快捷键定义代码块 1、首先打开setting然后找到editor中的live templat…

RK3568驱动指南|第八篇 设备树插件-第84章设备树插件参考资料介绍

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

基于合宙Air700E的4G环境监测节点(温湿度、气压等数据),通过MQTT上传阿里云物联网平台

基于合宙Air700E的4G环境监测节点&#xff08;温度、湿度、气压等数据&#xff09;&#xff0c;通过MQTT上传阿里云物联网平台。 介绍 合宙Air700E 4G模块读取传感器&#xff08;温湿度、气压等&#xff09;数据并通过MQTT协议上传阿里云物联网平台&#xff0c;数据也会同时显…

最新9.9付费进群saas系统源码已修复定位及已知bug

距上版&#xff0c;优化一下功能&#xff0c;修复了已知问题及定位功能 1.九块九加群微信裂变人脉吃瓜宝妈同城相亲交友取图表情包 2.支持创建各种付费群&#xff0c;表情&#xff0c;吃瓜&#xff0c;创业&#xff0c;资源等等 3.支付对接第三方易支付&#xff0c;随便一家…

探索 WebRTC:数字世界的实时通信魔法

前言 在当今日常生活中&#xff0c;我们期望能够随时随地与朋友、同事或家人进行实时沟通。WebRTC&#xff08;Web实时通信&#xff09;技术就像一种魔法&#xff0c;让这些交流变得无比便捷&#xff0c;而且完全在浏览器中实现&#xff0c;无需下载任何额外应用或插件。 Web…

《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线

前言 使用 el-divider 背景为白色是没问题的。 但当背景换成其它颜色&#xff0c;问题就出现了&#xff01;&#xff01; 仔细看原来是两层&#xff0c;默认背景色是白色。 想着把背景色改为透明应该能用&#xff0c;结果发现背面是一条实线&#xff0c;难怪要用白色遮挡…不符…

python实现文件下载上传

一、文件下载到本地 import requests if __name__ __main__:response requests.get("https://dfcv-shop.oss-cn-hangzhou.aliyuncs.com/dfcv-shop0177bf6b34ee46c68be412d04654439c.jpg")local_filename "./dfcv-shop0177bf6b34ee46c68be412d04654439c.jpg&…

基于SpringBoot留守儿童爱心成长守护平台

1 引言 互联网技术的大面积普及使得网络平台成为人们获取信息的主要途径。网络时代的留守儿童们的生活自然与互联网息息相关&#xff0c;因此必然需要符合网络时代特征的新方式来对留守儿童提供帮助[1]。留守儿童平台作为向大众传递信息的一种方式&#xff0c;使得更多人能看到…

Codeforces Pinely Round 3 (Div. 1 + Div. 2)

A.Distinct Buttons(思维) 题意&#xff1a; 你在开始时站在点 ( 0 , 0 ) (0,0) (0,0)&#xff0c;同时&#xff0c;手上有一个遥控器&#xff0c;上面有四个按钮&#xff1a; U:移动到 ( x , y 1 ) (x, y 1) (x,y1)的位置 R:移动到 ( x 1 , y ) (x 1, y) (x1,y)的位置 …

关于“Python”的核心知识点整理大全43

目录 ​编辑 15.2.3 使2散点图并设置其样式 scatter_squares.py 15.2.4 使用 scatter()绘制一系列点 scatter_squares.py 15.2.5 自动计算数据 scatter_squares.py 15.2.6 删除数据点的轮廓 15.2.7 自定义颜色 15.2.8 使用颜色映射 scatter_squares.py 注意 15.2.9…

【ubuntu22.04安装mysql8并配置远程连接】

1.安装mysql 使用管理员权限以下命令安装mysql 1.更新仓库 sudo apt-get update sudo apt-get upgrade2.安装mysql sudo apt install mysql-server3.安装完成之后就可以使用命令 //查看mysql运行状态 sudo systemctl status mysql //登录mysql mysql -uroot -p 然后随便输入一个…

【NI-RIO入门】记录和监控数据

1.内部存储器 可以使用常规文件 I/O VI 在嵌入式程序中以编程方式访问实时控制器的内部存储。文件路径结构根据控制器运行的实时操作系统 (RTOS) 的不同而有所不同。 该文件路径语法记录在教程&#xff1a;使用实时目标上的文件路径 中。 可以通过在Measurement & Automati…

重定向和转发(sendRedirect()和getRequestDispatcher())

重定向 是什么 用户通过浏览器发送一个请求&#xff0c;Tomcat服务器接收这个请求&#xff0c;会给浏览器发送一个状态码302&#xff0c;并设置一个重定向的路径&#xff0c;浏览器如果接收到了这个302的状态码以后&#xff0c;就会去自动加载服务器设置的路径 一个页面跳转…

在小公司 “混” 了2年,我只认真做了5件事,如今顺利拿到字节 Offer

说下我的情况 是的&#xff0c;我一家小公司工作了整整两年时间&#xff0c;在入职这家公司前&#xff0c;也就是两年前&#xff0c;我就开始规划了我自己的人生&#xff0c;所以在两年时间里&#xff0c;我并未懈怠。 现如今&#xff0c;我已经跳槽到了字节&#xff0c;顺利…

Typora使用PicGo+Gitee上传图片

Typora使用PicGoGitee上传图片 1.下载PicGo(国内镜像) https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo/ 点击PicGo-Setup-2.3.0-x64.exe &#xff08;64位安装&#xff09; 然后打开gitee&#xff08;没注册先注册&#xff09; 2.下载node.js插件 https:/…

mysql原理--连接查询的成本

1.准备工作 连接查询至少是要有两个表的&#xff0c;只有一个 single_table 表是不够的&#xff0c;所以为了故事的顺利发展&#xff0c;我们直接构造一个和 single_table 表一模一样的 single_table2 表。为了简便起见&#xff0c;我们把 single_table 表称为 s1 表&#xff0…

USB启动盘是什么?要如何制作USB启动盘?本文都告诉你

如何制作USB启动盘 USB启动盘怎么制作&#xff1f;下面我们一起来看一看。注意&#xff1a;在执行以下步骤之前&#xff0c;请确保您备份了重要数据&#xff0c;因为这个过程会格式化USB驱动器&#xff0c;清除其上的所有数据。1. 选择操作系统镜像 首先&#xff0c;您需要…