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、效果图如下