116 lines
4.1 KiB
HTML
116 lines
4.1 KiB
HTML
|
<!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>Learning Cesium!</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<script src="./js/utils/WallDiffuseMaterialProperty.js"></script>
|
|||
|
|
<script src="./js/utils/dynamicWallMaterialProperty.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: false, //视角选择器
|
|||
|
|
// baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
// creditContainer:"credit",//版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let url = "http://121.33.231.74:5097/geoserver/iot/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=iot%3Azhujiang_boundary&maxFeatures=99999&outputFormat=application%2Fjson"
|
|||
|
|
fetch(url).then(res=>res.json()).then(result=>{
|
|||
|
|
let coords = result.features[0].geometry.coordinates[0][0]
|
|||
|
|
|
|||
|
|
viewer.entities.add({
|
|||
|
|
name: "Green wall from surface with outline",
|
|||
|
|
wall: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
|||
|
|
material: new Cesium.DynamicWallMaterialProperty({
|
|||
|
|
color: Cesium.Color.fromBytes(255, 255, 0).withAlpha(0.7),
|
|||
|
|
duration: 3000,
|
|||
|
|
}),
|
|||
|
|
minimumHeights:Array(coords.length).fill(100),
|
|||
|
|
maximumHeights:Array(coords.length).fill(5000),
|
|||
|
|
outline: false,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
/**
|
|||
|
|
* 墙体的创建方式：
|
|||
|
|
* 方式一：使用WallGraphics实体创建,new Cesium.WallGraphics(options)
|
|||
|
|
* options 的主要参数：
|
|||
|
|
* show
|
|||
|
|
* positions
|
|||
|
|
* minimumHeights
|
|||
|
|
* maximumHeights
|
|||
|
|
* granularity
|
|||
|
|
* fill
|
|||
|
|
* material
|
|||
|
|
* outline
|
|||
|
|
* outlineColor
|
|||
|
|
* outlineWidth
|
|||
|
|
* shadows
|
|||
|
|
* distanceDisplayCondition
|
|||
|
|
*/
|
|||
|
|
const greenWall = viewer.entities.add({
|
|||
|
|
name: "Green wall from surface with outline",
|
|||
|
|
wall: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
|||
|
|
-107.0, 43.0, 100000.0, -97.0, 43.0, 100000.0, -97.0, 40.0,
|
|||
|
|
100000.0, -107.0, 40.0, 100000.0, -107.0, 43.0, 100000.0,
|
|||
|
|
]),
|
|||
|
|
material: new Cesium.WallDiffuseMaterialProperty({
|
|||
|
|
color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
|
|||
|
|
}),
|
|||
|
|
outline: false,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const redWall = viewer.entities.add({
|
|||
|
|
name: "动态墙体",
|
|||
|
|
wall: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
|||
|
|
-115.0, 44.0, 200000.0, -90.0, 44.0, 200000.0,
|
|||
|
|
]),
|
|||
|
|
minimumHeights: [100000.0, 100000.0],
|
|||
|
|
material: new Cesium.DynamicWallMaterialProperty({
|
|||
|
|
color: Cesium.Color.fromBytes(255, 255, 0).withAlpha(0.7),
|
|||
|
|
duration: 1000,
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|