<!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>
<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>