<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link
rel="stylesheet"
href="http://bigemap.com/offline_data/newjunbiao/elementui.css"
/>
<script src="/offline_data/snoweffect.js"></script>
<!-- dat.gui.js -->
<script src="/offline_data/dat.gui.min.js"></script>
<title>積雪效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL =
"http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-tian-w-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
this.load3dtiles();
const thickness = 0.8;
const speed = 300;
const density = 10;
const snow = new SnowEffect({
thickness,
speed,
density,
});
snow.addTo(viewer);
this.initBase(snow);
},
//加載傾斜攝影效果
load3dtiles() {
let tilesets = new bmgl.BM3DTileset({
url: "/offline_data/dayanta/tileset.json",
maximumScreenSpaceError: 16,
});
tilesets.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
let default_HeadingPitchRange =
new bmgl.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
);
viewer.zoomTo(
tileset,
default_HeadingPitchRange
);
let cartographic =
bmgl.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
let delta_lng = 0,
delta_lat = 0;
let surface = bmgl.Cartesian3.fromRadians(
cartographic.longitude + delta_lng,
cartographic.latitude + delta_lat,
0.0
);
let offset = bmgl.Cartesian3.fromRadians(
cartographic.longitude + delta_lng,
cartographic.latitude + delta_lat,
-420.0
);
let translation = bmgl.Cartesian3.subtract(
offset,
surface,
new bmgl.Cartesian3()
);
tileset.modelMatrix =
bmgl.Matrix4.fromTranslation(
translation
);
})
.otherwise(function (error) {
console.log(error);
});
},
//dat.gui
initBase(snow) {
var _this = this;
let gui = new dat.GUI();
gui.domElement.style =
"position:absolute;top:10px;left:10px;";
const object = {
speed: 300,
density: 10,
thickness: 0.8,
enable: true,
};
gui.add(object, "speed", 100, 500, 10)
.name("速度")
.onChange(function (val) {
snow.speed = val;
});
gui.add(object, "density", 2, 20, 1)
.name("落雪大小")
.onChange(function (val) {
snow.density = val;
});
gui.add(object, "thickness", 0, 1, 0.1)
.name("積雪厚度")
.onChange(function (val) {
snow.thickness = val;
});
gui.add(object, "enable")
.name("顯示/隱藏")
.onChange(function (val) {
snow.enabled = val;
});
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>