<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<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>
<script src="/offline_data/newjunbiao/bmgl-plot.min.js"></script>
<script src="/offline_data/newjunbiao/turf.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
.div-layer {
animation: jump 4s infinite linear;
background: url("/offline_data/newjunbiao/map-title-b.png") no-repeat;
background-size: 100% 100%;
width: 70px;
height: 59px;
font-size: 14px;
display: flex;
padding-top: 8px;
box-sizing: border-box;
/* align-items: center; */
justify-content: center;
color: aliceblue;
/* scale: 2; */
}
@keyframes jump {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.dc-tian-w-satellite",
infoBox: false,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
113.10819626,
29.3430233,
10000
),
});
//管理彈出框的函數
var manager = new bmgl.div.DivLayerManager(viewer, {
click: function (detail, position) {
console.log(detail, position);
},
});
// 隨機生成10個點
var points = turf.randomPoint(10, {
bbox: [113.086, 29.3571, 113.14, 29.327],
});
let fs = points.features;
fs.forEach((item, index) => {
let pos = item.geometry.coordinates;
createPopup(index, pos);
});
//創建popup
function createPopup(index, pos) {
// var pos = myData.pos;
var pp = bmgl.Cartesian3.fromDegrees(pos[0], pos[1]);
var popupLayer = new bmgl.div.DivLayer(
'<div class="div-layer">' + `測試點${index}` + "</div>",
pp,
{
}
);
manager.addLayer(popupLayer);
}
</script>
</body>
</html>