1.对toolbar代码进行拆分；2.修复bug；
This commit is contained in:
parent
8e6a168c37
commit
816f788240
|
|
@ -0,0 +1,16 @@
|
||||||
|
import * as Cesium from "cesium";
|
||||||
|
|
||||||
|
export default class FeaturePrimitive extends Cesium.Primitive {
|
||||||
|
|
||||||
|
properties = new Cesium.PropertyBag()
|
||||||
|
constructor(options, properties) {
|
||||||
|
super(options);
|
||||||
|
if(properties && properties instanceof Object) {
|
||||||
|
for (const key in properties) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(properties, key)) {
|
||||||
|
properties.addProperty(key, properties[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -67,7 +67,7 @@ export const useEventBus = (viewer) => {
|
||||||
if (typeof event === 'string') {
|
if (typeof event === 'string') {
|
||||||
// 触发自定义事件
|
// 触发自定义事件
|
||||||
// mitt.emit(type, event), event 是 payload
|
// mitt.emit(type, event), event 是 payload
|
||||||
cache.customEmitter.emit(event, args) // 将 ...args 作为单个数组 payload 传递
|
cache.customEmitter.emit(event, ...args) // 将 ...args 作为单个数组 payload 传递
|
||||||
} else if (Object.values(ScreenSpaceEventType).includes(event)) {
|
} else if (Object.values(ScreenSpaceEventType).includes(event)) {
|
||||||
// 触发屏幕空间事件 (触发所有监听器，无模式检查)
|
// 触发屏幕空间事件 (触发所有监听器，无模式检查)
|
||||||
// 屏幕空间事件通常只有一个参数
|
// 屏幕空间事件通常只有一个参数
|
||||||
|
|
|
||||||
|
|
@ -1,589 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="toolbar-box">
|
|
||||||
<div class="toolbar-title" :class="{ 'open': isOpen }" :title="isOpen ? '收起工具栏' : '展开工具栏'" @click="isOpen = !isOpen">
|
|
||||||
<span>工具栏</span>
|
|
||||||
<el-icon v-if="isOpen" style="font-size: 18px;"><DArrowRight /></el-icon>
|
|
||||||
<el-icon v-if="!isOpen" style="font-size: 28px;"><DArrowLeft /></el-icon>
|
|
||||||
</div>
|
|
||||||
<div class="toolbar-content">
|
|
||||||
<div v-if="isOpen" class="toolbar-item" v-for="(item, index) in options" :key="index" :title="item.label" @click="bus.emit(`toolbar_${item.name}`)">
|
|
||||||
<img :src="item.icon" alt="" />
|
|
||||||
<span class="toolbar-label">{{ item.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import * as Cesium from 'cesium';
|
|
||||||
import DialogPropertyGrid from './DialogPropertyGrid';
|
|
||||||
|
|
||||||
import {
|
|
||||||
useDrawTool,
|
|
||||||
createCurvePolygonPositions,
|
|
||||||
createStraightArrowPositions,
|
|
||||||
createWideArrowPositions,
|
|
||||||
createAttackArrowPositions,
|
|
||||||
createDoubleArrowPositions
|
|
||||||
} from '@/components/CesiumMap/mixins/useDrawTool';
|
|
||||||
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
|
|
||||||
import { useMeasureTool, getArea, getBoundingCenterCoordinate } from '@/components/CesiumMap/mixins/useMeasureTool';
|
|
||||||
import { setPropertyData } from './DialogPropertyGrid/property';
|
|
||||||
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
|
|
||||||
|
|
||||||
import toolbarLocationIcon from '@/assets/icons/toolbar_location.png';
|
|
||||||
import toolbarPolylineIcon from '@/assets/icons/toolbar_polyline.png';
|
|
||||||
import toolbarPolygonIcon from '@/assets/icons/toolbar_polygon.png';
|
|
||||||
import toolbarCurvePolygonIcon from '@/assets/icons/toolbar_curve_polygon.png';
|
|
||||||
import toolbarStraightArrowIcon from '@/assets/icons/toolbar_straight_arrow.png';
|
|
||||||
import toolbarWideArrowIcon from '@/assets/icons/toolbar_wide_arrow.png';
|
|
||||||
import toolbarAttackArrowIcon from '@/assets/icons/toolbar_attack_arrow.png';
|
|
||||||
import toolbarDoubleArrowIcon from '@/assets/icons/toolbar_double_arrow.png';
|
|
||||||
import toolbarMeasureDistanceIcon from '@/assets/icons/toolbar_measure_distance.png';
|
|
||||||
import toolbarMeasureAreaIcon from '@/assets/icons/toolbar_measure_area.png';
|
|
||||||
import toolbarWarehouseIcon from '@/assets/icons/toolbar_warehouse.png';
|
|
||||||
import toolbarWatersourceIcon from '@/assets/icons/toolbar_watersource.png';
|
|
||||||
import toolbarClearIcon from '@/assets/icons/toolbar_clear.png';
|
|
||||||
|
|
||||||
import drawLocationIcon from '@/assets/icons/draw_location.png';
|
|
||||||
import fireWarehouseIcon from '@/assets/icons/fire_warehouse.png';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
viewer: {
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初始化地图实例
|
|
||||||
let viewer = null
|
|
||||||
let drawTool = null
|
|
||||||
let measureTool = null
|
|
||||||
let bus = null
|
|
||||||
let toolbarLayer = null
|
|
||||||
let primitiveList = []
|
|
||||||
const isOpen = ref(false)
|
|
||||||
const options = ref([{
|
|
||||||
name: 'location',
|
|
||||||
label: '位置',
|
|
||||||
icon: toolbarLocationIcon
|
|
||||||
}, {
|
|
||||||
name: 'polyline',
|
|
||||||
label: '线',
|
|
||||||
icon: toolbarPolylineIcon
|
|
||||||
}, {
|
|
||||||
name: 'polygon',
|
|
||||||
label: '面',
|
|
||||||
icon: toolbarPolygonIcon
|
|
||||||
}, {
|
|
||||||
name: 'curvePolygon',
|
|
||||||
label: '曲面',
|
|
||||||
icon: toolbarCurvePolygonIcon
|
|
||||||
}, {
|
|
||||||
name: 'straightArrow',
|
|
||||||
label: '直箭头',
|
|
||||||
icon: toolbarStraightArrowIcon
|
|
||||||
}, {
|
|
||||||
name: 'wideArrow',
|
|
||||||
label: '宽箭头',
|
|
||||||
icon: toolbarWideArrowIcon
|
|
||||||
}, {
|
|
||||||
name: 'attackArrow',
|
|
||||||
label: '攻击箭头',
|
|
||||||
icon: toolbarAttackArrowIcon
|
|
||||||
}, {
|
|
||||||
name: 'doubleArrow',
|
|
||||||
label: '双箭头',
|
|
||||||
icon: toolbarDoubleArrowIcon
|
|
||||||
}, {
|
|
||||||
name: 'measureDistance',
|
|
||||||
label: '测距',
|
|
||||||
icon: toolbarMeasureDistanceIcon
|
|
||||||
}, {
|
|
||||||
name: 'measureArea',
|
|
||||||
label: '测面',
|
|
||||||
icon: toolbarMeasureAreaIcon
|
|
||||||
}, {
|
|
||||||
name: 'warehouse',
|
|
||||||
label: '仓库',
|
|
||||||
icon: toolbarWarehouseIcon
|
|
||||||
}, {
|
|
||||||
name: 'watersource',
|
|
||||||
label: '水源',
|
|
||||||
icon: toolbarWatersourceIcon
|
|
||||||
}, {
|
|
||||||
name: 'clear',
|
|
||||||
label: '清除',
|
|
||||||
icon: toolbarClearIcon
|
|
||||||
}])
|
|
||||||
|
|
||||||
// 绘制位置
|
|
||||||
const drawLocation = (params) => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawPoint().then(position => {
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
position,
|
|
||||||
billboard: {
|
|
||||||
image: params?.icon || drawLocationIcon,
|
|
||||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制线
|
|
||||||
const drawPolyline = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawPolyline().then((positions) => {
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions,
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制面
|
|
||||||
const drawPolygon = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawPolygon().then((positions) => {
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions:[...positions, positions[0]], // 闭合多边形
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
polygon: {
|
|
||||||
hierarchy: positions,
|
|
||||||
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制曲面
|
|
||||||
const drawCurvePolygon = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawCurvePolygon().then((positions) => {
|
|
||||||
if (positions.length < 2 || !positions[0]) return
|
|
||||||
|
|
||||||
const fullPositions = createCurvePolygonPositions(positions)
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions: fullPositions,
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
polygon: {
|
|
||||||
hierarchy: fullPositions,
|
|
||||||
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制直箭头
|
|
||||||
const drawStraightArrow = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawStraightArrow().then((positions) => {
|
|
||||||
if (!positions[0] || !positions[1]) return
|
|
||||||
|
|
||||||
const fullPositions = createStraightArrowPositions(positions)
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions: [...fullPositions, fullPositions[0]],
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
polygon: {
|
|
||||||
hierarchy: fullPositions,
|
|
||||||
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制宽箭头
|
|
||||||
const drawWideArrow = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawWideArrow().then((positions) => {
|
|
||||||
if (positions.length < 2) return
|
|
||||||
|
|
||||||
const fullPositions = createWideArrowPositions(positions)
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions: [...fullPositions, fullPositions[0]],
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
polygon: {
|
|
||||||
hierarchy: fullPositions,
|
|
||||||
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制攻击箭头
|
|
||||||
const drawAttackArrow = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawAttackArrow().then((positions) => {
|
|
||||||
if (positions.length < 3) return
|
|
||||||
|
|
||||||
const fullPositions = createAttackArrowPositions(positions)
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions: [...fullPositions, fullPositions[0]],
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
polygon: {
|
|
||||||
hierarchy: fullPositions,
|
|
||||||
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制双箭头
|
|
||||||
const drawDoubleArrow = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawDoubleArrow().then((positions) => {
|
|
||||||
if (positions.length < 3) return
|
|
||||||
|
|
||||||
const fullPositions = createDoubleArrowPositions(positions)
|
|
||||||
toolbarLayer?.entities.add({
|
|
||||||
polyline: {
|
|
||||||
positions: [...fullPositions, fullPositions[0]],
|
|
||||||
width: 2,
|
|
||||||
material: Cesium.Color.YELLOW,
|
|
||||||
clampToGround: true,
|
|
||||||
},
|
|
||||||
polygon: {
|
|
||||||
hierarchy: fullPositions,
|
|
||||||
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
|
||||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 平面距离测量的绘制
|
|
||||||
const drawMeasureDistance = () => {
|
|
||||||
if(!measureTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
measureTool.distance();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 平面面积测量的绘制
|
|
||||||
const drawMeasureArea = () => {
|
|
||||||
if(!measureTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
measureTool.area();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制水源地（面）
|
|
||||||
const drawWatersource = () => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawTool.abort();
|
|
||||||
measureTool.abort();
|
|
||||||
drawTool.drawPolygon().then((positions) => {
|
|
||||||
// 计算中心点坐标
|
|
||||||
const center = getBoundingCenterCoordinate(positions);
|
|
||||||
|
|
||||||
// // 添加水源地实体
|
|
||||||
// const entity = toolbarLayer?.entities.add({
|
|
||||||
// // polyline: {
|
|
||||||
// // positions:[...positions, positions[0]], // 闭合多边形
|
|
||||||
// // width: 2,
|
|
||||||
// // material: Cesium.Color.BLUE,
|
|
||||||
// // },
|
|
||||||
// polygon: {
|
|
||||||
// hierarchy: positions,
|
|
||||||
// material: riverMaterial,
|
|
||||||
// // material: Cesium.Color.BLUE.withAlpha(0.5),
|
|
||||||
// },
|
|
||||||
// properties: {
|
|
||||||
// __type: 'watersource',
|
|
||||||
// name: '',
|
|
||||||
// area: getArea(positions).toFixed(2), // 面积
|
|
||||||
// longitude: center[0].toFixed(6),
|
|
||||||
// latitude: center[1].toFixed(6),
|
|
||||||
// volume: 0 // 储水量，默认0
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
const waterMaterial = new Cesium.Material({
|
|
||||||
fabric: {
|
|
||||||
type: 'Water',
|
|
||||||
uniforms: {
|
|
||||||
normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
|
|
||||||
baseWaterColor: new Cesium.Color(
|
|
||||||
64 / 255.0,
|
|
||||||
157 / 255.0,
|
|
||||||
253 / 255.0,
|
|
||||||
0.6
|
|
||||||
),
|
|
||||||
// blendColor: new Cesium.Color(0.0, 0.5, 1.0, 1.0),
|
|
||||||
// frequency: 10.0,
|
|
||||||
// animationSpeed: 0.05,
|
|
||||||
// amplitude: 10,
|
|
||||||
// specularIntensity: 0.5,
|
|
||||||
// alpha: 0.1
|
|
||||||
frequency: 1000.0,
|
|
||||||
animationSpeed: 0.1,
|
|
||||||
amplitude: 10,
|
|
||||||
specularIntensity: 1.5,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const waterPrimitive = new FeatureGroundPrimitive({
|
|
||||||
geometryInstances: new Cesium.GeometryInstance({
|
|
||||||
geometry: new Cesium.PolygonGeometry({
|
|
||||||
polygonHierarchy: new Cesium.PolygonHierarchy(positions),
|
|
||||||
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|
||||||
material: waterMaterial,
|
|
||||||
})
|
|
||||||
}, {
|
|
||||||
__type: 'watersource',
|
|
||||||
name: '',
|
|
||||||
area: getArea(positions).toFixed(2), // 面积
|
|
||||||
longitude: center[0].toFixed(6),
|
|
||||||
latitude: center[1].toFixed(6),
|
|
||||||
volume: 0 // 储水量，默认0
|
|
||||||
});
|
|
||||||
|
|
||||||
// 将 Primitive 添加到场景中
|
|
||||||
viewer.scene.primitives.add(waterPrimitive);
|
|
||||||
primitiveList.push(waterPrimitive);
|
|
||||||
|
|
||||||
// 编辑属性
|
|
||||||
DialogPropertyGrid.show(waterPrimitive, (data) => {
|
|
||||||
// console.log('确定按钮被点击，最新表单数据:', formData);
|
|
||||||
// 更新实体属性
|
|
||||||
setPropertyData(data, waterPrimitive);
|
|
||||||
// 调用接口
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绘制仓库（点）
|
|
||||||
const drawWarehouse = (params) => {
|
|
||||||
if(!drawTool) {
|
|
||||||
console.error('绘制工具未初始化');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawTool.abort();
|
|
||||||
drawTool.drawPoint().then((position) => {
|
|
||||||
// 计算中心点坐标
|
|
||||||
const center = Cesium.Cartographic.fromCartesian(position);
|
|
||||||
|
|
||||||
const entity = toolbarLayer?.entities.add({
|
|
||||||
position,
|
|
||||||
billboard: {
|
|
||||||
image: params?.icon || fireWarehouseIcon,
|
|
||||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
||||||
pixelOffset: new Cesium.Cartesian2(0, params?.icon ? 0 : 18), // 可选偏移
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
__type: 'warehouse',
|
|
||||||
name: '',
|
|
||||||
longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
|
|
||||||
latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 编辑属性
|
|
||||||
DialogPropertyGrid.show(entity, (data) => {
|
|
||||||
// console.log('确定按钮被点击，最新表单数据:', formData);
|
|
||||||
// 更新实体属性
|
|
||||||
setPropertyData(data, entity);
|
|
||||||
// 调用接口
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 清除工具栏上的所有绘制实体
|
|
||||||
const toolbarClear = () => {
|
|
||||||
if (!viewer || !toolbarLayer) return;
|
|
||||||
|
|
||||||
// 清除所有绘制的实体
|
|
||||||
toolbarLayer.entities.removeAll();
|
|
||||||
// 清除所有绘制的图元
|
|
||||||
for (let index = primitiveList.length - 1; index >= 0; index--) {
|
|
||||||
const p = primitiveList[index];
|
|
||||||
if(viewer.scene.primitives.contains(p)) {
|
|
||||||
viewer.scene.primitives.remove(p);
|
|
||||||
primitiveList.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
measureTool?.clear();
|
|
||||||
|
|
||||||
// 清除当前测量
|
|
||||||
if (measureTool) {
|
|
||||||
measureTool.abort();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除当前绘制
|
|
||||||
if (drawTool) {
|
|
||||||
drawTool.abort();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(() => props.viewer, (v) => {
|
|
||||||
if (v) {
|
|
||||||
viewer = v;
|
|
||||||
|
|
||||||
// 添加绘制图层
|
|
||||||
toolbarLayer = new Cesium.CustomDataSource('toolbarLayer');
|
|
||||||
viewer.dataSources.add(toolbarLayer);
|
|
||||||
|
|
||||||
drawTool = useDrawTool(viewer);
|
|
||||||
measureTool = useMeasureTool(viewer);
|
|
||||||
// 绑定事件
|
|
||||||
bus = useEventBus(viewer);
|
|
||||||
bus.on('toolbar_location', drawLocation);
|
|
||||||
bus.on('toolbar_polyline', drawPolyline);
|
|
||||||
bus.on('toolbar_polygon', drawPolygon);
|
|
||||||
bus.on('toolbar_curvePolygon', drawCurvePolygon);
|
|
||||||
bus.on('toolbar_straightArrow', drawStraightArrow);
|
|
||||||
bus.on('toolbar_wideArrow', drawWideArrow);
|
|
||||||
bus.on('toolbar_attackArrow', drawAttackArrow);
|
|
||||||
bus.on('toolbar_doubleArrow', drawDoubleArrow);
|
|
||||||
bus.on('toolbar_measureDistance', drawMeasureDistance);
|
|
||||||
bus.on('toolbar_measureArea', drawMeasureArea);
|
|
||||||
bus.on('toolbar_watersource', drawWatersource);
|
|
||||||
bus.on('toolbar_warehouse', drawWarehouse);
|
|
||||||
bus.on('toolbar_clear', toolbarClear);
|
|
||||||
}
|
|
||||||
}, { immediate: true });
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.toolbar-box {
|
|
||||||
.toolbar-title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: #8EF8FF;
|
|
||||||
background-color: rgba(7, 111, 111, 0.7);
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 4px 4px 0;
|
|
||||||
|
|
||||||
&.open {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.toolbar-content {
|
|
||||||
max-height: 420px;
|
|
||||||
font-size: 12px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
// justify-content: space-around;
|
|
||||||
|
|
||||||
.toolbar-item {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
color: #8EF8FF;
|
|
||||||
background-color: rgba(7, 111, 111, 0.7);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 4px 4px 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(255, 215, 0, 0.5);
|
|
||||||
}
|
|
||||||
.toolbar-label {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-all;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
<template>
|
||||||
|
<div class="toolbar-box">
|
||||||
|
<div class="toolbar-title" :class="{ 'open': isOpen }" :title="isOpen ? '收起工具栏' : '展开工具栏'" @click="isOpen = !isOpen">
|
||||||
|
<span>工具栏</span>
|
||||||
|
<el-icon v-if="isOpen" style="font-size: 18px;"><DArrowRight /></el-icon>
|
||||||
|
<el-icon v-if="!isOpen" style="font-size: 28px;"><DArrowLeft /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-content">
|
||||||
|
<div v-if="isOpen" class="toolbar-item" v-for="(item, index) in options" :key="index" :title="item.label" @click="bus.emit(`toolbar_${item.name}`, params)">
|
||||||
|
<img :src="item.icon" alt="" />
|
||||||
|
<span class="toolbar-label">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as Cesium from 'cesium';
|
||||||
|
|
||||||
|
import { useDrawTool } from '@/components/CesiumMap/mixins/useDrawTool';
|
||||||
|
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
|
||||||
|
import { useMeasureTool } from '@/components/CesiumMap/mixins/useMeasureTool';
|
||||||
|
import {
|
||||||
|
drawLocation,
|
||||||
|
drawPolyline,
|
||||||
|
drawPolygon,
|
||||||
|
drawCurvePolygon,
|
||||||
|
drawStraightArrow,
|
||||||
|
drawWideArrow,
|
||||||
|
drawAttackArrow,
|
||||||
|
drawDoubleArrow,
|
||||||
|
drawMeasureDistance,
|
||||||
|
drawMeasureArea
|
||||||
|
} from './baseDraw'
|
||||||
|
import {
|
||||||
|
drawWatersource,
|
||||||
|
drawWarehouse
|
||||||
|
} from './forestFireDraw'
|
||||||
|
|
||||||
|
import toolbarLocationIcon from '@/assets/icons/toolbar_location.png';
|
||||||
|
import toolbarPolylineIcon from '@/assets/icons/toolbar_polyline.png';
|
||||||
|
import toolbarPolygonIcon from '@/assets/icons/toolbar_polygon.png';
|
||||||
|
import toolbarCurvePolygonIcon from '@/assets/icons/toolbar_curve_polygon.png';
|
||||||
|
import toolbarStraightArrowIcon from '@/assets/icons/toolbar_straight_arrow.png';
|
||||||
|
import toolbarWideArrowIcon from '@/assets/icons/toolbar_wide_arrow.png';
|
||||||
|
import toolbarAttackArrowIcon from '@/assets/icons/toolbar_attack_arrow.png';
|
||||||
|
import toolbarDoubleArrowIcon from '@/assets/icons/toolbar_double_arrow.png';
|
||||||
|
import toolbarMeasureDistanceIcon from '@/assets/icons/toolbar_measure_distance.png';
|
||||||
|
import toolbarMeasureAreaIcon from '@/assets/icons/toolbar_measure_area.png';
|
||||||
|
import toolbarWarehouseIcon from '@/assets/icons/toolbar_warehouse.png';
|
||||||
|
import toolbarWatersourceIcon from '@/assets/icons/toolbar_watersource.png';
|
||||||
|
import toolbarClearIcon from '@/assets/icons/toolbar_clear.png';
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
viewer: {
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化地图实例
|
||||||
|
let viewer = null
|
||||||
|
let drawTool = null
|
||||||
|
let measureTool = null
|
||||||
|
let bus = null
|
||||||
|
let toolbarLayer = null
|
||||||
|
let primitiveList = []
|
||||||
|
let params = {}
|
||||||
|
const isOpen = ref(false)
|
||||||
|
const options = ref([{
|
||||||
|
name: 'location',
|
||||||
|
label: '位置',
|
||||||
|
icon: toolbarLocationIcon
|
||||||
|
}, {
|
||||||
|
name: 'polyline',
|
||||||
|
label: '线',
|
||||||
|
icon: toolbarPolylineIcon
|
||||||
|
}, {
|
||||||
|
name: 'polygon',
|
||||||
|
label: '面',
|
||||||
|
icon: toolbarPolygonIcon
|
||||||
|
}, {
|
||||||
|
name: 'curvePolygon',
|
||||||
|
label: '曲面',
|
||||||
|
icon: toolbarCurvePolygonIcon
|
||||||
|
}, {
|
||||||
|
name: 'straightArrow',
|
||||||
|
label: '直箭头',
|
||||||
|
icon: toolbarStraightArrowIcon
|
||||||
|
}, {
|
||||||
|
name: 'wideArrow',
|
||||||
|
label: '宽箭头',
|
||||||
|
icon: toolbarWideArrowIcon
|
||||||
|
}, {
|
||||||
|
name: 'attackArrow',
|
||||||
|
label: '攻击箭头',
|
||||||
|
icon: toolbarAttackArrowIcon
|
||||||
|
}, {
|
||||||
|
name: 'doubleArrow',
|
||||||
|
label: '双箭头',
|
||||||
|
icon: toolbarDoubleArrowIcon
|
||||||
|
}, {
|
||||||
|
name: 'measureDistance',
|
||||||
|
label: '测距',
|
||||||
|
icon: toolbarMeasureDistanceIcon
|
||||||
|
}, {
|
||||||
|
name: 'measureArea',
|
||||||
|
label: '测面',
|
||||||
|
icon: toolbarMeasureAreaIcon
|
||||||
|
}, {
|
||||||
|
name: 'warehouse',
|
||||||
|
label: '仓库',
|
||||||
|
icon: toolbarWarehouseIcon
|
||||||
|
}, {
|
||||||
|
name: 'watersource',
|
||||||
|
label: '水源',
|
||||||
|
icon: toolbarWatersourceIcon
|
||||||
|
}, {
|
||||||
|
name: 'clear',
|
||||||
|
label: '清除',
|
||||||
|
icon: toolbarClearIcon
|
||||||
|
}])
|
||||||
|
|
||||||
|
// 清除工具栏上的所有绘制实体
|
||||||
|
const toolbarClear = () => {
|
||||||
|
if (!viewer || !toolbarLayer) return;
|
||||||
|
|
||||||
|
// 清除所有绘制的实体
|
||||||
|
toolbarLayer.entities.removeAll();
|
||||||
|
// 清除所有绘制的图元
|
||||||
|
for (let index = primitiveList.length - 1; index >= 0; index--) {
|
||||||
|
const p = primitiveList[index];
|
||||||
|
if(viewer.scene.primitives.contains(p)) {
|
||||||
|
viewer.scene.primitives.remove(p);
|
||||||
|
primitiveList.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
measureTool?.clear();
|
||||||
|
|
||||||
|
// 清除当前测量
|
||||||
|
if (measureTool) {
|
||||||
|
measureTool.abort();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除当前绘制
|
||||||
|
if (drawTool) {
|
||||||
|
drawTool.abort();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(() => props.viewer, (v) => {
|
||||||
|
if (v) {
|
||||||
|
viewer = v;
|
||||||
|
|
||||||
|
// 添加绘制图层
|
||||||
|
toolbarLayer = new Cesium.CustomDataSource('toolbarLayer');
|
||||||
|
viewer.dataSources.add(toolbarLayer);
|
||||||
|
|
||||||
|
drawTool = useDrawTool(viewer);
|
||||||
|
measureTool = useMeasureTool(viewer);
|
||||||
|
// 绑定事件
|
||||||
|
params = {
|
||||||
|
drawTool,
|
||||||
|
measureTool,
|
||||||
|
viewer,
|
||||||
|
toolbarLayer,
|
||||||
|
primitiveList,
|
||||||
|
}
|
||||||
|
bus = useEventBus(viewer);
|
||||||
|
bus.on('toolbar_location', drawLocation);
|
||||||
|
bus.on('toolbar_polyline', drawPolyline);
|
||||||
|
bus.on('toolbar_polygon', drawPolygon);
|
||||||
|
bus.on('toolbar_curvePolygon', drawCurvePolygon);
|
||||||
|
bus.on('toolbar_straightArrow', drawStraightArrow);
|
||||||
|
bus.on('toolbar_wideArrow', drawWideArrow);
|
||||||
|
bus.on('toolbar_attackArrow', drawAttackArrow);
|
||||||
|
bus.on('toolbar_doubleArrow', drawDoubleArrow);
|
||||||
|
bus.on('toolbar_measureDistance', drawMeasureDistance);
|
||||||
|
bus.on('toolbar_measureArea', drawMeasureArea);
|
||||||
|
bus.on('toolbar_watersource', drawWatersource);
|
||||||
|
bus.on('toolbar_warehouse', drawWarehouse);
|
||||||
|
bus.on('toolbar_clear', toolbarClear);
|
||||||
|
}
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.toolbar-box {
|
||||||
|
.toolbar-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #8EF8FF;
|
||||||
|
background-color: rgba(7, 111, 111, 0.7);
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 4px 4px 0;
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toolbar-content {
|
||||||
|
max-height: 420px;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
// justify-content: space-around;
|
||||||
|
|
||||||
|
.toolbar-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: #8EF8FF;
|
||||||
|
background-color: rgba(7, 111, 111, 0.7);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 4px 4px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
.toolbar-label {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,262 @@
|
||||||
|
import * as Cesium from 'cesium'
|
||||||
|
import {
|
||||||
|
createCurvePolygonPositions,
|
||||||
|
createStraightArrowPositions,
|
||||||
|
createWideArrowPositions,
|
||||||
|
createAttackArrowPositions,
|
||||||
|
createDoubleArrowPositions
|
||||||
|
} from '@/components/CesiumMap/mixins/useDrawTool';
|
||||||
|
import drawLocationIcon from '@/assets/icons/draw_location.png';
|
||||||
|
|
||||||
|
// 绘制位置
|
||||||
|
const drawLocation = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawPoint().then(position => {
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
position,
|
||||||
|
billboard: {
|
||||||
|
image: drawLocationIcon,
|
||||||
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制线
|
||||||
|
const drawPolyline = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawPolyline().then((positions) => {
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions,
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制面
|
||||||
|
const drawPolygon = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawPolygon().then((positions) => {
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions:[...positions, positions[0]], // 闭合多边形
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
hierarchy: positions,
|
||||||
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制曲面
|
||||||
|
const drawCurvePolygon = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawCurvePolygon().then((positions) => {
|
||||||
|
if (positions.length < 2 || !positions[0]) return
|
||||||
|
|
||||||
|
const fullPositions = createCurvePolygonPositions(positions)
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions: fullPositions,
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
hierarchy: fullPositions,
|
||||||
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制直箭头
|
||||||
|
const drawStraightArrow = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawStraightArrow().then((positions) => {
|
||||||
|
if (!positions[0] || !positions[1]) return
|
||||||
|
|
||||||
|
const fullPositions = createStraightArrowPositions(positions)
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions: [...fullPositions, fullPositions[0]],
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
hierarchy: fullPositions,
|
||||||
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制宽箭头
|
||||||
|
const drawWideArrow = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawWideArrow().then((positions) => {
|
||||||
|
if (positions.length < 2) return
|
||||||
|
|
||||||
|
const fullPositions = createWideArrowPositions(positions)
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions: [...fullPositions, fullPositions[0]],
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
hierarchy: fullPositions,
|
||||||
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制攻击箭头
|
||||||
|
const drawAttackArrow = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawAttackArrow().then((positions) => {
|
||||||
|
if (positions.length < 3) return
|
||||||
|
|
||||||
|
const fullPositions = createAttackArrowPositions(positions)
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions: [...fullPositions, fullPositions[0]],
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
hierarchy: fullPositions,
|
||||||
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制双箭头
|
||||||
|
const drawDoubleArrow = (options) => {
|
||||||
|
const { toolbarLayer, drawTool, measureTool } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawDoubleArrow().then((positions) => {
|
||||||
|
if (positions.length < 3) return
|
||||||
|
|
||||||
|
const fullPositions = createDoubleArrowPositions(positions)
|
||||||
|
toolbarLayer?.entities.add({
|
||||||
|
polyline: {
|
||||||
|
positions: [...fullPositions, fullPositions[0]],
|
||||||
|
width: 2,
|
||||||
|
material: Cesium.Color.YELLOW,
|
||||||
|
clampToGround: true,
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
hierarchy: fullPositions,
|
||||||
|
material: Cesium.Color.YELLOW.withAlpha(0.5),
|
||||||
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 平面距离测量的绘制
|
||||||
|
const drawMeasureDistance = (options) => {
|
||||||
|
const { drawTool, measureTool } = options;
|
||||||
|
if(!measureTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
measureTool.distance();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 平面面积测量的绘制
|
||||||
|
const drawMeasureArea = (options) => {
|
||||||
|
const { drawTool, measureTool } = options;
|
||||||
|
if(!measureTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
measureTool.area();
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
drawLocation,
|
||||||
|
drawPolyline,
|
||||||
|
drawPolygon,
|
||||||
|
drawCurvePolygon,
|
||||||
|
drawStraightArrow,
|
||||||
|
drawWideArrow,
|
||||||
|
drawAttackArrow,
|
||||||
|
drawDoubleArrow,
|
||||||
|
drawMeasureDistance,
|
||||||
|
drawMeasureArea
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
import * as Cesium from 'cesium'
|
||||||
|
import DialogPropertyGrid from '../DialogPropertyGrid';
|
||||||
|
import { setPropertyData } from '../DialogPropertyGrid/property';
|
||||||
|
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
|
||||||
|
import { getArea, getBoundingCenterCoordinate } from '@/components/CesiumMap/mixins/useMeasureTool';
|
||||||
|
|
||||||
|
import fireWarehouseIcon from '@/assets/icons/fire_warehouse.png';
|
||||||
|
|
||||||
|
// 绘制水源地（面）
|
||||||
|
const drawWatersource = (options) => {
|
||||||
|
const { drawTool, measureTool, viewer, primitiveList } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawPolygon().then((positions) => {
|
||||||
|
// 计算中心点坐标
|
||||||
|
const center = getBoundingCenterCoordinate(positions);
|
||||||
|
|
||||||
|
// // 添加水源地实体
|
||||||
|
// const entity = toolbarLayer?.entities.add({
|
||||||
|
// // polyline: {
|
||||||
|
// // positions:[...positions, positions[0]], // 闭合多边形
|
||||||
|
// // width: 2,
|
||||||
|
// // material: Cesium.Color.BLUE,
|
||||||
|
// // },
|
||||||
|
// polygon: {
|
||||||
|
// hierarchy: positions,
|
||||||
|
// material: riverMaterial,
|
||||||
|
// // material: Cesium.Color.BLUE.withAlpha(0.5),
|
||||||
|
// },
|
||||||
|
// properties: {
|
||||||
|
// __type: 'watersource',
|
||||||
|
// name: '',
|
||||||
|
// area: getArea(positions).toFixed(2), // 面积
|
||||||
|
// longitude: center[0].toFixed(6),
|
||||||
|
// latitude: center[1].toFixed(6),
|
||||||
|
// volume: 0 // 储水量，默认0
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
const waterMaterial = new Cesium.Material({
|
||||||
|
fabric: {
|
||||||
|
type: 'Water',
|
||||||
|
uniforms: {
|
||||||
|
normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
|
||||||
|
baseWaterColor: new Cesium.Color(
|
||||||
|
64 / 255.0,
|
||||||
|
157 / 255.0,
|
||||||
|
253 / 255.0,
|
||||||
|
0.6
|
||||||
|
),
|
||||||
|
// blendColor: new Cesium.Color(0.0, 0.5, 1.0, 1.0),
|
||||||
|
// frequency: 10.0,
|
||||||
|
// animationSpeed: 0.05,
|
||||||
|
// amplitude: 10,
|
||||||
|
// specularIntensity: 0.5,
|
||||||
|
// alpha: 0.1
|
||||||
|
frequency: 1000.0,
|
||||||
|
animationSpeed: 0.1,
|
||||||
|
amplitude: 10,
|
||||||
|
specularIntensity: 1.5,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const waterPrimitive = new FeatureGroundPrimitive({
|
||||||
|
geometryInstances: new Cesium.GeometryInstance({
|
||||||
|
geometry: new Cesium.PolygonGeometry({
|
||||||
|
polygonHierarchy: new Cesium.PolygonHierarchy(positions),
|
||||||
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||||||
|
material: waterMaterial,
|
||||||
|
})
|
||||||
|
}, {
|
||||||
|
__type: 'watersource',
|
||||||
|
name: '',
|
||||||
|
area: getArea(positions).toFixed(2), // 面积
|
||||||
|
longitude: center[0].toFixed(6),
|
||||||
|
latitude: center[1].toFixed(6),
|
||||||
|
volume: 0 // 储水量，默认0
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将 Primitive 添加到场景中
|
||||||
|
viewer.scene.primitives.add(waterPrimitive);
|
||||||
|
primitiveList.push(waterPrimitive);
|
||||||
|
|
||||||
|
// 编辑属性
|
||||||
|
DialogPropertyGrid.show(waterPrimitive, (data) => {
|
||||||
|
// 更新实体属性
|
||||||
|
setPropertyData(data, waterPrimitive);
|
||||||
|
// 调用接口
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绘制仓库（点）
|
||||||
|
const drawWarehouse = (options) => {
|
||||||
|
const { drawTool, measureTool, toolbarLayer } = options;
|
||||||
|
if(!drawTool) {
|
||||||
|
console.error('绘制工具未初始化');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
drawTool.abort();
|
||||||
|
measureTool.abort();
|
||||||
|
drawTool.drawPoint().then((position) => {
|
||||||
|
// 计算中心点坐标
|
||||||
|
const center = Cesium.Cartographic.fromCartesian(position);
|
||||||
|
|
||||||
|
const entity = toolbarLayer?.entities.add({
|
||||||
|
position,
|
||||||
|
billboard: {
|
||||||
|
image: fireWarehouseIcon,
|
||||||
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
__type: 'warehouse',
|
||||||
|
name: '',
|
||||||
|
longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
|
||||||
|
latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 编辑属性
|
||||||
|
DialogPropertyGrid.show(entity, (data) => {
|
||||||
|
// 更新实体属性
|
||||||
|
setPropertyData(data, entity);
|
||||||
|
// 调用接口
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
drawWatersource,
|
||||||
|
drawWarehouse
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Toolbar from './Toolbar'
|
||||||
|
|
||||||
|
export default Toolbar
|
||||||
|
|
@ -11,7 +11,7 @@ import { shallowRef } from 'vue';
|
||||||
import * as Cesium from 'cesium';
|
import * as Cesium from 'cesium';
|
||||||
import CesiumMap from '@/components/CesiumMap/index.vue';
|
import CesiumMap from '@/components/CesiumMap/index.vue';
|
||||||
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
|
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
|
||||||
import Toolbar from './Toolbar.vue';
|
import Toolbar from './Toolbar';
|
||||||
import DialogPropertyGrid from './DialogPropertyGrid';
|
import DialogPropertyGrid from './DialogPropertyGrid';
|
||||||
import { setPropertyData } from './DialogPropertyGrid/property';
|
import { setPropertyData } from './DialogPropertyGrid/property';
|
||||||
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
|
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue