<!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.bt68f.cn:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
<script src='http://www.bt68f.cn: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.bt68f.cn: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>