<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.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>
var dataSource = new bmgl.CustomDataSource("marker");
var viewer = null;
var billboard = null;
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
});
createPin();
combineListener();
function createPin() {
viewer.dataSources.add(dataSource);
for (let index = 0; index < 100; index++) {
var demoData = {
name: "demo" + index,
position: bmgl.Cartesian3.fromDegrees(
Math.random() * (117 - 116) + 116,
Math.random() * (40 - 39) + 39
),
billboard: {
show: true, // default
eyeOffset: new bmgl.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: bmgl.HorizontalOrigin.CENTER, // default
verticalOrigin: bmgl.VerticalOrigin.BOTTOM, // default: CENTER
scale: 1.0, // default: 1.0
alignedAxis: bmgl.Cartesian3.ZERO, // default
width: 40, // default: undefined
height: 40, // default: undefined
pixelOffset: new bmgl.Cartesian2(0, 0),
},
};
dataSource.entities.add(demoData);
dataSource.entities.values.forEach((entity) => {
entity.billboard.image = "/offline_data/mark-icon.png"; //图片配置在public的static目录下
});
billboard = viewer.entities.add(demoData);
}
}
//点聚合功能实现
function combineListener() {
dataSource.clustering.enabled = true;
dataSource.clustering.pixelRange = 30;
dataSource.clustering.minimumClusterSize = 2;
dataSource.clustering.clusterEvent.addEventListener(function (
clusteredEntities,
cluster
) {
// 关闭自带的显示聚合数量的标签
cluster.label.show = false;
cluster.billboard.show = true;
cluster.billboard.id = cluster.label.id;
cluster.billboard.verticalOrigin =
bmgl.VerticalOrigin.BOTTOM;
// 根据聚合数量的多少设置不同层级的图片以及大小
if (clusteredEntities.length >= 10) {
cluster.billboard.image = combineIconAndLabel(
"/bmgl/cluster/jhGray.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 60;
cluster.billboard.height = 60;
} else if (clusteredEntities.length >= 6) {
cluster.billboard.image = combineIconAndLabel(
"/bmgl/cluster/jhBlue.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 55;
cluster.billboard.height = 55;
} else if (clusteredEntities.length >= 3) {
cluster.billboard.image = combineIconAndLabel(
"/bmgl/cluster/jhGreen.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 50;
cluster.billboard.height = 50;
} else {
cluster.billboard.image = combineIconAndLabel(
"/bmgl/cluster/jhRed.png",
clusteredEntities.length,
64
);
cluster.billboard.width = 45;
cluster.billboard.height = 45;
}
});
// 创建画布对象
function 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;
}
}
</script>
</body>
</html>
源码