<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风场效果源码展示
需积分: 35 117 浏览量
2022-10-14
16:39:40
上传
评论 1
收藏 5.7MB ZIP 举报
cesium风场效果源码展示 （518个子文件） 
layui.css 73KB widgets.css 21KB layer.css 14KB layer.css 14KB layui.mobile.css 10KB laydate.css 7KB layer.css 5KB lighter.css 5KB style.css 3KB colorpicker.css 3KB InfoBoxDescription.css 3KB Animation.css 2KB CesiumInspector.css 2KB BaseLayerPicker.css 2KB Cesium3DTilesInspector.css 2KB NavigationHelpButton.css 2KB lighter.css 2KB shared.css 2KB SceneModePicker.css 2KB InfoBox.css 2KB Geocoder.css 1KB Viewer.css 1KB Timeline.css 1KB code.css 1KB ProjectionPicker.css 1KB CesiumWidget.css 986B lighterShared.css 878B lighter.css 863B lighter.css 598B lighter.css 391B SelectionIndicator.css 332B lighter.css 325B lighter.css 263B PerformanceWatchdog.css 250B FullscreenButton.css 101B VRButton.css 93B iconfont.eot 46KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 0.gif 3KB 48.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB共 518 条
- 1
- 2
- 3
- 4
- 5
- 6
评论0