<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link 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%; }
.info{
position: fixed;
top:0;
color: #8a6d3b;
z-index: 99;
margin: 0;
background-color: #fcf8e3;
border-color: #faebcc;
left: 0;
right: 0;
text-align: center;
}
</style>
<title></title>
</head>
<body>
<div id='container'></div>
<div class="info">
放大地圖 ，可以查看更多的標注
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
requestRenderMode:false,
mapId: 'bigemap.zhongkexingtu',
});
var pinBuilder=new bmgl.PinBuilder();
for (let i = 0; i <= 200; i++) {
viewer.entities.add({
id:(i+1),//設置一個id,方便進行點擊判斷
position:bmgl.Cartesian3.fromDegrees(Math.random()*100/1000+104,Math.random()*100/1000+30),
billboard:{
//當前與相機的距離在3000以內時，會顯示
distanceDisplayCondition:new bmgl.DistanceDisplayCondition(0,3000),
image:pinBuilder.fromText((i+1),bmgl.Color.fromRandom({alpha:1}),50),
heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
},
})
}
viewer.entities.add({
position:bmgl.Cartesian3.fromDegrees(104.05,30.05),
billboard:{
image:pinBuilder.fromText(('A'),bmgl.Color.RED,50),
heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
},
});
viewer.flyTo(viewer.entities);
</script>
</body>
</html>