<!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>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
</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",
});
const initClusterCollection = (viewer) => {
// console.log(bmgl,'bbbb');
new bmgl.GeoJsonDataSource()
.load("/bmgl/cluster/poi.json")
.then((dataSource) => {
viewer.dataSources.add(dataSource);
// 設置聚合參數
dataSource.clustering.enabled = true;
dataSource.clustering.pixelRange = 60;
dataSource.clustering.minimumClusterSize = 4;
// foreach用于調用數組的每個元素，并將元素傳遞給回調函數。
dataSource.entities.values.forEach((entity) => {
// console.log(entity);
// 將點拉伸一定高度，防止被地形壓蓋
entity.position._value.z += 50.0;
// 使用大小為64*64的icon，縮小展示poi
entity.billboard = {
image: "/bmgl/cluster/point.png",
width: 32,
height: 32,
};
entity.label = {
// text: "POI",
text:entity._name,
font: "bold 15px Microsoft YaHei",
// 豎直對齊方式
verticalOrigin: bmgl.VerticalOrigin.CENTER,
// 水平對齊方式
horizontalOrigin: bmgl.HorizontalOrigin.LEFT,
// 偏移量
pixelOffset: new bmgl.Cartesian2(-14.0,-28.0),
};
});
// 添加監聽函數
dataSource.clustering.clusterEvent.addEventListener(
function (clusteredEntities, cluster) {
// 關閉自帶的顯示聚合數量的標簽
cluster.label.show = false;
cluster.billboard.show = true;
cluster.billboard.verticalOrigin =
bmgl.VerticalOrigin.BOTTOM;
// 根據聚合數量的多少設置不同層級的圖片以及大小
if (clusteredEntities.length >= 20) {
cluster.billboard.image =
combineIconAndLabel(
"/bmgl/cluster/jhGray.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 72;
cluster.billboard.height = 72;
// cluster.billboard.scale = 0.6;
} else if (clusteredEntities.length >= 12) {
cluster.billboard.image =
combineIconAndLabel(
"/bmgl/cluster/jhBlue.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 64;
cluster.billboard.height = 64;
// cluster.billboard.scale = 0.6;
} else if (clusteredEntities.length >= 8) {
cluster.billboard.image =
combineIconAndLabel(
"/bmgl/cluster/jhGreen.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 56;
cluster.billboard.height = 56;
// cluster.billboard.scale = 0.6;
} else {
cluster.billboard.image =
combineIconAndLabel(
"/bmgl/cluster/jhRed.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 40;
cluster.billboard.height = 40;
// cluster.billboard.scale = 0.6;
}
}
);
});
};
// 將使用的圖片和文字聯合轉換為canvas
const combineIconAndLabel = (url, label, size) => {
// 創建畫布對象
let canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
let ctx = canvas.getContext("2d");
let promise = new bmgl.Resource.fetchImage(url).then(
(image) => {
try {
ctx.drawImage(image, 0, 0);
} catch (e) {
console.log(e);
}
ctx.fillStyle = bmgl.Color.WHITE.toCssColorString();
ctx.font = "bold 12px Microsoft YaHei";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(label, size / 4, size / 4);
// console.log(`ctx`,ctx);
return canvas;
}
);
return promise;
};
// 初始化點位聚合
initClusterCollection(viewer)
</script>
</body>
</html>