当前位置: 首页 > news >正文

围栏中心点

后端返回的数据格式是
[{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/glDocEditormap: 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].pathsthis.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.lryc.cn/news/267578.html

相关文章:

  • 【go-zero】simple-admin框架 整合ent mysql批量插入 | ent批量插入mysql
  • 漏洞复现-泛微OA xmlrpcServlet接口任意文件读取漏洞(附漏洞检测脚本)
  • Flink CDC 1.0至3.0回忆录
  • c语言例题7
  • 【Linux驱动】最基本的驱动框架 | LED驱动
  • 前端---表单提交
  • [C#]Parallel使用
  • docker container 指定gpu设备
  • 时间Date
  • 前端---css 选择器
  • 【MybatisPlus快速入门】(2)SpringBoot整合MybatisPlus 之 标准数据层开发 代码示例
  • 如何将自建的ElasticSearch注册成一个服务
  • 360勒索病毒:了解最新变种.360,以及如何保护您的数据
  • vue使用ElementUI搭建精美页面入门
  • 【C->Cpp】深度解析#由C迈向Cpp(2)
  • WPS中如何根据身份证号生成出生日期并排序
  • 20231222给NanoPC-T4(RK3399)开发板的适配Android11的挖掘机方案并跑通AP6398SV
  • iClient for JavaScript如何以mvt矢量瓦片的形式加载数据服务
  • 全方位掌握卷积神经网络:理解原理 优化实践应用
  • 视频批量处理:随机分割方法,创新剪辑方式
  • Gaussian-Splatting 训练并导入Unity中
  • 账号和权限管理
  • 前端---表单标签
  • Matplotlib 绘制基本的图表
  • 【JavaScript】异步解决方案的发展历程
  • 前端性能优化三十四:花裤衩模板引入打包分析工具
  • 求职小程序列表基础配置-移动端通用列表模块配置教程(1)
  • 牛客设计模式
  • 从零构建tomcat环境
  • MySQL递归公用表表达式