<!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/dom-to-image.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
.popup {
position: absolute;
z-index: -999;
}
.divtest {
width: 60px;
height: 60px;
border-radius: 50%;
/* background-color: aqua; */
/* background: url("./MemorialHall.jpg"); */
/* background-size: 100% 100%; */
}
.myBillboard_border {
margin: 10px auto auto;
width: 0px;
height: 50px;
border: 2px dashed #ccc;
}
.one {
background: url("/offline_data/MemorialHall.jpg");
background-size: 100% 100%;
}
.two {
background: url("/offline_data/MunicipalStadium.jpg");
background-size: 100% 100%;
}
.three {
background: url("/offline_data/MaiShuaiOne.jpg");
background-size: 100% 100%;
}
.four {
background: url("/offline_data/MaiShuaiTwo.jpg");
background-size: 100% 100%;
}
.five {
background: url("/offline_data/101.jpg");
background-size: 100% 100%;
}
.pp {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
z-index: 99;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container">
<div class="popup p1">
<div class="divtest one"></div>
<div class="myBillboard_border"></div>
</div>
<div class="popup p2">
<div class="divtest two"></div>
<div class="myBillboard_border"></div>
</div>
<div class="popup p3">
<div class="divtest three"></div>
<div class="myBillboard_border"></div>
</div>
<div class="popup p4">
<div class="divtest four"></div>
<div class="myBillboard_border"></div>
</div>
<div class="popup p5">
<div class="divtest five"></div>
<div class="myBillboard_border"></div>
</div>
</div>
<script>
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
});
var arr = [
{
text: "孫中山紀念館",
pos: bmgl.Cartesian3.fromDegrees(
121.56022374476201,
25.04015692206685,
20
),
},
{
text: "臺北體育館",
pos: bmgl.Cartesian3.fromDegrees(
121.55205014559142,
25.05146768874659,
20
),
},
{
text: "麥帥一橋",
pos: bmgl.Cartesian3.fromDegrees(
121.57238131813713,
25.05259082393209,
20
),
},
{
text: "麥帥二橋",
pos: bmgl.Cartesian3.fromDegrees(
121.57160446258104,
25.056269716012096,
20
),
},
{
text: "101大廈",
pos: bmgl.Cartesian3.fromDegrees(
121.56403191180483,
25.034297094920767,
20
),
},
];
arr.forEach((v, i) => {
domtoimage
.toPng(document.querySelector(`.p${i + 1}`))
.then(function (dataUrl) {
var entity = viewer.entities.add({
position: v.pos,
billboard: {
// heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
image: dataUrl,
// distanceDisplayCondition:new bmgl.DistanceDisplayCondition(0,3000),
},
label: {
scale: 1,
// heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
fillColor: bmgl.Color.BLUE,
text: v.text,
font: "24px 楷體",
pixelOffset: new bmgl.Cartesian2(0, -80),
// distanceDisplayCondition:new bmgl.DistanceDisplayCondition(0,3000),
},
});
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
});
viewer.flyTo(viewer.entities);
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
121.63203165484049,
24.998267627700915,
2307.679704961824
),
orientation: {
heading: 5.5398453798179075,
pitch: -0.40536778489726233,
roll: 0.0001603887351926403,
},
});
</script>
</body>
</html>