实现了水闸放水效果以及水面升降等效果

import * as mars3d from "mars3d" export let map // mars3d.Map三维地图对象 let zmGraphic let waterLayer // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并） export const mapOptions = { scene: { center: { lat: 29.791718, lng: 121.479859, alt: 29, heading: 187, pitch: -14 } }, layers: [ { type: "3dtiles", name: "整体模型", url: "//data.mars3d.cn/3dtiles/max-fsdzm/tileset.json", position: { alt: 15.2 }, maximumScreenSpaceError: 1, show: true }, { type: "geojson", name: "河流(面状)", url: "//data.mars3d.cn/file/geojson/hedao-nei.json", symbol: { type: "waterC", styleOptions: { height: 17, // 水面高度 normalMap: "img/textures/poly-rivers.png", // "img/textures/waterNormals.jpg", // 水正常扰动的法线图 frequency: 8000.0, // 控制波数的数字。 animationSpeed: 0.01, // 控制水的动画速度的数字。 amplitude: 2.0, // 控制水波振幅的数字。 specularIntensity: 0.8, // 控制镜面反射强度的数字。 baseWaterColor: "#00baff", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4 blendColor: "#00baff", // 从水中混合到非水域时使用的rgba颜色对象。 opacity: 0.4, // 透明度 clampToGround: false // 是否贴地 } }, show: true } ] } /** * 初始化地图业务，生命周期钩子函数（必须） * 框架在地图初始化完成后自动调用该函数 * @param {mars3d.Map} mapInstance 地图对象 * @returns {void} 无 */ export function onMounted(mapInstance) { map = mapInstance // 记录首次创建的map waterLayer = new mars3d.layer.GeoJsonLayer({ name: "河流(面状)", url: "//data.mars3d.cn/file/geojson/hedao-wai.json", symbol: { type: "waterC", styleOptions: { height: 16, // 水面高度 offsetHeight: 0, normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图 frequency: 8000.0, // 控制波数的数字。 animationSpeed: 0.01, // 控制水的动画速度的数字。 amplitude: 2.0, // 控制水波振幅的数字。 specularIntensity: 0.4, // 控制镜面反射强度的数字。 baseWaterColor: "#877658", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4 blendColor: "#ac8113", // 从水中混合到非水域时使用的rgba颜色对象。 opacity: 0.6 // 透明度 } } }) map.addLayer(waterLayer) // 绑定事件 waterLayer.on(mars3d.EventType.load, function (event) { console.log("数据加载完成", event) }) waterLayer.on(mars3d.EventType.click, function (event) { console.log("单击了图层", event) }) // 闸门的控制 zmGraphic = new mars3d.graphic.ModelEntity({ name: "闸门", position: [121.479813, 29.791278, 16], style: { url: "//data.mars3d.cn/gltf/mars/zhamen.glb", heading: 105 } }) map.graphicLayer.addGraphic(zmGraphic) } /** * 释放当前地图业务的生命周期函数 * @returns {void} 无 */ export function onUnmounted() { map = null } let timeInv // 高度更新 function updateHeight(height) { zmGraphic.height = 16 + height // 阀门高度 waterLayer.eachGraphic((graphic) => { graphic.offsetHeight = height// 水域高度变化 }) } // 添加水柱 function addWaterGate() { // 水柱位置 // const posArr = [ // [115.602689, 32.43482, 28], // [115.600163, 32.432059, 28], // [115.600324, 32.431971, 28], // [115.600484, 32.431882, 28], // [115.600646, 32.431793, 28], // [115.600806, 32.431706, 28], // [115.600967, 32.431617, 28] // ] const posArr = [ [121.479861, 29.791326, 18], [121.479826, 29.791326, 18], [121.479789, 29.791336, 18] ] for (let i = 0, len = posArr.length; i < len; i++) { const pos = posArr[i] const particleSystem = new mars3d.graphic.ParticleSystem({ id: i + 1, position: pos, // 位置 style: { image: "./img/particle/waterfall.png", particleSize: 36, // 粒子大小（单位：像素） emissionRate: 100.0, // 发射速率 （单位：次/秒） heading: 105, // 方向角 pitch: 90, // 俯仰角 gravity: -11, // 重力因子，会修改速度矢量以改变方向或速度（基于物理的效果） transZ: 5, // 离地高度（单位：米） maxHeight: 300, // 超出该高度后不显示粒子效果 startColor: Cesium.Color.LIGHTCYAN.withAlpha(0.3), // 开始颜色 endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色 minimumParticleLife: 1, // 最小寿命时间（秒） maximumParticleLife: 2, // 最大寿命时间（秒） minimumSpeed: 10.0, // 最小速度(米/秒) maximumSpeed: 14.0 // 最大速度(米/秒) } }) // const particleSystem = new mars3d.graphic.ParticleSystem({ // id: i + 1, // position: pos, // 位置 // style: { // image: "./img/particle/water.png", // particleSize: 26, // 粒子大小（单位：像素） // emissionRate: 100.0, // 发射速率 （单位：次/秒） // heading: 105, // 方向角 // pitch: 50, // 俯仰角 // gravity: -11, // 重力因子，会修改速度矢量以改变方向或速度（基于物理的效果） // transZ: 5, // 离地高度（单位：米） // // maxHeight: 2000, // 超出该高度后不显示粒子效果 // // startColor: Cesium.Color.LIGHTCYAN.withAlpha(0.3), // 开始颜色 // endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色 // minimumParticleLife: 1, // 最小寿命时间（秒） // maximumParticleLife: 4, // 最大寿命时间（秒） // minimumSpeed: 10.0, // 最小速度(米/秒) // maximumSpeed: 14.0 // 最大速度(米/秒) // } // }) map.graphicLayer.addGraphic(particleSystem) } } // 全部闸门的控制 function bindShowAll(val) { map.graphicLayer.eachGraphic((graphic) => { graphic.show = val if (graphic.name == "闸门") { graphic.show = !val } }) } /** * 开启阀门 * * @export * @param {number} height 阀门高度 单位: m * @param {number} time //时间 单位:s * @returns {void} 无 */ export function openZm(height, time) { addWaterGate() let thisHeight = 0 // 当前高度 const endHeight = height // 结束高度 const step = time / 0.1 // 步长 const stepHeight = (endHeight - thisHeight) / step // 每次阀门、水面上移高度 // 再次点击"开启"时从当前位置开启 updateHeight(thisHeight) clearInterval(timeInv) timeInv = setInterval(() => { thisHeight += stepHeight // 上移后的当前高度,相当于时实更新 if (thisHeight >= endHeight) { thisHeight = endHeight clearInterval(timeInv) // 清除定时器,当前阀门的高度值等于结束时阀门的高度值时，停止上移，关闭定时器 } updateHeight(thisHeight) }, 100) } /** * 关闭阀门 * * @export * @param {number} height 阀门高度 单位: m * @param {number} time //时间 单位:s * @returns {void} 无 */ export function closeZm(height, time) { let thisHeight = height const endHeight = 0 const step = time / 0.1 const stepHeight = (endHeight - thisHeight) / step updateHeight(thisHeight) clearInterval(timeInv) timeInv = setInterval(() => { thisHeight += stepHeight if (thisHeight <= endHeight) { thisHeight = endHeight clearInterval(timeInv) } updateHeight(thisHeight) }, 100) bindShowAll(false) } /** * 改变流速 * * @export * @param {number} speed * @returns {void} 无 */ export function changeSpeed(speed) { // debugger // const frequency = 8000 / speed speed =