<!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>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container',{mapId: 'bigemap.zhongkexingtu',});
var czml = [
{
id: "document",
name: "CMZL 圓球體",
version: "1.0",
},
{
id: "blueEllipsoid",
name: "藍色滿色球體",
position: {
cartographicDegrees: [-114.0, 40.0, 300000.0],
},
ellipsoid: {
radii: {
cartesian: [200000.0, 200000.0, 300000.0],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
{
id: "redSphere",
name: "紅色半透明球體",
position: {
cartographicDegrees: [-107.0, 40.0, 300000.0],
},
ellipsoid: {
radii: {
cartesian: [300000.0, 300000.0, 300000.0],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 100],
},
},
},
outline: true,
outlineColor: {
rgbaf: [0, 0, 0, 1],
},
},
},
{
id: "yellowEllipsoid",
name: "黃色球體",
position: {
cartographicDegrees: [-100.1000, 40.0, 300000.0],
},
ellipsoid: {
radii: {
cartesian: [200000.0, 100000.0, 300000.0],
},
fill: false,
outline: true,
outlineColor: {
rgba: [255, 255, 0, 255],
},
slicePartitions: 24,
stackPartitions: 36,
},
},
];
var dataSourcePromise = bmgl.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
</script>
</html>