<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圓柱體、圓錐體</title>
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
button {
position: absolute;
top: 20px;
left: 20px;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<button onclick="drawstart()"><span class="btnval">開始繪制</span></button>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
requestRenderMode: false,
mapId: 'bigemap.zhongkexingtu',
infoBox:false,
selectionIndicator:false,
});
viewer.scene.globe.depthTestAgainstTerrain = false;
function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i+=30) {
var radians = bmgl.Math.toRadians(i);
positions.push(
new bmgl.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
function computeStar(arms, rOuter, rInner) {
var angle = Math.PI / arms;
var length = 2 * arms;
var positions = new Array(length);
for (var i = 0; i < length; i++) {
var r = i % 2 === 0 ? rOuter : rInner;
positions[i] = new bmgl.Cartesian2(
Math.cos(i * angle) * r,
Math.sin(i * angle) * r
);
}
return positions;
}
var redTube = viewer.entities.add({
polylineVolume: {
positions: bmgl.Cartesian3.fromDegreesArray([
-85.0,
32.0,
-85.0,
36.0,
-89.0,
36.0,
]),
shape: computeCircle(60000.0),
material: bmgl.Color.RED,
},
});
var greenBox = viewer.entities.add({
polylineVolume: {
positions: bmgl.Cartesian3.fromDegreesArrayHeights([
-90.0,
32.0,
0.0,
-90.0,
36.0,
100000.0,
-94.0,
36.0,
0.0,
]),
shape: [
new bmgl.Cartesian2(-50000, -50000),
new bmgl.Cartesian2(50000, -50000),
new bmgl.Cartesian2(50000, 50000),
new bmgl.Cartesian2(-50000, 50000),
],
cornerType: bmgl.CornerType.BEVELED,
material: bmgl.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: bmgl.Color.BLACK,
},
});
var blueStar = viewer.entities.add({
polylineVolume: {
positions: bmgl.Cartesian3.fromDegreesArrayHeights([
-95.0,
32.0,
0.0,
-95.0,
36.0,
100000.0,
-99.0,
36.0,
200000.0,
]),
shape: computeStar(7, 70000, 50000),
cornerType: bmgl.CornerType.MITERED,
material: bmgl.Color.BLUE,
},
});
viewer.zoomTo(viewer.entities);
var scene = viewer.scene;
var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid = scene.globe.ellipsoid; //得到當前三維場景的橢球體
let firstclick = 1;
let nowtube
let tmpNowtube;
let path = [];
let tmpP=[];
let drawstate = false
handler.setInputAction(function (movement) {
cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);//movement.endPosition
if (cartesian&&drawstate) {
//將笛卡爾坐標轉換為地理坐標
var cartographic = bmgl.Cartographic.fromCartesian(cartesian);
longitudeString = bmgl.Math.toDegrees(cartographic.longitude);
latitudeString = bmgl.Math.toDegrees(cartographic.latitude);
if (!nowtube){
nowtube = viewer.entities.add({
polylineVolume: {
positions:new bmgl.CallbackProperty(function (){
return bmgl.Cartesian3.fromDegreesArray(path);
},false),
shape: computeCircle(10000),
material: bmgl.Color.RED,
},
});
}
if (!tmpNowtube){
viewer.entities.add({
polylineVolume: {
positions:new bmgl.CallbackProperty(function (){
return tmpP[0]? bmgl.Cartesian3.fromDegreesArray(tmpP):[];
},false),
shape: computeCircle(10000),
material: bmgl.Color.BLUE.withAlpha(0.7),
},
});
}
path.push(longitudeString);
path.push(latitudeString);
tmpP[0]=longitudeString;
tmpP[1]=latitudeString;
}
}, bmgl.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function (movement) {
//通過指定的橢球或者地圖對應的坐標系，將鼠標的二維坐標轉換為對應橢球體三維坐標
cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesian&&drawstate) {
//將笛卡爾坐標轉換為地理坐標
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
//將弧度轉為度的十進制度表示
tmpP[2] = bmgl.Math.toDegrees(cartographic.longitude);
tmpP[3] = bmgl.Math.toDegrees(cartographic.latitude);
}
}, bmgl.ScreenSpaceEventType.MOUSE_MOVE);
function drawstart() {
if (drawstate) {
let btn = document.querySelector('.btnval')
btn.innerHTML = "開始繪制";
path.length>=4&&(nowtube.polylineVolume.positions=nowtube.polylineVolume.positions.getValue());
path.length=0;
tmpP.length=0;
} else {
let btn = document.querySelector('.btnval')
btn.innerHTML = "結束繪制";
if (nowtube){
nowtube.polylineVolume.positions=new bmgl.CallbackProperty(function (){
return bmgl.Cartesian3.fromDegreesArray(path);
},false);
}
}
drawstate = !drawstate;
}
</script>
</html>