本文主要是介绍Cesium淹没分析（带热力图效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Cesium淹没分析（带热力图效果）
效果图
1.构建的rectangle Entity，实现淹没效果
let entity = viewer.entities.add({rectangle: {coordinates: Cesium.Rectangle.fromCartesianArray(Cesium.Cartesian3.fromDegreesArray(coordinates)),//coordinates是水淹范围经纬度坐标数组 格式[经度，纬度，经度，纬度，......]material: new Cesium.ImageMaterialProperty({image: heatMap._renderer.canvas,//热力图画布transparent: true}),extrudedHeight: new Cesium.CallbackProperty(() => extrudedHeight, false)//extrudedHeight水淹高度}})
2.加入热力图画布
//热力图数值 部分例子[{"x": 0,"y": 100,"value": 176.95826437216726},{"x": 0,"y": 98,"value": 230.1923940189951},{"x": 0,"y": 96,"value": 426.53616538853737},{"x": 0,"y": 94,"value": 497.42594307709976},{"x": 0,"y": 92,"value": 408.30661293631476},{"x": 0,"y": 90,"value": 181.39132069060315},{"x": 0,"y": 88,"value": 176},{"x": 0,"y": 86,"value": 176},{"x": 0,"y": 84,"value": 176}]
//热力图构建var heatDoc = document.createElement("div");heatDoc.setAttribute("style", "width:100px;height:100px;margin: 0px;display: none;");document.body.appendChild(heatDoc);// 创建热力图对象var heatmap = h337.create({container: heatDoc,radius: 2,//渲染半径maxOpacity: .9,//色块最大透明度minOpacity: .7,//色块最小透明度blur: .55,gradient: {'0.9': 'red','0.7': 'orange','0.5': 'yellow','0.3': 'blue',},//色阶});// 添加数据heatmap.setData({max: max,data: data});return heatmap;
heatmap.js、CesiumHeatmap.js
地址：https://download.csdn.net/download/weixin_44339199/84194949
完整代码：https://download.csdn.net/download/weixin_44339199/84656234
这篇关于Cesium淹没分析（带热力图效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
