<!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>part_test</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',
requestRenderMode:false,
});
viewer.scene.globe.depthTestAgainstTerrain=false;
var cluster=new bmgl.EntityCluster({
enabled:true,//启用聚合
pixelRange:80,//聚合像素距离
minimumClusterSize:2 //最小聚合量
});
var dataSource=new bmgl.CustomDataSource('bigemap-data');
dataSource.clustering=cluster;
dataSource.clustering.clusterEvent.addEventListener(function(entities, cluster) {
cluster.label.show = true;
cluster.label.showBackground=true;
cluster.label.backgroundPadding=new bmgl.Cartesian2(5,5);
cluster.label.text =entities.length.toLocaleString();
cluster.label.font='16px arial';
cluster.label.backgroundColor=bmgl.Color.BLUE.withAlpha(0.5);
});
for (var i=0;i<=5000;i++){
dataSource.entities.add({
position:bmgl.Cartesian3.fromDegrees(-180+Math.random()*360,-90+Math.random()*180),
label:{
heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
fillColor:bmgl.Color.YELLOW,
text:i.toString(),
font:'15px arial'
}
});
}
viewer.dataSources.add(dataSource);
</script>
</body>
</html>
源码