370 lines
14 KiB
HTML
370 lines
14 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>水面波动效果</title>
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|
<script src="./js/utils/cUtil.js"></script>
|
|
<script src="./js/utils/CesiumPopup.js"></script>
|
|
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="./js/elementui/index.css" />
|
|
<!-- import Vue before Element -->
|
|
<script src="./js/vue2710.js"></script>
|
|
<!-- import JavaScript -->
|
|
<script src="./js/elementui/index.js"></script>
|
|
|
|
<style>
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|
html,
|
|
body,
|
|
#app,
|
|
#cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
#infobox {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 30px;
|
|
font-size: 14px;
|
|
z-index: 99;
|
|
padding: 10px 20px;
|
|
background-color: white;
|
|
border: 1px solid #cccccc;
|
|
}
|
|
.toolbox {
|
|
position: absolute;
|
|
top: 49%;
|
|
left: 30px;
|
|
z-index: 99;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
.tool-item {
|
|
background-color: #303336;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* pop框css*/
|
|
.cesium-popup-panel {
|
|
opacity: 0.8;
|
|
width: 312px;
|
|
position: absolute;
|
|
z-index: 999;
|
|
color: #00fcf9;
|
|
|
|
background: rgba(23, 50, 108, 0.6);
|
|
border: 1px solid #4674d6;
|
|
}
|
|
.cesium-popup-tip-panel {
|
|
width: 40px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -20px;
|
|
margin-left: -20px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
opacity: 0.8;
|
|
}
|
|
.cesium-popup-tip-bottom {
|
|
width: 17px;
|
|
background: rgba(23, 50, 108, 0.8);
|
|
border-bottom: 1px solid #4674d6;
|
|
height: 17px;
|
|
padding: 1px;
|
|
margin: -10px auto 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
.cesium-popup-header-panel {
|
|
/* display: flex; */
|
|
/* justify-content: space-between; */
|
|
align-items: center;
|
|
font-size: 14px;
|
|
padding: 5px 15px;
|
|
background: rgba(23, 50, 108, 0.8);
|
|
|
|
border-bottom: 1px solid #4674d6;
|
|
}
|
|
|
|
.cesium-poput-header-title {
|
|
font-size: 16px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.cesium-popup-content-panel {
|
|
padding: 18px;
|
|
}
|
|
.cesium-popup-close-btn {
|
|
float: right;
|
|
position: relative;
|
|
right: 10px;
|
|
}
|
|
.cesium-popup-close-btn,
|
|
.cesium-popup-close-btn:focus {
|
|
cursor: pointer;
|
|
}
|
|
cesium-popup-close-btn > svg:hover {
|
|
color: #00fcf9 !important;
|
|
}
|
|
.cesium-popup-close-btn > svg {
|
|
user-select: auto;
|
|
color: #4674d6;
|
|
cursor: pointer;
|
|
width: 15px;
|
|
/* height: 15px; */
|
|
}
|
|
.btn-box {
|
|
position: absolute;
|
|
top: 120px;
|
|
left: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="cesiumContainer"></div>
|
|
<div class="btn-box">
|
|
<el-row>
|
|
<el-button @click="upPanel">抬升</el-button>
|
|
<el-button @click="downPanel" type="primary">下降</el-button>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
Cesium.Ion.defaultAccessToken =
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
data() {
|
|
return {
|
|
coorArr:[
|
|
[114.9106237, 32.36040131],
|
|
[114.910716, 32.36037744],
|
|
[114.9108247, 32.36050763],
|
|
[114.9108915, 32.36066378],
|
|
[114.9105362, 32.36075431],
|
|
[114.9099036, 32.36107367],
|
|
[114.9098775, 32.36110465],
|
|
[114.9099265, 32.36129565],
|
|
[114.90990293, 32.3612836],
|
|
[114.9097085, 32.36089941],
|
|
[114.9096557, 32.36089388],
|
|
[114.909541, 32.36092192],
|
|
[114.9091854, 32.36104688],
|
|
[114.9091163, 32.36076679],
|
|
[114.9104683, 32.36022219],
|
|
[114.9106237, 32.36040131],
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
upPanel(){
|
|
console.log(this._waterPrimitive)
|
|
this._waterPrimitive.extrudedHeight = 100
|
|
},
|
|
downPanel(){
|
|
this._waterPrimitive.extrudedHeight = 0
|
|
},
|
|
initViewer(){
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
geocoder: false, //位置查找
|
|
homeButton: false, //视图返回初始位置
|
|
sceneModePicker: false, //视角选择器
|
|
// baseLayerPicker:false,//底图选择器
|
|
navigationHelpButton: false, //导航帮助按钮
|
|
animation: true, //动画控制器
|
|
// creditContainer:"credit",//版权显示
|
|
timeline: true, //时间线
|
|
fullscreenButton: false, //全屏控件
|
|
vrButton: false,
|
|
});
|
|
viewer.camera.flyTo({
|
|
destination: Cesium.Cartesian3.fromDegrees(
|
|
114.91211079454052,32.35430853761666,
|
|
// 121.4797, 29.7913,
|
|
500.0
|
|
),
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(0.0),
|
|
pitch: Cesium.Math.toRadians(-35.0),
|
|
roll: 0.0,
|
|
},
|
|
});
|
|
this._viewer = viewer;
|
|
window.viewer = viewer;
|
|
// this.addWaterEffect();
|
|
|
|
// const boundary = [121.4797, 29.7913, 121.4795, 29.7911, 121.4799, 29.7911, 121.4799, 29.7914]
|
|
let riverHeight = 10
|
|
const maxHeight = 50
|
|
// this._viewer.entities.add({
|
|
// polygon: {
|
|
// hierarchy: new Cesium.Cartesian3.fromDegreesArray(boundary),
|
|
// fill: true,
|
|
// material: new Cesium.Color(255, 0, 0), //水面颜色,
|
|
// extrudedHeight: new Cesium.CallbackProperty(() => {
|
|
// return riverHeight
|
|
// }, false),
|
|
// clampToGround: true,
|
|
// },
|
|
// })
|
|
// window.timer = setInterval(() => {
|
|
// riverHeight += 0.25
|
|
// if (riverHeight >= maxHeight) {
|
|
// riverHeight = maxHeight
|
|
// clearInterval(timer)
|
|
// timer = null
|
|
// }
|
|
// }, 500)
|
|
const imgUrl = "./Build/Cesium/Assets/Textures/waterNormals.jpg"
|
|
this._waterPrimitive = this.useDrawRiver(this.coorArr.flat(),imgUrl,riverHeight);
|
|
// timer = setInterval(() => {
|
|
// riverHeight += 0.25
|
|
// river.extrudedHeight = riverHeight
|
|
// if (riverHeight >= maxHeight) {
|
|
// riverHeight = maxHeight
|
|
// // 清除定时器
|
|
// }
|
|
// }, 500)
|
|
},
|
|
useDrawRiver(boundary,waterImg,extrudedHeight = 18) {
|
|
let riverHeight = extrudedHeight
|
|
let that = this;
|
|
const polygon = this.useCreatePolygonGeometry(boundary,riverHeight)
|
|
let river = new Cesium.Primitive({
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|
geometry: polygon,
|
|
}),
|
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|
aboveGround: true,
|
|
}),
|
|
show: true,
|
|
asynchronous: false,
|
|
releaseGeometryInstances: false,
|
|
})
|
|
|
|
const riverMaterial = new Cesium.Material({
|
|
fabric: {
|
|
type: 'Water',
|
|
uniforms: {
|
|
baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5), // 水的基本颜色
|
|
normalMap: waterImg, // 水的法线贴图
|
|
frequency: 500.0, // 水波纹的数量
|
|
animationSpeed: 0.05, // 水的流速
|
|
amplitude: 5, // 水波纹振幅
|
|
specularIntensity: 5, // 镜面反射强度
|
|
},
|
|
},
|
|
})
|
|
const scene = window.viewer.scene
|
|
river.appearance.material = riverMaterial
|
|
scene.primitives.add(river) //添加到场景
|
|
river.appearance.material = riverMaterial
|
|
|
|
Object.defineProperty(river, 'extrudedHeight', {
|
|
get() {
|
|
return riverHeight
|
|
},
|
|
set(newVal) {
|
|
if (typeof newVal !== 'number') {
|
|
return
|
|
}
|
|
riverHeight = newVal
|
|
river._state = 3 // 重置primitive状态触发cesium update方法
|
|
river._appearance = undefined
|
|
river.geometryInstances.geometry = that.useCreatePolygonGeometry(boundary, riverHeight)
|
|
},
|
|
})
|
|
|
|
return river
|
|
},
|
|
useCreatePolygonGeometry(boundary, extrudedHeight) {
|
|
const polygon = new Cesium.PolygonGeometry({
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(boundary)),
|
|
extrudedHeight,
|
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|
})
|
|
return polygon
|
|
},
|
|
addWaterEffect(){
|
|
// 流动水面效果
|
|
const sampleData = new Cesium.GeometryInstance({
|
|
geometry: new Cesium.RectangleGeometry({
|
|
rectangle: Cesium.Rectangle.fromDegrees(113.95, 22.48, 113.99, 22.52),
|
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|
}),
|
|
});
|
|
const polygon = new Cesium.PolygonGeometry({
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(
|
|
Cesium.Cartesian3.fromDegreesArray(this.coorArr.flat())
|
|
),
|
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|
});
|
|
const geometry = Cesium.PolygonGeometry.createGeometry(polygon);
|
|
this._waterPrimitive = new Cesium.Primitive({
|
|
geometryInstances: this.createPolygon(),
|
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|
material: new Cesium.Material({
|
|
fabric: {
|
|
type: "Water",
|
|
uniforms: {
|
|
baseWaterColor: new Cesium.Color(
|
|
64 / 255.0,
|
|
157 / 255.0,
|
|
253 / 255.0,
|
|
0.5
|
|
),
|
|
normalMap: "./Build/Cesium/Assets/Textures/waterNormals.jpg",
|
|
frequency: 1000.0,
|
|
animationSpeed: 0.1,
|
|
amplitude: 10,
|
|
specularIntensity: 10,
|
|
},
|
|
},
|
|
}),
|
|
}),
|
|
});
|
|
this._viewer.scene.primitives.add(this._waterPrimitive)
|
|
window.waterPrimitive = this._waterPrimitive
|
|
},
|
|
createPolygon(height=0){
|
|
return new Cesium.GeometryInstance({
|
|
geometry: new Cesium.PolygonGeometry({
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(
|
|
Cesium.Cartesian3.fromDegreesArray(this.coorArr.flat())
|
|
),
|
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|
extrudedHeight:height,
|
|
}),
|
|
})
|
|
}
|
|
},
|
|
mounted(){
|
|
this.initViewer()
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|