<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://m.bjxdny.cn:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://m.bjxdny.cn:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<script src="http://m.bjxdny.cn/offline_data/newjunbiao/dat.gui.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<title>線</title>
</head>
<body>
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = "http://m.bjxdny.cn:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
infoBox: false,
requestRenderMode: false,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
var glowingLine = viewer.entities.add({
name: "line",
polyline: {
positions: bmgl.Cartesian3.fromDegreesArray([
107.5147351, 35.8500172, 107.516095, 35.8476618,
107.5180401, 35.8428221, 107.5207776, 35.8404788,
107.5228137, 35.8387367,
]),
width: 8.0,
material: new bmgl.BMMaterial.PolylineArrowSlideMaterial({
color: bmgl.Color.YELLOW,
count: 3,
speed: 3,
image: "/offline_data/newjunbiao/arrow_line.png",
}),
},
});
viewer.flyTo(viewer.entities);
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,
});
var guiControl = {
lineeffect: "1",
};
folder1.open();
folder1
.add(guiControl, "lineeffect", {
虛線材質: "3",
滑塊移動: "2",
箭頭線: "1",
七彩線: "4",
閃爍線: "5",
發光線: "6",
})
.onChange((value) => {
console.log("myValue", value);
switch (value) {
case "1": {
glowingLine.polyline.material =
new bmgl.BMMaterial.PolylineArrowSlideMaterial(
{
color: bmgl.Color.YELLOW,
count: 3,
speed: 3,
image: "/offline_data/newjunbiao/arrow_line.png",
}
);
break;
}
case "2": {
glowingLine.polyline.material =
new bmgl.BMMaterial.PolylineFlowMaterial({
color: bmgl.Color.fromCssColorString(
"red"
),
speed: 3,
});
break;
}
case "3": {
glowingLine.polyline.material =
new bmgl.BMMaterial.PolylineMultiDashMaterial(
{
color: bmgl.Color.RED,
}
);
break;
}
case "4": {
glowingLine.polyline.material =
new bmgl.BMMaterial.PolylineTrailMaterial({
image: "/offline_data/newjunbiao/colors.png",
});
break;
}
case "5": {
glowingLine.polyline.material =
new bmgl.BMMaterial.PolylineTwinkleMaterial(
{
color: bmgl.Color.fromCssColorString(
"#e74032"
),
speed: 3,
}
);
break;
}
case "6": {
glowingLine.polyline.material =
new bmgl.PolylineGlowMaterialProperty({
glowPower: 0.2,
color: bmgl.Color.ORANGE,
});
break;
}
}
viewer.scene.requestRender();
});
}
initGui();
</script>
</body>
</html>