<!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/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;
}
.div-layer {
color: white;
width: auto;
height: 20px;
line-height: 20px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial,
sans-serif;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container">
</div>
<script>
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
104.03678150013934,
30.613096395022374,
838.814509886492
),
orientation: {
heading: 0.14291678809310948,
pitch: -0.3133525424755843,
roll: 6.275168271208376,
},
});
var manager = new bmgl.div.DivLayerManager(viewer, {
click: function (detail, position) {
// console.log(detail, position);
},
});
var popupLayer = null;
var handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
var billboards = viewer.scene.primitives.add(
new bmgl.BillboardCollection()
);
handler.setInputAction((e) => {
var endPosition = e.endPosition;
triggerFn(endPosition);
}, bmgl.ScreenSpaceEventType.MOUSE_MOVE);
fetch("/offline_data/newjunbiao/dx.json")
.then((res) => res.json())
.then((res) => {
console.log(res);
var fsArray = res.features;
fsArray.forEach((v, i) => {
var pos = v.geometry.coordinates;
var cc = billboards.add({
image: "/offline_data/newjunbiao/food.png",
position: bmgl.Cartesian3.fromDegrees(
pos[0],
pos[1],
1
),
width:40,
height:40,
});
cc.extraData = {
pos: pos,
attr: v.properties,
};
});
});
function triggerFn(endPosition) {
var obj = viewer.scene.pick(endPosition);
if (bmgl.defined(obj)) {
if (obj.primitive && obj.primitive.extraData) {
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">' +
`${myData.attr.name}` +
"</div>",
pp,
{
width: 50,
height: 50,
offset: {
x: 0,
y: -30,
},
}
);
manager.addLayer(popupLayer);
}
} else {
if (popupLayer != null) {
manager.removeLayer(popupLayer);
popupLayer = null;
}
return;
}
}
</script>
</body>
</html>
源码