<!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> Creating Entity </ title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.cesium-viewer .cesium-widget-credits{ display:none }
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var myurl = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali";
var mapprovider = new Cesium.UrlTemplateImageryProvider({url:myurl});
var myviewer = new Cesium.Viewer("cesiumContainer",{
baseLayerPicker:false,
imageryProvider: mapprovider,
navigationHelpButton:false,
infoBox: true, // display the description
});
// 1, box box, dimensions for the dimensions (length and breadth), outline boundary (false by default not shown)
var redBox = myviewer.entities.add({
show:false,
id:"0204",
name: "box"
description: "a long box ......................"
position:Cesium.Cartesian3.fromDegrees(113,31,10000),
//orientation:Cesium.Cartesian3.fromDegrees(113,31),
box:{
dimensions: new Cesium.Cartesian3(400,300,100000),
material:Cesium.Color.RED,
outline:true,
outlineColor:Cesium.Color.BLUE,
//shadows:true
}
});
2 //, rotatable circular or elliptical
var xza = new Cesium.EllipseGraphics({
semiMinorAxis: 100000,
semiMajorAxis: 300000,
height:100000,
extrudedHeight: 10000, // move up, higher and higher, in meters
rotation: Cesium.Math.toRadians (30), // A digital attribute specifies the counterclockwise rotation of the ellipse from the north.
material:Cesium.Color.BLUE.withAlpha(0.5),
outline:true
})
var greencircle = myviewer.entities.add({
show:false,
name: "a circle"
position:Cesium.Cartesian3.fromDegrees(113,31,10000),
ellipse:xza
})
// 3, the shape of the corridor
var redCorr =myviewer.entities.add({
name: "Corridor Shape"
corridor:{
positions:Cesium.Cartesian3.fromDegreesArray([113,31,114,36,115,33]),
width:1000,
extrudedHeight: 1000, // height pulled entity
height: 0, altitude // entity
material:Cesium.Color.RED.withAlpha(0.5),
outline:true,
outlineColor:Cesium.Color.BLACK
//granularity:Cesium.Math.RADIANS_PER_DEGREE(30)
}
});
//4、polygon
var myPolygon1 = new Cesium.PolygonGraphics({
extrudedHeight:10000,
//height:1000,
closeTop:false,
closeButton:false,
// fromDegreesArrayHeights (113,31, elevation), directly display the elevation
hierarchy : Cesium.Cartesian3.fromDegreesArray([113, 31.0,
113.0, 32.0,
114.0, 33.0]),
material : Cesium.Color.RED
});
var polygonshow = myviewer.entities.add({
name:"polygon01",
polygon:myPolygon1
})