<!--
* @Author: 1286780926@qq.com
* @Date: 2023-06-20 10:30:40
* @LastEditors: 13307306924 1286780926@qq.com
* @LastEditTime: 2023-06-20 11:00:30
* @FilePath: \test\bmgl_点击弹窗\index.html
* @Description:
*
* Copyright (c) 2023 by bigemap/${git_name_email}, All Rights Reserved.
-->
<!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>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#result {
background: whitesmoke;
border: 1px solid deepskyblue;
padding: 5px;
border-radius: 5px;
/*是否阻止鼠标事件*/
pointer-events: none;
}
.bmgl-widget-credits {
display: none
}
</style>
<title>part_test</title>
</head>
<body>
<div id="result">当前选中 ：</div>
<div id='container'></div>
<script type="module">
import divLabel from 'http://www.bigemap.com/Public/js/3d/div.min.js'
// import divLabel from './div.js'
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu', requestRenderMode: false });
window.viewer = viewer;//避免影响示例页面的加载条隐藏
//取消默认的点击事件
viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
//禁止默认的地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = false;
var handler = new bmgl.ScreenSpaceEventHandler(viewer.canvas);
var val = {
viewer: viewer,
position: [104, 30],
height: 0,
offset: [0, 20],
dom: document.getElementById('result')
}
var layer = new divLabel(val);
layer.toggleShow(false);
handler.setInputAction(function (e) {
var entity = viewer.scene.pick(e.position);
if (entity) {
document.getElementById('result').innerHTML = '当前选中 ：' + entity.id.id;
layer.changePosition(entity.id.position.getValue())
layer.toggleShow(true);
} else {
layer.toggleShow(false);
}
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
var pinBuilder = new bmgl.PinBuilder();
for (let i = 1; i <= 15; i++) {
viewer.entities.add({
id: i,//设置一个id,方便进行点击判断
position: bmgl.Cartesian3.fromDegrees(Math.random() * 30 + 100, Math.random() * 60 + 10),
billboard: {
image: `http://www.bigemap.com/mapoffline/marker/${i}.png`,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
},
label: {
scale: 1,
heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
fillColor: bmgl.Color.CYAN.withAlpha(0.5),
text: `Mark${i}`,
// showBackground: true,
// backgroundColor: bmgl.Color.AQUA,
pixelOffset: new bmgl.Cartesian2(0, -40)
},
})
}
viewer.flyTo(viewer.entities)
function transformCartesianToWGS84(cartesian) {
let ellipsoid = bmgl.Ellipsoid.WGS84;
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
// var height = viewer.scene.sampleHeight(cartographic);
return {
lng: bmgl.Math.toDegrees(cartographic.longitude),
lat: bmgl.Math.toDegrees(cartographic.latitude),
alt: cartographic.height
}
}
</script>
</body>
</html>
源码