<!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.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bm-dynamic-layer{
/*重要*/
display: none;
user-select: none; /*禁止选中*/
pointer-events: none; /*鼠标穿透*/
/*重要*/
position: fixed;
top:0;
left:0;
width: 320px;
height:250px;
z-index: 9999;
}
.bm-dynamic-layer .line{
position: absolute;
left:0;
width:0;
height:100px;
bottom: 0;
background:url("/bmgl//images/line.png")
}
.bm-dynamic-layer .main{
display: none;
position: absolute;
top:0;
left:50px;
right:0;
bottom: 100px;
background:url("/bmgl/images/layer_border.png") no-repeat;
background-size:100% 100%;
color:white;
padding: 20px 5px 5px 20px;
}
.bm-dynamic-layer .light{
position: absolute;
z-index: 2;
width: 100%;
height:100%;
}
.bmgl-widget-credits{display:none}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div class='bm-dynamic-layer' id='one'>
<div class='line'></div>
<div class='main'>
</div>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.zhongkexingtu'});
viewer.camera.setView({
destination:new bmgl.Cartesian3(-1327008.1205780385,5333670.378214465,3232080.6545777875),
orientation:{
heading:1.417883129539277,
roll:0.00319436529033545,
pitch:-0.4276719117769105,
}
});
var handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(e) {
var cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
var cartographic = bmgl.Cartographic.fromCartesian(cartesian);
var lon = bmgl.Math.toDegrees(cartographic.longitude).toFixed(5);//四舍五入 小数点后保留五位
var lat = bmgl.Math.toDegrees(cartographic.latitude).toFixed(5);//四舍五入 小数点后保留五位
// var height = Math.ceil(viewer.camera.positionCartographic.height); //获取相机高度
if (cartesian) {
/** main */
var data={
lon:parseFloat(lon),
lat:parseFloat(lat),
element:$("#one"),
addEntity:true,//默认为false,如果为false的话就不添加实体，后面的实体属性就不需要了
boxHeight:200,//中间立方体的高度
boxHeightDif:20,//中间立方体的高度增长差值，越大增长越快
boxHeightMax:1000,//中间立方体的最大高度
boxSide:200,//立方体的边长
boxMaterial:bmgl.Color.DEEPSKYBLUE.withAlpha(0.5),
circleSize:300,//大圆的大小，小圆的大小默认为一半
};
showDynamicLayer(viewer,data,function (){ //回调函数 改变弹窗的内容;
$("#one").find(".main").html("经度:"+lon+"<br/>纬度:"+lat);
});
/** main */
}
},bmgl.ScreenSpaceEventType.LEFT_CLICK);
function showDynamicLayer(viewer,data,callback){
var element=data.element,lon=data.lon,lat=data.lat;
var sStartFlog=false;
setTimeout(function () {
sStartFlog=true;
},300);
var s1=0.001,s2=s1,s3=s1,s4=s1;
/* 弹窗的dom操作--默认必须*/
element.css({opacity:0}); //使用hide()或者display是不行的 因为bmgl是用pre定时重绘的div导致 left top display 会一直重绘
$(".bm-dynamic-layer .line").css({width:0});
element.find(".main").hide(0);
/* 弹窗的dom操作--针对性操作*/
callback();
if(data.addEntity){
var rotation = bmgl.Math.toRadians(30);
var rotation2 = bmgl.Math.toRadians(30);
function getRotationValue() {
rotation += 0.05;
return rotation;
}
function getRotationValue2() {
rotation2-= 0.03;
return rotation2;
}
//构建entity
var height=data.boxHeight,heightMax=data.boxHeightMax,heightDif=data.boxHeightDif;
var goflog=true;
viewer.entities.removeById('e_1');
//添加正方体
viewer.entities.add({
id:'e_1',
name: "立方体盒子",
position: new bmgl.CallbackProperty(function () {
height=height+heightDif;
if(height>=heightMax){
height=heightMax;
}
return bmgl.Cartesian3.fromDegrees(lon,lat,height/2)
},false),
box: {
dimensions: new bmgl.CallbackProperty(function () {
height=height+heightDif;
if(height>=heightMax){
height=heightMax;
if(goflog){//需要增加判断 不然它会一直执行; 导致对div的dom操作 会一直重复
addLayer();//添加div弹窗
goflog=false;
}
}
return new bmgl.Cartesian3(data.boxSide,data.boxSide, height)
},false),
material:data.boxMaterial
}
});
addLayer();
}else{
addLayer();//添加div弹窗
}
function addLayer() {
//添加div
var divPosition= bmgl.Cartesian3.fromDegrees(lon,lat,data.boxHeightMax);
element.css({opacity:1});
element.find(".line").animate({
width:50//线的宽度
},500,function () {
element.find(".main").fadeIn(500)
});
creatHtmlElement(viewer,element,divPosition,[10,-(parseInt(element.css("height")))],true); //当为true的时候，表示当element在地球背面会自动隐藏。默认为false，置为false，不会这样。但至少减轻判断计算压力
}
}
function creatHtmlElement(viewer,element,position,arr,flog){
var scratch = new bmgl.Cartesian2(); //bmgl二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
var scene=viewer.scene,camera=viewer.camera;
scene.preRender.addEventListener(function() {
var canvasPosition =scene.cartesianToCanvasCoordinates(position, scratch);//cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
if (bmgl.defined(canvasPosition)) {
element.css({
// top:canvasPosition.y,
// left:canvasPosition.x
left:canvasPosition.x+arr[0],
top:canvasPosition.y+arr[1]
});
/* 此处进行判断**/// var px_position = bmgl.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
if(flog&&flog==true){
var e = position, i = camera.position, n = scene.globe.ellipsoid.cartesianToCartographic(i).height;
if (!(n += 1 * scene.globe.ellipsoid.maximumRadius, bmgl.Cartesian3.distance(i, e) > n)) {
element.show();
} else {
element.hide();
}
}
/* 此处进行判断**/
}
});
}
</script>
</body>
</html>
源码