<!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>
<style>
body { margin: 0; padding: 0; }
#container { position: absolute; top: 0; bottom: 0; width: 100%; }
.bmgl-widget-credits{display:none}
</style>
<title>part_cd</title>
</head>
<body>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { tilesetId: 'bigemap.9m8ekswx' ,
requestRenderMode:false,
mapId: 'bigemap.zhongkexingtu'
});
//設置建筑輪廓的相關描邊，顏色等
//viewer.scene.vectorTileProvider.style={ outline: true, strokeWidth: 4, stroke: bmgl.Color.fromCssColorString('#469afa').withAlpha(0.9), fill: bmgl.Color.fromCssColorString('#0778f9').withAlpha(0.8)};
//將底圖的高度調低
viewer.imageryLayers.get(0).brightness=0.5;
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(104.06412258001211, 30.653397913787465,300),
orientation:{
heading:6.218586260419325,
pitch:-0.37312129,
roll:6.279056409478233
}
});
var label=viewer.entities.add({
label:{
text:'',
showBackground:true,
font:'14px Arial',
backgroundColor : new bmgl.Color(0.165, 0.165, 0.165, 0.8),
backgroundPadding : new bmgl.Cartesian2(7, 5),
horizontalOrigin : bmgl.HorizontalOrigin.LEFT,
verticalOrigin : bmgl.VerticalOrigin.BOTTOM,
disableDepthTestDistance : Number.POSITIVE_INFINITY
}
});
viewer.screenSpaceEventHandler.setInputAction(function (e) {
var position= viewer.scene.pickPosition(e.position);
if (!viewer.scene.pick(e.position)||!bmgl.defined(position)){
label.label.text='';
return;
}
label.position=position;
var cartographic= bmgl.Cartographic.fromCartesian(position);
label.label.text=cartographic.height.toFixed(1);
},bmgl.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
</html>
源碼