Vue + Cesium 缓冲分析实现

置顶向着太阳往前冲

已于 2022-03-18 21:37:25 修改

阅读量3k

点赞数 2

分类专栏： webgis Vue Cesium 文章标签： javascript cesium vue.js webgis

于 2022-03-16 15:44:39 首次发布

本文链接：https://blog.youkuaiyun.com/u013869554/article/details/123526930

版权

Cesium 同时被 3 个专栏收录

15 篇文章

订阅专栏

webgis

14 篇文章

订阅专栏

Vue

13 篇文章

订阅专栏

这篇博客详细介绍了如何在Cesium中进行缓冲分析，包括点、线、面的缓冲区创建，并提供了关键代码示例。通过Vue组件调用，实现了不同类型的缓冲分析功能，辅助地理空间数据的处理和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、缓冲分析效果图

二、部分关键代码

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;
      }
    },