<!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;
}
.name {
color: #fff;
font-family: Arial, Helvetica, 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,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開(kāi)啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
//全局彈框信息
window.popup = null;
//殘疾人的點(diǎn)聚合
var demoCluster = new bmgl.fun.Cluster(viewer, {
//聚合半徑
pixel: 160,
//設(shè)置相機(jī)距離多少米內(nèi)，禁用聚合
disableClusteringAtDistance: 2000,
clickFitView: true,
// 提供給聚合的點(diǎn)擊事件，detail是點(diǎn)擊的實(shí)體,點(diǎn)擊會(huì)飛向具體的實(shí)體
click: function (detail) {
console.log("dddd", detail);
if (!detail) {
return;
}
var data = detail.items;
if (data.length > 1) {
return;
} else {
let Info = {
name: data[0].extraData.data.name,
adderss: data[0].extraData.data.description,
};
let l1 = data[0].position;
console.log("l1", l1);
let pos = bmgl.Cartesian3.fromDegrees(l1.lng, l1.lat);
drawInfo(Info, pos);
}
},
label: {
font: "20px arial",
fillColor: bmgl.Color.WHITE,
pixelOffset: new bmgl.Cartesian2(0, -25),
},
icon: {
image: "/offline_data/newjunbiao/1296db.png",
scale: 1.0,
},
billboard: {
image: "/offline_data/newjunbiao/pin.png",
scale: 0.2,
},
});
//彈框信息層
var popupManager = new bmgl.div.DivLayerManager(viewer, {
click: function (detail, position) {
if (!detail) {
return;
} else {
console.log("detail");
}
},
});
fetch("/offline_data/newjunbiao/bg.json")
.then((data) => data.json())
.then((res) => {
// console.log("res", res);
let fes = res.features;
let demo = [];
fes.forEach((v, i) => {
// console.log("res", v, i);
let pos = v.geometry.coordinates;
let item = {
position: {
lng: parseFloat(pos[0]),
lat: parseFloat(pos[1]),
},
extraData: {
type: "pointInfo",
data: v.properties,
},
};
demo.push(item);
});
demoCluster.addLayers(demo);
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
103.91285419,
30.60541294,
4000
),
orientation: {
heading: 0,
pitch: bmgl.Math.toRadians(-45),
roll: 0,
},
});
});
//展示信息
function drawInfo(Info, pos) {
console.log("info", Info, pos);
if (window.popup != null) {
popupManager.removeLayer(window.popup);
window.popup = null;
}
let pp = pos;
// <h5>地址:${Info.adderss}</h5>
window.popup = new bmgl.div.DivLayer(
`<div class='label'>
<h5 class="name">${Info.name}</h5>
</div>`,
pp,
{
width: 80,
height: 80,
offset: {
x: 0,
y: -24,
},
}
);
popupManager.addLayer(window.popup);
}
var handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((e) => {
console.log(e);
let pos = viewer.scene.pick(e.position);
if (!bmgl.defined(pos)) {
if (window.popup != null) {
popupManager.removeLayer(window.popup);
window.popup = null;
}
}
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
</html>