<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="Build/Cesium/Cesium.js"></script>
<style>
@import url(Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#toolbar {
margin: 5px;
padding: 2px 5px;
position: absolute;
width: 260px;
top: 40px;
height: 200px;
display: none;
background-color: rgba(38, 38, 38, 0.75);
padding: 20px 20px 10px 20px;
color: #ffffff;
border: 1px solid #526f82;
}
#buttombar {
margin: 5px;
padding: 2px 5px;
position: absolute;
width: 50px;
top: 80%;
height: 50px;
display: block;
/* background-color: rgba(38, 38, 38, 0.75); */
padding: 0px;
color: #ffffff;
border: 1px solid #526f82;
}
#guangzhao {
margin: 5px;
padding: 2px 5px;
position: absolute;
width: 50px;
top: 85%;
height: 50px;
display: block;
/* background-color: rgba(38, 38, 38, 0.75); */
padding: 0px;
color: #ffffff;
border: 1px solid #526f82;
}
.form-group {
position: relative;
font-size: 15px;
color: white;
}
.button {
line-height: 30px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
border-radius: 3px;
margin: 0 0px 20px 0;
position: relative;
overflow: hidden;
padding: 0px 15px 0px 15px;
}
.button.black {
border: 1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.49), rgba(51, 51, 51, 0.55));
background: -moz-linear-gradient(top, #656565, #4a4a4a);
background: linear-gradient(top, #656565, #4a4a4a);
}
.cesium-viewer-animationContainer,
/* 左下角动画控件 */
.cesium-viewer-timelineContainer
/* 时间线 */
{
display: none;
}
.form-group .form-control {
TEXT-ALIGN: center;
width: 50px;
z-index: 3;
height: 18px;
left: 170px;
top: 0px;
position: relative;
background: none;
border: none;
padding: 5px 0;
-webkit-transition: 0.3s;
transition: 0.3s;
border-bottom: 1px solid #777;
}
.form-group .form-control:focus,
.form-group .form-control:valid {
outline: none;
color: beige;
box-shadow: 0 1px white;
border-color: white;
}
</style>
</head>
<body>
<div id="credit">
</div>
<div id="cesiumContainer">
</div>
<div id="toolbar" class="cesium-viewer-toolbar">
<div class="form-group">
<input id="maxHeight" value="10" required="required" class="form-control" />
<label class="form-label">最大高度 (米) : </label>
</div>
<div class="form-group">
<input id="minHeight" value="0" required="required" class="form-control" />
<label class="form-label">最小高度 (米) :</label>
</div>
<div class="form-group">
<input id="speed" value="0.1" required="required" class="form-control" />
<label class="form-label">淹没速度(m/s):</label>
</div>
<div style="margin: 10px;">
<button type="button" id="begin" class="button black" onclick="runwater()">开始</button>
<button type="button" id="clear" class="button black" onclick="removewater()">清除</button>
</div>
</div>
<div id="buttombar" class="cesium-viewer-toolbar">
<div style="width: 50px; height:52px; background-color: #fff;left: 90px; margin: 0 auto;">
<div style="padding: 5px" title="查询">
<span onclick="lookck()"><img src="img/cx.png"></span>
</div>
</div>
</div>
<div id="guangzhao" class="cesium-viewer-toolbar">
<div style="width: 50px; height:52px; background-color: #fff;left: 90px; margin: 0 auto;">
<div style="padding: 5px" title="查询">
<span onclick="guangzhao()"><img src="img/cx.png"></span>
</div>
</div>
</div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
// 搜索
geocoder: false,
// sceneMode: Cesium.SceneMode.SCENE2D,
// 查看主页按钮
homeButton: false,
// 2D/3D切换
sceneModePicker: false,
// 底图
baseLayerPicker: false,
// 导航说明
navigationHelpButton: true,
// 导航仪
animation: true,
creditContainer: "credit",
// 时间线
timeline: true,
// 全屏
fullscreenButton: false,
// vr模式
vrButton: false,
infoBox: true,
// 天地图底图
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=7b435c61bff7f77eb49206e10d6397bd",
layer: 'img',
style: 'default',
tileMatrixSetID: 'w',
format: 'tiles',
maximumLevel: 18
})
});
// 标注
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=7b435c61bff7f77eb49206e10d6397bd",
layer: 'cia',
style: 'default',
tileMatrixSetID: 'w',
format: 'tiles',
maximumLevel: 18
})); //注记图层
var tileset = new Cesium.Cesium3DTileset({
url: 'tile/tileset.json'
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 250000;
tileset.readyPromise.then(function() {
var boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, 0, 0));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 30);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset._modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}).otherwise(function(error) {
throw (error);
});
function measureAreaSpace(viewer, maxH, interval, speed) {
let waterEntity = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([ //hierarchy分层(位置,孔)
120.2756859, 30.42667624,
120.2734762, 30.43048772,
120.2691198, 30.43816092,
120.2688253, 30.43887895,
120.2721572, 30.44058701,
120.2753432, 30.44222015,
120.2781081, 30.44363731,
120.2831174, 30.4462046,
120.2842303, 30.44613582,
120.284472, 30.44590172,
120.2875494, 30.44292078,
120.2904976, 30.44006473,
120.293151, 30.43749407,
120.2970764, 30.43281576,
120.2970761, 30.43263726,
120.2956152, 30.43206517,
120.2834947, 30.42860944,
120.2756859, 30.42667624
]),
material: Cesium.Color.POWDERBLUE.withAlpha(0),
perPositionHeight: false,
extrudedHeight: 0.0,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //是否贴地
}
});
//二秒后开始进入淹没分析
setTimeout(function() {
if (waterEntity) {
waterEntity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.5);
var h = 0;
waterEntity.polygon.extrudedHeight = 0; //需要提前设置 不然会全部出现
var st = setInterval(function() {
h = h + speed;
if (h >= maxH) {
h = maxH; //给个最大值
alert("达到最高值");
clearTimeout(st);
}
waterEntity.polygon.extrudedHeight.setValue(h);
}, interval);
}
// entity.billboard.color = Cesium.Color.WHITE;
// }
/* 多边形*/
var PolygonPrimitive = (function() {
function _(positions) {
this.options = {
name: '多边形',
polygon: {
hierarchy: [],
material: Cesium.Color.POWDERBLUE.withAlpha(0.5)
}
};
this.hierarchy = positions;
this._init();
}
_.prototype._init = function() {
var _self = this;
var _update = function() {
return _self.hierarchy;
};
//实时更新polygon.hierarchy
this.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);
waterEntity = viewer.entities.add(this.options);
};
return _;
})();
}, interval);
}
function runwater() {
var maxHeight = document.getElementById('maxHeight').value;
var minHeight = document.getElementById('minHeight').value;
var speed = document.getElementById('speed').value;
//运行
measureAreaSpace(viewer, maxHeight, 1000, 1); //maxH 设置为2000;最大淹没海拔 每10毫秒前进1海拔;
}
function removewater() {
viewer.entities.removeAll();
}
viewer.clock.onTick.addEventListener(function() {
if (viewer.camera.pitch > 0) {
viewer.scene.screenSpaceCameraController.enableTilt = false;
}
});
var mousePosition, startMousePosition;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(movement) {
mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
handler.setInputAction(function(movement) {
mousePosition = movement.endPosition;
var y = mousePosition.y - startMousePosition.y;
if (y > 0) {
viewer.scene.screenSpaceCameraController.enableTilt = true;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
viewer.scene.globe.depthTestAgainstTerrain = true;
function lookck() {
if ($("#toolbar").css("display") == "none") {
$("#toolbar").css({
display: "block"
});
} else {
$("#toolbar").css({
display: "none"
});
}
}
// 光照效果
function guangzhao() {
if ($('.cesium-viewer-animationContainer').css('display') == "none" && $('.cesium-viewer-timelineContainer').css('display') == "none") {
$('.cesium-viewer-animationContainer').css({
display: "block"
});
$('.cesium-viewer-timelineContainer').css({
display: "block"
});
// 阴影
// viewer.shadows = true;
// 启用光照效果
// viewer.scene.globe.enableLighting = false;
} else {
$('.cesium-viewer-animationContainer').css({
display: "none"
});
$('.cesium-viewer-timelineContainer').css({
display: "none"
});
// 阴影
viewer.shadows = false;
// 启用光照效果
// viewer.scene.globe.enableLighting = false;
}
};
//设置初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(120.2756859, 30.42667624, 1500)
});
var position = Cesium.Cartesian3.fromDegrees(120.2756859, 30.42667624, 500.0);
// var entity = viewer.entities.add({
// position: position,
// box: {
// dimensions: new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),
// material: Cesium.Color.WHITE.withAlpha(0.3),
// outline: true,
// outlineColor: Cesium.Color.WHITE
// }
// });
// var globe = viewer.scene.globe;
// globe.depthTestAgainstTerrain = true;
// globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
// modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
// planes: [
// new Cesium.Plane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 700.0),
// new Cesium.Plane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), 700.0),
// new Cesium.Plane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 700.0),
// new Cesium.Plane(new Cesium.Cartesian3(0.0, -1.0, 0.0), 700.0)
// ],
// edgeWidth: 1.0,
// edgeColor: Cesium.Color.WHITE
// });
</script>
</body>
</html>
cesium 淹没分析
最新推荐文章于 2024-07-02 17:17:01 发布