1、通过SketchViewModel在地图上选择一个点作为最低点海拔高度
2、通过SketchViewModel在地图上画一个包含步骤1中点的多边形，1和2的代码如下：
const draw = (type) => {
if (type === 'polygon') {
if (clickedPoint.value === false) {
ElMessage({
message: '请先获取最低点海拔',
type: 'warning',
duration: 1000,
});
return;
}
}
let sketchLayer = view.map.findLayerById('sketchLayer');
if (sketchLayer) {
sketchLayer.removeAll();
} else {
sketchLayer = new GraphicsLayer({
id: 'sketchLayer',
elevationInfo: {
mode: 'absolute-height',
},
});
view.map.add(sketchLayer);
}
const sketchVM = new SketchViewModel({
view: view,
layer: sketchLayer,
});
sketchVM.create(type);
sketchVM.on('create', function (event) {
if (event.state === 'complete') {
if (type === 'point') {
clickedPoint.value = true;
form.minHeight = event.graphic.geometry.z;
point = event.graphic.geometry;
} else {
polygon = event.graphic.geometry;
//判断画的多边形是否包含最低点海拔那个点
const isContained = geometryEngine.contains(polygon, point);
if (isContained) {
floodAnalysis(sketchLayer);
} else {
ElMessage({
message: '该多边形没有包含获取海拔那个点',
type: 'warning',
duration: 1000,
});
}
}
}
});
};
3、进行淹没分析
const floodAnalysis = (sketchLayer) => {
const { minHeight, height, floodSpeed } = form;
const time = (height / floodSpeed) * 1000;
const graphics = sketchLayer.graphics.items;
graphics.forEach((graphic) => {
graphic.geometry = new Polygon({
hasZ: true,
rings: graphic.geometry.rings[0].map(([x, y]) => [x, y, minHeight]),
spatialReference: view.spatialReference,
});
});
analysisDone.value = false;
heightAnimation(performance.now(), graphics, time, height);
};
4、渐变高度动画
const heightAnimation = (clock, graphics, time, height) => {
animationKey.value = requestAnimationFrame((c) => {
graphics.forEach((graphic) => {
if (c - clock >= 0) {
graphic.symbol = {
type: 'polygon-3d',
symbolLayers: [
{
type: 'extrude',
size: ((c - clock) / time) * height,
material: { color: [0, 240, 255, 0.7] },
},
],
};
}
});
if (c - clock < time) {
heightAnimation(clock, graphics, time, height);
} else {
analysisDone.value = true;
cancelAnimationFrame(animationKey.value);
}
});
};
5、效果图如下
淹没分析-CSDN直播