<!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='/bmgl/osgb/loudong/loudongshuju.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none
}
.divtip{
display:none;
position: absolute;
height:300px;
width:400px;
top: 30px;
right: 100px;
z-index:2;
background-color: #e1e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
border-radius: 10px;
}
li{
list-style: none;
display:flex;
flex-direction: row;
align-items: center;
font-size:20px;
border-bottom: 1px solid rgba(100, 98, 98, 0.35);
width:100%;
height:60px
}
li:last-child {
border-bottom: none;
}
li span{
line-height:60px;
display:block;
text-align: center;
width:100px;
height:100%;
border-right: 1px solid rgba(100, 98, 98, 0.35)
}
li p{
margin-left: 20px;
}
.checkboxdiv{
position: absolute;
top: 30px;
left: 150px;
z-index: 2;
font-size: 20px;
background-color: white;
padding: 10px;
display: flex;
}
.checkboxdiv input{
height:25px;
width:25px;
}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div class="divtip" id="divtip">
<li>
<span>名 称 ：</span>
<p id="namep"></p>
</li>
<li>
<span>居住人数 ：</span>
<p id="peoplep">万人</p>
</li>
<li>
<span>负责人 ：</span>
<p>xxxx</p>
</li>
<li>
<span>修建时间 ：</span>
<p>20222-01-20</p>
</li>
<li>
<span>修建状态 ：</span>
<p>修建完毕</p>
</li>
</div>
<div class="checkboxdiv">
<input id="jccheckbox" type="checkbox">深度检测
</div>
<script>
let sdcha = false
document.getElementById('jccheckbox').addEventListener('click',function (e){
if (this.checked){
sdcha = true
} else {
sdcha = false
}
})
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu',requestRenderMode: false});
let draw = false
var scene = viewer.scene;
var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid = scene.globe.ellipsoid; //得到当前三维场景的椭球体
//去除默认的entity点击事件
viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);//不会有单击效果
viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);//不会有双击击效果
//不启用地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = false;
var tilesets = new bmgl.BM3DTileset({ url: '/bmgl/osgb/loudong/tileset.json' });
tilesets.readyPromise.then(function (tileset) {
tilesets.type = 'osgb'
viewer.scene.primitives.add(tileset);
default_HeadingPitchRange = new bmgl.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
viewer.zoomTo(tileset, default_HeadingPitchRange);
var cartographic = bmgl.Cartographic.fromCartesian(tileset.boundingSphere.center);
var delta_lng = 0, delta_lat = 0;
var surface = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0.0);
var offset = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, -163);
var translation = bmgl.Cartesian3.subtract(offset, surface, new bmgl.Cartesian3());
tileset.modelMatrix = bmgl.Matrix4.fromTranslation(translation);
jianalllou()
jianfclou()
}).otherwise(function (error) {
console.log(error);
});
let passClickentity = '' //之前点击的entity
//定义点击事件
handler.setInputAction(function (e) {
var entity=viewer.scene.pick(e.position);
var entitys=viewer.scene.drillPick(e.position);
console.log(entitys)
if (entity) {
console.log(entity)
if (!sdcha){
entitys.forEach(v=>{
console.log('打印的v---',v.id)
if (v.id != undefined){
if (v.id.hasOwnProperty('type')){
if (v.id.type == 'all') {
entity = v
return
}
}
}
})
}
//判断是否是多边形的entitiy
if (entity.hasOwnProperty('id')) {
let materialcolor = entity.id.polygon.material.getValue()
materialcolor = materialcolor.color
if (passClickentity != '') {
let passentity_materialcolor = passClickentity.id.polygon.material.getValue()
passentity_materialcolor = passentity_materialcolor.color
passClickentity.id.polygon.material = new bmgl.Color(passentity_materialcolor.red,passentity_materialcolor.green,passentity_materialcolor.blue,0.01)
}
passClickentity = entity
document.getElementById('peoplep').innerText = entity.id.people+'万人'
document.getElementById('namep').innerText = entity.id.name
document.getElementById('divtip').style.display = 'block'
entity.id.polygon.material = passClickentity.id.polygon.material = new bmgl.Color(materialcolor.red,materialcolor.green,materialcolor.blue,0.4)
}else {
if (passClickentity != '') {
passClickentity.id.polygon.material = bmgl.Color.RED.withAlpha(0.01)
passClickentity = ''
}
document.getElementById('divtip').style.display = 'none'
}
}
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
//先获取每栋楼的经纬度 绘制多边形 让其覆盖在倾斜摄影上面 通过点击事件判断点击的那个polygon 来间接判断楼栋
function jianalllou() {
polygons.forEach(v=>{
let loudong = viewer.entities.add({
name: v.name,
people:v.people,
type:'all',
polygon: {
hierarchy: bmgl.Cartesian3.fromDegreesArray(v.latlngs),
material: bmgl.Color.RED.withAlpha(0.01),
classificationType:bmgl.ClassificationType.BM_3D_TILE , //让多边形覆盖在模型上
}
});
})
}
function jianfclou(){
polygons.forEach(v=>{
let loudongupceng = viewer.entities.add({
name: v.name+'上层',
people:v.people/2,
color:'pink',
type:'上层',
polygon: {
hierarchy: bmgl.Cartesian3.fromDegreesArray(v.latlngs),
material: bmgl.Color.PINK.withAlpha( 0.01),
height:40, //多边形提升高度
extrudedHeight: 70.0, //向上升高高度
}
});
let loudongdownceng = viewer.entities.add({
name: v.name+'下层',
people:v.people/2,
type:'下层',
polygon: {
hierarchy: bmgl.Cartesian3.fromDegreesArray(v.latlngs),
material: bmgl.Color.GREEN.withAlpha( 0.01),
height:0, //多边形提升高度
extrudedHeight: 40.0, //向上升高高度
}
});
})
}
</script>
</body>
</html>
源码