<!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="http://bigemap.com/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
.bmgl-widget-credits {
display: none;
}
.tools {
position: absolute;
z-index: 9;
width: 200px;
height: 40px;
top: 20px;
left: 20px;
}
.div-layer {
color: white;
width: 200px;
height: 60px;
line-height: 20px;
font-family: "楷體";
font-weight: 400;
background-color: #3b474e;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-left: 10px;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container">
<div class="tools">
<button class="one">清除所有的光錐</button>
<!-- <button class="two">隨機生成光錐</button> -->
</div>
</div>
<script type="module">
import { ConeGlow } from "/offline_data/gz/ConeGlow.js";
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.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 glowArr = [];
// 彈出框管理對象
var manager = new bmgl.div.DivLayerManager(viewer, {
click: function (detail, position) {
// console.log(detail, position);
},
});
var popupLayer = null;
var aquaGlow = new ConeGlow(
viewer,
bmgl.Cartesian3.fromDegrees(104, 30),
{
height: 500,
bottomRadius: 200,
color: bmgl.Color.AQUA,
// 添加一些額外的數據用于判斷
extraData: {
pos: [104, 30],
attr: "藍色光錐",
},
}
);
var redGlow = new ConeGlow(
viewer,
bmgl.Cartesian3.fromDegrees(104.01, 30.04),
{
height: 500,
bottomRadius: 200,
color: bmgl.Color.RED,
extraData: {
pos: [104.01, 30.04],
attr: "紅色光錐",
},
}
);
var yellowGlow = new ConeGlow(
viewer,
bmgl.Cartesian3.fromDegrees(104.03, 30.04),
{
height: 500,
bottomRadius: 200,
color: bmgl.Color.YELLOW,
extraData: {
pos: [104.03, 30.04],
attr: "黃色光錐",
},
}
);
glowArr.push(aquaGlow);
glowArr.push(redGlow);
glowArr.push(yellowGlow);
viewer.scene.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(104, 30, 30000),
});
//創建事件處理對象
var handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
//設置點擊事件
handler.setInputAction((e) => {
var endPosition = e.position;
triggerFn(endPosition);
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
function triggerFn(endPosition) {
var obj = viewer.scene.pick(endPosition);
// console.log("obj", obj);
if (bmgl.defined(obj)) {
if (obj.primitive && obj.primitive.extraData && obj.primitive.extraData.attr) {
var myData = obj.primitive.extraData;
// console.log("extraData", myData);
if (popupLayer != null) {
manager.removeLayer(popupLayer);
popupLayer = null;
}
var pos = myData.pos;
let pp = bmgl.Cartesian3.fromDegrees(pos[0], pos[1]);
popupLayer = new bmgl.div.DivLayer(
'<div class="div-layer">' +
'<h5>'+`${myData.attr}`+ '</h5>'+
'<h5>'+`經緯度:${myData.pos.toString()}`+ '</h5>'+
"</div>",
pp,
{
width: 50,
height: 50,
offset: {
x: 0,
y: -90,
},
}
);
manager.addLayer(popupLayer);
}
} else {
if (popupLayer != null) {
manager.removeLayer(popupLayer);
popupLayer = null;
}
return;
}
}
document
.querySelector(".one")
.addEventListener("click", function (e) {
glowArr.forEach((v) => {
//移除光錐
v.remove();
});
glowArr = [];
});
</script>
</body>
</html>