<!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%;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container',{mapId: 'bigemap.zhongkexingtu',});
var czml = [
{
id: "document",
name: "CZML Geometries: Cones and Cylinders",
version: "1.0",
},
{
id: "shape1",
name: "圓柱體",
position: {
cartographicDegrees: [-100.0, 40.0, 200000.0],
},
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 128],
},
},
},
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "shape2",
name: "圓錐體",
position: {
cartographicDegrees: [-105.0, 40.0, 200000.0],
},
cylinder: {
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 255],
},
},
},
},
},
];
var dataSourcePromise = bmgl.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
</script>
</html>