直接上图
简单通过绘制点绘制线,绘制面的形式来添加缓存区
直接上全部代码
<!--
* @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>