<!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="/offline_data/div.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#container { position: absolute; top: 0; bottom: 0; width: 100%; }
.bmgl-widget-credits{display:none}
#div1{
background: whitesmoke;
border: 1px solid deepskyblue;
padding: 5px;
border-radius: 5px;
/*是否阻止鼠标事件*/
pointer-events: none;
}
#div2{
background: red;
color: aqua;
/* border: 1px solid deepskyblue; */
padding: 5px;
/* border-radius: 5px; */
/*是否阻止鼠标事件*/
pointer-events: none;
text-align: center;
}
</style>
<title>添加div</title>
</head>
<body>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu',infoBox:false,});
var dd = document.createElement('div');
dd.id="div2";
dd.height = 80;
dd.width = 40;
dd.innerText="123456";
var val = {
viewer: viewer,
position: [104,30,0],
// height: ,
// dom: document.getElementById('div1'),
dom: dd,
offset:[0,-80],
//className:'test',
}
var layer = new divLabel(val);
var dom2 = document.createElement("div");
dom2.id = "div1";
dom2.width = 60;
dom2.height = 10;
dom2.innerText ="1111111"
var newone = new divLabel({
viewer:viewer,
position:[102,22,0],
dom:dom2,
offset:[0,0],
})
viewer.camera.setView({
destination:bmgl.Cartesian3.fromDegrees(104,30,2000)
})
// layer.remove()//移除
// layer.toggleShow()//切换显示
// layer.changePosition([121,30])//更改位置
// layer.removeAllDiv()//移除全部div
</script>
</body>
</html>
源码