[JavaScript知识库]Vue + Cesium 缓冲分析实现

目录

一、缓冲分析效果图

二、部分关键代码

1、点缓冲分析

2、线缓冲分析

3、面缓冲分析

4、生成缓冲区

三、vue中调用

1、引入缓冲分析对应类

2、点线面的缓冲分析调用方法

四、缓冲分析类源码

一、缓冲分析效果图

二、部分关键代码

1、点缓冲分析

  /**
   * @author: 
   * @Date: 2022-03-15 18:00:49
   * @note: 注意事项
   * @description: 创建点的缓冲区
   */
  createPointBuffer() {
    this.addPoint()
    const coordinate = this.cartesianToLatlng(this.positions[0]).slice(0, 2);
    let pointF = turf.point(coordinate)
    let buffered = turf.buffer(pointF, this.radius)
    let coordinates = buffered.geometry.coordinates;
    let points = coordinates[0]
    let degreesArray = this.pointsToDegreesArray(points);
    this.createBuffer(Cesium.Cartesian3.fromDegreesArray(degreesArray))
  }

2、线缓冲分析

  /**
   * @author:
   * @Date: 2022-03-15 18:00:00
   * @note: 注意事项
   * @description: 创建线缓冲区
   */
  createLineBuffer() {
    var points = this.getLngLats(); // 坐标数组
    var polylineF = turf.lineString(points);
    var bufferd = turf.buffer(polylineF, this.radius);
    var coordinates = bufferd.geometry.coordinates;
    points = coordinates[0]
    var degreesArray = this.pointsToDegreesArray(points)
    this.createBuffer(Cesium.Cartesian3.fromDegreesArray(degreesArray))
  }

3、面缓冲分析

  /**
   * @author: 
   * @Date: 2022-03-15 17:57:41
   * @note: 注意事项
   * @description: 计算多边形缓冲区
   */  
    createPolygonBuffer() {
    var points = this.getLngLats(); // 坐标数组
    points.push(points[0])
    var polygonF = turf.polygon([points]);
    var bufferd = turf.buffer(polygonF, this.radius);
    var coordinates = bufferd.geometry.coordinates;
    points = coordinates[0]
    var degreesArray = this.pointsToDegreesArray(points)
    this.createBuffer(Cesium.Cartesian3.fromDegreesArray(degreesArray))
  }

4、生成缓冲区

  /**
   * @author: 
   * @Date: 2022-03-15 18:01:35
   * @note: 注意事项
   * @description: 生成缓冲区坐标数据
   */
  createBuffer(array) {
    const bufferPolygon = this.viewer.entities.add({
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(array),
        material: Cesium.Color.RED.withAlpha(0.5),
        classificationType: Cesium.ClassificationType.BOTH
      },
    });
    this.bufferEntities.push(bufferPolygon)
  }

三、vue中调用

1、引入缓冲分析对应类

import bufferAnalysisUtil from '../../../../bufferAnalysisUtil'

2、点线面的缓冲分析调用方法

    /**
     * @author: 
     * @Date: 2022-03-16 14:29:53
     * @note: 注意事项
     * @description: 缓冲分析
     */    
    bufferTool(){
      switch (this.bufferLabel) {
        case 'Point':
          m_bufferAnalysis.active({type:'Point',radius: Number(this.input) / 1000})
          break;
        case 'Line':
          m_bufferAnalysis.active({type:'Line',radius: Number(this.input) / 1000})
          break;
        case 'Polygon':
          m_bufferAnalysis.active({type:'Polygon',radius: Number(this.input) / 1000})
          break;
        case 'clear':
          m_bufferAnalysis.deactive()
          break;
      }
    },

四、缓冲分析类源码

下载：缓冲分析类 bufferAnalysisUtil