<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 加载框架 -->
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<link href="colorpicker/css/colorpicker.css" rel="stylesheet" />
<script src="colorpicker/colorpicker.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script type="text/javascript" type="text/javascript" src="layer3.0/layer.js"></script>
<script type="text/javascript" src="Cesium/Cesium.js"></script>
<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
<script type="text/javascript" src="Windy.js"></script>
<!-- 加载自定css、js -->
<link rel="stylesheet" href="style.css">
<style type="text/css">
.body_div{
position: absolute;
left:0px;
top:0px;
width: 100%;
height:100%;
}
</style>
<script type="text/javascript">
$(function(){
var viewer = new Cesium.Viewer('mapDiv',{
//组件的隐藏与显示
geocoder:false,
homeButton:false,
sceneModePicker:false,
baseLayerPicker:false,
navigationHelpButton:false,
animation:false,
shouldAnimate:true,
//creditContainer:"credit",
timeline:false,
fullscreenButton:false,
vrButton:false,
terrainProvider:new Cesium.CesiumTerrainProvider({
url: 'http://211.101.24.58:1951/irrlicht/services/samples/c3d_wenchang_terrain/C3DTerrainServer/data'
}),
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
// url : 'data/worldimage/{z}/{x}/{y}.png', //如果为本地相对路径,url为文件夹地址,
url:'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
})
});
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
//修改鼠标操作方式(默认鼠标中建旋转,右键zoom,以下方式为:中建zoom,右键旋转)
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.PINCH,
{eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL},
{eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL}
];
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH
];
viewer.scene.camera.setView({destination:new Cesium.Cartesian3.fromDegrees(107.515637, 31.105743, 22844209)});
/**
*如果处于全球状态就设置为[](只要有一个角获取不到坐标就表示全球状态,实时计算)
**/
var globalExtent = [];
var showWindy = function(){
$('#windycanvas').show();
};
var hideWindy = function(){
$('#windycanvas').hide();
};
//获取当前三维窗口左上、右上、左下、右下坐标
var getCesiumExtent = function(){
var canvaswidth = window.innerWidth,
canvasheight = window.innerHeight-50;
var left_top_pt = new Cesium.Cartesian2(0,0);
var left_bottom_pt = new Cesium.Cartesian2(0,canvasheight);
var right_top_pt = new Cesium.Cartesian2(canvaswidth,0);
var right_bottom_pt = new Cesium.Cartesian2(canvaswidth,canvasheight);
var pick1= viewer.scene.globe.pick(viewer.camera.getPickRay(left_top_pt), viewer.scene);
var pick2= viewer.scene.globe.pick(viewer.camera.getPickRay(left_bottom_pt), viewer.scene);
var pick3= viewer.scene.globe.pick(viewer.camera.getPickRay(right_top_pt), viewer.scene);
var pick4= viewer.scene.globe.pick(viewer.camera.getPickRay(right_bottom_pt), viewer.scene);
if(pick1 && pick2 && pick3 && pick4){
//将三维坐标转成地理坐标---只需计算左下右上的坐标即可
var geoPt1= viewer.scene.globe.ellipsoid.cartesianToCartographic(pick2);
var geoPt2= viewer.scene.globe.ellipsoid.cartesianToCartographic(pick3);
//地理坐标转换为经纬度坐标
var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180];
var point2=[geoPt2.longitude / Math.PI * 180,geoPt2.latitude / Math.PI * 180];
// console.log(point1,point2);
//此时说明extent需要分为东西半球
if(point1[0]>point2[0]){
globalExtent = [point1[0],180,point1[1],point2[1],-180,point2[0],point1[1],point2[1]];
}else{
globalExtent = [point1[0],point2[0],point1[1],point2[1]];
}
}else{
globalExtent = [];
}
};
// 开启监听器--无论对当前地球做的任何操作都会监听到
let postRender = viewer.scene.postRender.addEventListener(() => {
getCesiumExtent();
});
var refreshTimer = -1;
var mouse_down = false;
var mouse_move = false;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//鼠标滚动、旋转后是否需要重新生成风场---如果需要,打开以下注释--旋转或者移动到北半球的时候计算会有问题
handler.setInputAction(function(e) {
clearTimeout(refreshTimer);
hideWindy();
setTimeout(function(){
windy.extent = globalExtent;
windy.redraw();
showWindy();
},200);
},Cesium.ScreenSpaceEventType.WHEEL);
//鼠标左键、右键按下
handler.setInputAction(function(e) {
mouse_down = true;
},Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function(e) {
mouse_down = true;
},Cesium.ScreenSpaceEventType.RIGHT_DOWN);
//鼠标移动
handler.setInputAction(function(e) {
if(mouse_down){
hideWindy();
mouse_move = true;
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//鼠标左键、右键抬起
handler.setInputAction(function(e) {
if(mouse_down && mouse_move){
windy.extent = globalExtent;
windy.redraw();
}
《Cesium风场可视化:深度解析与应用》 在当今的WebGIS领域,Cesium作为一个强大的开源JavaScript库,被广泛用于构建3D地球和空间应用。Cesium版本1.68引入了对风场可视化的支持,使得用户可以直观地理解和分析气象数据,这对于气象研究、环保监测以及能源领域的风力发电规划等具有重要意义。本文将深入探讨Cesium如何实现风场可视化,以及如何将其集成到Web容器中进行高效运行。 Cesium风场可视化的核心在于其强大的三维渲染能力。Cesium通过WebGL技术,能够在浏览器中直接呈现复杂的3D场景,包括全球地形、卫星图像以及动态的风向和风速信息。在这个过程中,Cesium利用了高效的几何渲染和纹理映射技术,确保了即使在大规模数据集下也能保持流畅的用户体验。 "cesiumwindy.rar"中的"cesiumwindy"文件包含了实现这一功能的具体代码和资源。开发者可以将这个项目直接部署到Web容器中,如Apache或Nginx,以快速实现风场的在线展示。在实际应用中,通常需要将风场数据转换为Cesium可识别的格式,如GeoJSON或KML,然后通过Cesium的DataSource API加载到场景中。 Cesium风场的可视化通常涉及到以下几个关键步骤: 1. 数据预处理:风场数据通常以网格或粒子形式存在,需要转换成Cesium支持的几何形状,如线段或粒子系统。这可能需要自定义数据转换脚本。 2. 创建DataSource:在Cesium中,数据源(DataSource)负责管理场景中的几何对象。你可以创建一个新的DataSource实例,并将预处理后的风场数据添加进去。 3. 添加到场景:使用`viewer.dataSources.add()`方法将DataSource添加到Cesium Viewer实例,从而将其显示在3D视图中。 4. 动画和交互:为了使风场动态化,可以设置DataSource的`clock`属性,使其随时间变化。同时,Cesium提供了丰富的交互功能,如点击查询、缩放、平移等,可以增强用户的探索体验。 5. 性能优化:为了保证在大量数据下的性能,Cesium支持LOD(Level of Detail)和批处理技术。通过智能地减少渲染细节和合并相似几何体,可以显著提高场景的运行效率。 Cesium的风场可视化功能为气象数据的展示提供了一种直观且互动的方式。通过理解和掌握上述知识点,开发者可以创建出功能强大的风场分析工具,服务于科研、教育及公众科普等多个领域。同时,不断迭代更新的Cesium库也为未来更复杂、更精细的风场模拟提供了无限可能。













































































































- 1
- 2
- 3
- 4
- 5
- 6

- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整
- xingguansixian2020-09-14风场可以用,但是目前发现和别的风场方向是反的,不知道什么情况

- 粉丝: 70
- 资源: 9
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- LNU拓展实验python语言的基础语法实现三角型求面积和周长等基础性问题
- 深度学习-扩散模型-IDDM-v1.1.2
- 深度学习入门:从零开始构建神经网络基础教程
- 64位access驱动安装包
- 深度学习-扩散模型-IDDM-v1.1.3
- 深度学习-扩散模型-IDDM-v1.1.4
- 深度学习-扩散模型-IDDM-v1.1.5
- 深度学习-扩散模型-IDDM-v1.1.6
- yolo检测视频流,动态显示标注框和对象尺寸
- 一款万能的资源搜索引擎2025.3最新版
- 深度学习-扩散模型-IDDM-v1.1.7
- 微信小程序-实现锚点跳转,支持页面加载后自动跳转、绑定点击事件跳转,简单方便非scroll-view方法
- RocketMQ 的安装与源码调试指南
- 跨机器的深度判别迁移学习网络
- react人工智能问答助手-rag-chat-demo
- Marksssssssssss


