html离线地图,离线地图三维开发-添加HTML

添加HTML-源代码示例

运行

重置

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}

part_test

bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';

var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.amap-satellite'});

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+"
纬度:"+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();

}

}

/* 此处进行判断**/

}

});

}