You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.7 KiB
HTML
114 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Use correct character set. -->
|
|
<meta charset="utf-8" />
|
|
<!-- Tell IE to use the latest, best version. -->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
|
|
<title>几何体</title>
|
|
<script src="./Cesium/Cesium.js"></script>
|
|
<style>
|
|
@import url(./Cesium/Widgets/widgets.css);
|
|
html,
|
|
body,
|
|
#cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.cesium-viewer-geocoderContainer,
|
|
.cesium-home-button,
|
|
.cesium-sceneModePicker-wrapper,
|
|
.cesium-navigationHelpButton-wrapper{
|
|
display:none !important;
|
|
}
|
|
.cesium-viewer-bottom{
|
|
display:none
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<script>
|
|
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4YjJhMDI5MC0zZTI1LTQ4OTgtYWUzYi1mMThmMzE3NWVkNWQiLCJpZCI6MjI5ODY2LCJpYXQiOjE3MjE2MzI4MjZ9.Bn-EkViB8xQCaq5aO2Kgg-UF0bqrrwBs6B9idWmc3Mc';
|
|
var viewer = new Cesium.Viewer('cesiumContainer');
|
|
var redBox = viewer.entities.add({
|
|
name : 'Red box with black outline',
|
|
position: Cesium.Cartesian3.fromDegrees(116.407001,39.904592, 10), //坐标
|
|
box : {
|
|
dimensions : new Cesium.Cartesian3(20.0, 20.0, 20.0),
|
|
material : Cesium.Color.RED.withAlpha(0.5),
|
|
outline : true,
|
|
outlineColor : Cesium.Color.BLACK
|
|
},
|
|
});
|
|
|
|
const greenCylinder = viewer.entities.add({
|
|
name: "Green cylinder with black outline",
|
|
position: Cesium.Cartesian3.fromDegrees(116.408001,39.904592, 20.0),
|
|
cylinder: {
|
|
length: 40.0,
|
|
topRadius: 20.0,
|
|
bottomRadius: 20.0,
|
|
material: Cesium.Color.GREEN.withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
},
|
|
});
|
|
|
|
const redCone = viewer.entities.add({
|
|
name: "Red cone",
|
|
position: Cesium.Cartesian3.fromDegrees(116.409001,39.904592, 20.0),
|
|
cylinder: {
|
|
length: 40.0,
|
|
topRadius: 0.0,
|
|
bottomRadius: 20.0,
|
|
material: Cesium.Color.RED.withAlpha(0.5),
|
|
},
|
|
});
|
|
|
|
const greenCylinders = viewer.entities.add({
|
|
name: "Green cylinder with black outline 2",
|
|
position: Cesium.Cartesian3.fromDegrees(116.410001,39.904592, 20.0),
|
|
cylinder: {
|
|
length: 40.0,
|
|
topRadius: 20.0,
|
|
bottomRadius: 20.0,
|
|
material: Cesium.Color.GREEN.withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
},
|
|
});
|
|
|
|
const redCones = viewer.entities.add({
|
|
name: "Red cone2",
|
|
position: Cesium.Cartesian3.fromDegrees(116.410001,39.904592, 60.0),
|
|
cylinder: {
|
|
length: 40.0,
|
|
topRadius: 0.0,
|
|
bottomRadius: 20.0,
|
|
material: Cesium.Color.GREEN.withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
},
|
|
});
|
|
var outlineOnly = viewer.entities.add({
|
|
name: "Yellow box outline",
|
|
position: Cesium.Cartesian3.fromDegrees(116.411001,39.904592, 30.0),
|
|
box: {
|
|
dimensions: new Cesium.Cartesian3(40.0, 30.0, 60.0),
|
|
fill: false,
|
|
outline: true,
|
|
outlineColor: Cesium.Color.YELLOW,
|
|
},
|
|
});
|
|
viewer.zoomTo(viewer.entities);
|
|
viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[4];
|
|
</script>
|
|
</body>
|
|
</html>
|