vue-cesium缓冲区

最新推荐文章于 2023-11-10 10:56:59 发布

摇头的金丝猴

最新推荐文章于 2023-11-10 10:56:59 发布

阅读量696

点赞数 1

分类专栏： crsium三维文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61382303/article/details/128080832

版权

crsium三维专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上图

简单通过绘制点绘制线，绘制面的形式来添加缓存区

直接上全部代码

<!--
 * @Author: 
 * @Date: 2022-11-28 11:52:28
 * @Version: v1.0.1
 * @LastEditTime: 2022-11-28 11:52:28
 * @LastEditors: 
 * @Description: 缓冲区
-->
<template>
  <section class="layout-tool-template">
    <el-button type="primary" @click="initPointBuffer" size="mini">初始化点</el-button>
    <el-button type="primary" @click="initPolylineBuffer" size="mini" >初始化线</el-button>
    <el-button type="primary" @click="initPolygonBuffer" size="mini" >初始化面</el-button>
    <el-button type="primary" @click="clearEnt" size="mini">清空</el-button>
    
    
   
  </section>
</template>

<script setup>
// 初始化点
const initPointBuffer = ()=>{
  let point = [106.422638966289, 29.5698367125623];
  addPoint(point);
  let pointF = turf.point(point);
  let buffered = turf.buffer(pointF, 60, { units: 'meters' });
  let coordinates = buffered.geometry.coordinates;
  let points = coordinates[0];
  let degreesArray = pointsToDegreesArray(points);
  addBufferPolyogn(window.Cesium.Cartesian3.fromDegreesArray(degreesArray));

  //相机飞入角度
  window.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(106.422638966289, 29.5698367125623, 6000.0),
    orientation: {
      heading: Cesium.Math.toRadians(0.0), //默认朝北0度，顺时针方向，东是90度
      pitch: Cesium.Math.toRadians(-90), //默认朝下看-90,0为水平看，
      roll: Cesium.Math.toRadians(0) //默认0
    }
  });

}

//初始化线
const initPolylineBuffer  = ()=>{
  let points = [
    [106.425203158107, 29.5694914480581],
    [106.428808047023, 29.569230166027],
    [106.431661917416, 29.5692674920729],
    [106.434708906857, 29.5693048181049]
  ];
  let degreesArray = pointsToDegreesArray(points);
  addPolyline(window.Cesium.Cartesian3.fromDegreesArray(degreesArray));
  let polylineF = turf.lineString(points);
  let buffered = turf.buffer(polylineF, 30, { units: 'meters' });
  let coordinates = buffered.geometry.coordinates;
  points = coordinates[0];
  degreesArray = pointsToDegreesArray(points);
  addBufferPolyogn(window.Cesium.Cartesian3.fromDegreesArray(degreesArray));

}

//初始化面
const initPolygonBuffer = ()=>{
  let points = [
    [106.438549830166, 29.5701073244566],
    [106.440695597377, 29.5701073244566],
    [106.440738512722, 29.5688755679036],
    [106.438700033871, 29.5687262630581],
    [106.438034846035, 29.5690248725284],
    [106.438549830166, 29.5701073244566]
  ];
  let degreesArray = pointsToDegreesArray(points);
  addPolygon(window.Cesium.Cartesian3.fromDegreesArray(degreesArray));

  let polygonF = turf.polygon([points]);
  let buffered = turf.buffer(polygonF, 60, { units: 'meters' });
  let coordinates = buffered.geometry.coordinates;
  points = coordinates[0];
  degreesArray = pointsToDegreesArray(points);
  addBufferPolyogn(window.Cesium.Cartesian3.fromDegreesArray(degreesArray));

}
//添加点
const addPoint = (point)=>{
  window.viewer.entities.add({
    position: window.Cesium.Cartesian3.fromDegrees(point[0], point[1], 0),
    point: {
      pixelSize: 10,
      color: window.Cesium.Color.YELLOW,
      outlineWidth: 3,
      outlineColor: window.Cesium.Color.YELLOW.withAlpha(0.4),
    }
  });
}
//添加线
const addPolyline = (positions) =>{
  window.viewer.entities.add({
    polyline: {
      positions: positions,
      width: 2,
      material: Cesium.Color.YELLOW,
    }
  })
}
//添加面
const addPolygon = (positions) => {
  window.viewer.entities.add({
    polygon: {
      hierarchy: new window.Cesium.PolygonHierarchy(positions),
      material: window.Cesium.Color.RED.withAlpha(0.6),
      classificationType: window.Cesium.ClassificationType.BOTH
    },
    polyline: {
      positions: positions,
      width: 2,
      material: Cesium.Color.YELLOW.withAlpha(0.4),
    }

  })
}
//添加缓冲面
const addBufferPolyogn = (positions) => {
  window.viewer.entities.add({
    polygon: {
      hierarchy: new window.Cesium.PolygonHierarchy(positions),
      material: window.Cesium.Color.RED.withAlpha(0.6),
      classificationType: window.Cesium.ClassificationType.BOTH
    },
  });

}
const trigger  = ()=>{

}



// 格式转换
const pointsToDegreesArray = (points)=>{
  let degreesArray = [];
  points.map(item => {
    degreesArray.push(item[0]);
    degreesArray.push(item[1]);
  });
  return degreesArray;
}

const clearEnt = () => {
 
  window.viewer.entities.removeAll();
  window.viewer.dataSources.removeAll();
};


</script>

<style  scoped>
  .water-bartool{
    margin-top: 10px;
  }
      .waterInfo {
      font-size: 16px;
      font-weight: 600;
      color: red;
    }

  .warningHeight{
    color: red;
    font-weight: 600;
  }

  /deep/ .el-input{
    width: 120px;


  }
      .el-input__inner{
      color: #FFFFFF;
      text-align: center;
      background-color: rgba(38,38,38,0.5);
	    border: 1px solid rgba(110, 110, 110, 0.8);
    }
    .layout-tool-template{
      position:fixed;
      top: 100px;
      left: 300px;
      background-color: #fff;
    }
</style>