Vue.js2+Cesium1.103.0 九、淹没分析效果

Vue.js2+Cesium1.103.0 九、淹没分析效果

Demo

<template><divid="cesium-container"style="width: 100%; height: 100%;"><spanid="button"style="position: absolute; right: 50px; top: 50px; z-index: 999; font-size: 24px; color: #fff; cursor: pointer;">淹没分析</span></div>
</template><script>
/* eslint-disable no-undef */
/* eslint-disable new-cap */
import { lineString, bbox, bboxPolygon, area, pointGrid } from '@turf/turf'
export default {data() {return {}},computed: {},watch: {},mounted() {window.$InitMap()const tileset = new Cesium.Cesium3DTileset({url: 'https://lab.earthsdk.com/model/3610c2b0d08411eab7a4adf1d6568ff7/tileset.json',debugShowMemoryUsage: false})viewer.scene.primitives.add(tileset)viewer.zoomTo(tileset)const entity = viewer.entities.add({polygon: {hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([121.4631015, 31.2671618, 0, 121.5367499, 31.2658501, 0, 121.5328263,31.2059886, 0, 121.4590159, 31.2055623, 0])),// extrudedHeight: 200,// perPositionHeight: true,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,material: new Cesium.ColorMaterialProperty(new Cesium.Color.fromCssColorString('#17E980').withAlpha(0))}})// 淹没分析function FloodAnalysis() {const positions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positionsconst tempPoints = []for (let i = 0; i < positions.length; i++) {const cartographic =viewer.scene.globe.ellipsoid.cartesianToCartographic(positions[i])const lat = Cesium.Math.toDegrees(cartographic.latitude)const lng = Cesium.Math.toDegrees(cartographic.longitude)tempPoints.push([lng, lat])}// 生成外接矩形const line = lineString(tempPoints)const _bbox = bbox(line)const _bboxPolygon = bboxPolygon(_bbox)const _area = area(_bboxPolygon)// 生成格网// 计算网格点之间的距离，尽量保证范围内有1万个左右格网点。const cellSide = Math.sqrt(_area / 1000000) / 100const options = { units: 'kilometers' }const grid = pointGrid(_bbox, cellSide, options)const gridPositions = []grid.features.forEach(f => {gridPositions.push(Cesium.Cartographic.fromDegrees(f.geometry.coordinates[0],f.geometry.coordinates[1]))})const promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider,gridPositions)let maxHeight = 100let minHeight = 0Promise.resolve(promise).then(function (updatedPositions) {for (let i = 0; i < updatedPositions.length; i++) {const height = updatedPositions[i].height// 获取格网点处地形高度minHeight = height < minHeight ? height : minHeightmaxHeight = height > maxHeight ? height : maxHeight}const value = {minHeight,maxHeight}let waterHeight = value.minHeightconst targertWaterHeight = value.maxHeightentity.polygon.perPositionHeight = trueentity.polygon.material = new Cesium.Color.fromBytes(64, 157, 253, 150)entity.polygon.extrudedHeight = new Cesium.CallbackProperty(function () {waterHeight += 0.5if (waterHeight > targertWaterHeight) {waterHeight = targertWaterHeight}return waterHeight},false)return value})}document.getElementById('button').onclick = function () {FloodAnalysis()}},methods: {}
}
</script>