围栏中心点

围栏中心点_第1张图片

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

      });
    },

 

你可能感兴趣的:(前端,javascript,开发语言)