<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
<script src='http://www.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%;
}
</style>
<title>点线面设置高度与贴地</title>
</head>
<body>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://www.bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
//terrainId: 'bigemap.gaochen',
mapId: 'bigemap.zhongkexingtu'
});
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(107.51060029772391,
35.82519054789412,
1984.5548492087519),
orientation: {
heading: 0.30343993703075256,
roll: 0.00002126314335626489,
pitch: -0.21424410597747112
}
});
//启用地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.screenSpaceEventHandler.setInputAction(function (e) {
var cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(e.position), viewer.scene);
if (cartesian3) {
//将笛卡尔坐标转换为地理坐标
var cartographic = bmgl.Cartographic.fromCartesian(cartesian3);
var height = cartographic.height.toFixed(0);
//将弧度转为度的十进制度表示
var longitudeString = bmgl.Math.toDegrees(cartographic.longitude).toFixed(7);
var latitudeString = bmgl.Math.toDegrees(cartographic.latitude).toFixed(7);
console.log(longitudeString, latitudeString, height);
}
}, bmgl.ScreenSpaceEventType.LEFT_CLICK);
var marker = viewer.entities.add({
id: 'marker',
position: bmgl.Cartesian3.fromDegrees(107.5192584, 35.8477037, 1589), //纬度，经度，高度
point: {
pixelSize: 20,
color: new bmgl.Color(233 / 255, 20 / 255, 129 / 255)
}
});
// bmgl.HeightReference.RELATIVE_TO_GROUND=2;
var marker2 = viewer.entities.add({
id: 'marker2',
position: bmgl.Cartesian3.fromDegrees(107.5192584, 35.8477037,2),
point: {
pixelSize: 20,
color: bmgl.Color.ORANGE,
heightReference: bmgl.HeightReference.RELATIVE_TO_GROUND, //贴地参数设置为高于地形的高度,当设置此参数时，高度以当前地形高度为基准
}
});
var Greenline = viewer.entities.add({
name: 'Green line',
polyline: {
positions: bmgl.Cartesian3.fromDegreesArrayHeights([107.5137351, 35.8500172, 1313,
107.5150950, 35.8476618, 1321, 107.5170401, 35.8428221, 1382, 107.5197776, 35.8404788, 1297,
107.5218137, 35.8387367, 1280
]),
width: 10,
material: new bmgl.PolylineArrowMaterialProperty(bmgl.Color.GREEN)
}
});
var glowingLine = viewer.entities.add({
name: 'Glowing roange line on the surface',
polyline: {
positions: bmgl.Cartesian3.fromDegreesArray([107.5147351, 35.8500172,
107.5160950, 35.8476618, 107.5180401, 35.8428221, 107.5207776, 35.8404788,
107.5228137, 35.8387367,
]),
width: 10,
clampToGround: true, //线段的贴地参数
material: new bmgl.PolylineGlowMaterialProperty({
glowPower: 0.2,
color: bmgl.Color.ORANGE,
})
}
});
var greenPolygon = viewer.entities.add({
name: 'Green extruded polygon',
polygon: {
hierarchy: bmgl.Cartesian3.fromDegreesArrayHeights([107.5155690, 35.8397727, 1668,
107.5136406, 35.8394650, 1563,
107.5142008, 35.8377371, 1558,
]),
perPositionHeight: true,//使每个点高度生效，extrudeHeight为底面高度
extrudedHeight: 1500.0,
// extrudedHeightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
material: bmgl.Color.GREEN,
closeTop: false,
closeBottom: true,//封闭底面
outline: true,
outlineColor: bmgl.Color.BLACK
}
});
var orangePolygon = viewer.entities.add({
name: 'orange polygon',
polygon: {
hierarchy: bmgl.Cartesian3.fromDegreesArray([107.5165690, 35.8397727,
107.5146406, 35.8394650,
107.5152008, 35.8377371,
]),
// extrudedHeight: 100.0,
// height:1400,
// extrudedHeightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,//多边形贴地只能是面状结果或者是从地心挤压出来
material: bmgl.Color.ORANGE,
closeTop: false,
closeBottom: true,
outline: true,
outlineColor: bmgl.Color.BLACK
}
});
</script>
</body>
</html>
源码