<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="/offline_data/newjunbiao/dat.gui.min.js"></script>
<script src="/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container"></div>
<script type="module">
import { modifyMap } from "/offline_data/newjunbiao/fslj.js";
var gui = null;
var guiControl = {
walleffect: "1",
};
window.wallObj = null;
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.amap-map",
infoBox: false,
requestRender: false,
});
console.log("vvv",viewer,viewer.imageryLayers)
let base = viewer.imageryLayers.get(0);
console.log("mybase", base);
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
modifyMap(viewer);
// viewer.camera.setView({
// destination: bmgl.Cartesian3.fromDegrees(104, 30, 2000),
// });
function initwall() {
let wallArr = [
104.0693235, 30.57452871, 104.0815115, 30.57452871,
104.0815115, 30.56455204, 104.0693235, 30.56455204,
104.0693235, 30.57452871,
];
wallObj = viewer.entities.add({
wall: {
positions: bmgl.Cartesian3.fromDegreesArray(wallArr),
minimumHeights: new Array(wallArr.length / 2).fill(0),
maximumHeights: new Array(wallArr.length / 2).fill(200),
material: new bmgl.BMMaterial.WallArrowMaterial({
image: "/offline_data/newjunbiao/images/arrow.png",
color: bmgl.Color.RED,
repeat: 3,
speed: 2,
}),
},
});
viewer.zoomTo(wallObj);
}
function initGui() {
gui = new dat.GUI();
// console.log(gui.domElement,"dom");
let mydom = gui.domElement;
mydom.style.position = "absolute";
mydom.style.top = "40px";
mydom.style.left = "40px";
const folder1 = gui.addFolder("墻體效果切換", {
closed: false,
});
folder1.open();
folder1
.add(guiControl, "walleffect", {
一號效果: "1",
二號效果: "2",
三號效果: "3",
四號效果: "4",
五號效果: "5",
六號效果: "6",
})
.onChange((value) => {
console.log("myValue", value);
switch (value) {
case "1": {
wallObj.wall.material =
new bmgl.BMMaterial.WallArrowMaterial({
image: "/offline_data/newjunbiao/images/arrow.png",
color: bmgl.Color.RED,
repeat: 3,
speed: 2,
});
break;
}
case "2": {
wallObj.wall.material =
new bmgl.BMMaterial.WallFocusMaterial({
image: "/offline_data/newjunbiao/images/wall_color.png",
color: bmgl.Color.YELLOW,
repeat: 3,
});
break;
}
case "3": {
wallObj.wall.material =
new bmgl.BMMaterial.WallGradientMaterial({
image: "/offline_data/newjunbiao/images/wall-gradually.png",
color: bmgl.Color.RED,
});
break;
}
case "4": {
wallObj.wall.material =
new bmgl.BMMaterial.WallPaddingMaterial({
image: "/offline_data/newjunbiao/images/wall_gra.png",
});
break;
}
case "5": {
wallObj.wall.material =
new bmgl.BMMaterial.WallFlowMaterial({
color: bmgl.Color.BLUE,
});
break;
}
case "6": {
wallObj.wall.material =
new bmgl.BMMaterial.WallTechMaterial({
image1: "/offline_data/newjunbiao/images/wall_tech_3.png",
image2: "/offline_data/newjunbiao/images/wall_tech_1.png",
});
break;
}
}
viewer.scene.requestRender();
});
}
initwall();
initGui();
</script>
</body>
</html>
源碼