Cesium基础知识-创建几何模型

1. viewer = new Cesium.Viewer('cesiumContainer');
3. //创建条纹
4. function CreateTiaoWen() {
5.     viewer.entities.add({
6.         rectangle: {
7.             coordinates: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
8.             material: new Cesium.StripeMaterialProperty({
9.                 evenColor: Cesium.Color.RED,
10.                 oddColor: Cesium.Color.BLUE,
11.                 repeat: 5
12.             })
13.         }
14.     });
15. }
16. //CreateTiaoWen();
18. //使用几何图形和外观
19. function CreateTiaoWen2() {
20.     var scene = viewer.scene;
22.     var instance = new Cesium.GeometryInstance({
23.         geometry: new Cesium.RectangleGeometry({
24.             rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
25.             vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
26.         })
27.     });
29.     scene.primitives.add(new Cesium.Primitive({
30.         geometryInstances: instance,
31.         appearance: new Cesium.EllipsoidSurfaceAppearance({
32.             material: Cesium.Material.fromType('Stripe')
33.         })
34.     }));
35. }
36. //CreateTiaoWen2();
38. //使用几何图形和外观
39. function CreateTiaoWen3() {
40.     var scene = viewer.scene;
42.     var instance = new Cesium.GeometryInstance({
43.         geometry: new Cesium.RectangleGeometry({
44.             rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
45.             vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
46.         })
47.     });
49.     var anotherInstance = new Cesium.GeometryInstance({
50.         geometry: new Cesium.RectangleGeometry({
51.             rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
52.             vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
53.         })
54.     });
56.     scene.primitives.add(new Cesium.Primitive({
57.         geometryInstances: [instance, anotherInstance],
58.         appearance: new Cesium.EllipsoidSurfaceAppearance({
59.             material: Cesium.Material.fromType('Stripe')
60.         })
61.     }));
62. }
63. //CreateTiaoWen3();
65. //使用几何图形和外观
66. function CreateTiaoWen4() {
67.     var scene = viewer.scene;
69.     var instance = new Cesium.GeometryInstance({
70.         geometry: new Cesium.RectangleGeometry({
71.             rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
72.             vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
73.         }),
74.         attributes: {
75.             color: new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
76.         }
77.     });
79.     var anotherInstance = new Cesium.GeometryInstance({
80.         geometry: new Cesium.RectangleGeometry({
81.             rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
82.             vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
83.         }),
84.         attributes: {
85.             color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
86.         }
87.     });
89.     scene.primitives.add(new Cesium.Primitive({
90.         geometryInstances: [instance, anotherInstance],
91.         appearance: new Cesium.PerInstanceColorAppearance()
92.     }));
93. }
94. //CreateTiaoWen4();
96. //使用几何图形和外观
97. function CreateTiaoWen5() {
98.     var scene = viewer.scene;
100.     var instances = [];
102.     for (var lon = -180.0; lon < 180.0; lon += 5.0) {
103.         for (var lat = -85.0; lat < 85.0; lat += 5.0) {
104.             instances.push(new Cesium.GeometryInstance({
105.                 geometry: new Cesium.RectangleGeometry({
106.                     rectangle: Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
107.                     vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
108.                 }),
109.                 id: 'rectangle:' + lon + "---" + lat,
110.                 attributes: {
111.                     color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({
112.                         alpha: 0.5
113.                     }))
114.                 }
115.             }));
116.         }
117.     }
119.     scene.primitives.add(new Cesium.Primitive({
120.         geometryInstances: instances,
121.         appearance: new Cesium.PerInstanceColorAppearance()
122.     }));
124.     var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
125.     handler.setInputAction(function (movement) {
126.         var pick = scene.pick(movement.position);
127.         if (Cesium.defined(pick)) {
128.             console.log('Mouse clicked rectangle:' + pick.id);
129.         }
130.     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
131. }
132. //CreateTiaoWen5();
134. //使用几何图形和外观
135. function CreateTiaoWen6() {
136.     var scene = viewer.scene;
138.     var instance = new Cesium.GeometryInstance({
139.         geometry: new Cesium.RectangleGeometry({
140.             rectangle: Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
141.             vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
142.         }),
143.         id: 'my rectangle',
144.         attributes: {
145.             color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
146.         }
147.     });
149.     scene.primitives.add(new Cesium.Primitive({
150.         geometryInstances: instance,
151.         appearance: new Cesium.PerInstanceColorAppearance()
152.     }));
154.     var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
155.     handler.setInputAction(function (movement) {
156.         var pick = scene.pick(movement.position);
157.         if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
158.             console.log('Mouse clicked rectangle.');
159.         }
160.     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
161. }
162. //CreateTiaoWen6();
164. //使用几何球体EllipsoidGeometry创建
165. function CreateTuoYuanQiu() {
166.     var scene = viewer.scene;
168.     var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
169.         vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
170.         radii: new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
171.     });
173.     var cyanEllipsoidInstance = new Cesium.GeometryInstance({
174.         geometry: ellipsoidGeometry,
175.         modelMatrix: Cesium.Matrix4.multiplyByTranslation(
176.             Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
177.             new Cesium.Cartesian3(0.0, 0.0, 150000.0),
178.             new Cesium.Matrix4()
179.         ),
180.         attributes: {
181.             color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
182.         }
183.     });
185.     var orangeEllipsoidInstance = new Cesium.GeometryInstance({
186.         geometry: ellipsoidGeometry,
187.         modelMatrix: Cesium.Matrix4.multiplyByTranslation(
188.             Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
189.             new Cesium.Cartesian3(0.0, 0.0, 450000.0),
190.             new Cesium.Matrix4()
191.         ),
192.         attributes: {
193.             color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
194.         }
195.     });
197.     scene.primitives.add(new Cesium.Primitive({
198.         geometryInstances: [cyanEllipsoidInstance, orangeEllipsoidInstance],
199.         appearance: new Cesium.PerInstanceColorAppearance({
200.             translucent: false,
201.             closed: true
202.         })
203.     }));
204. }
205. //CreateTuoYuanQiu();
206. //使用几何球体EllipsoidGeometry创建,修改颜色
207. function ChangeColor() {
208.     var scene = viewer.scene;
210.     var circleInstance = new Cesium.GeometryInstance({
211.         geometry: new Cesium.CircleGeometry({
212.             center: Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
213.             radius: 250000.0,
214.             vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
215.         }),
216.         attributes: {
217.             color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
218.         },
219.         id: 'circle'
220.     });
221.     var primitive = new Cesium.Primitive({
222.         geometryInstances: circleInstance,
223.         appearance: new Cesium.PerInstanceColorAppearance({
224.             translucent: false,
225.             closed: true
226.         })
227.     });
228.     scene.primitives.add(primitive);
230.     setInterval(function () {
231.         var attributes = primitive.getGeometryInstanceAttributes('circle');
232.         attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({
233.             alpha: 1.0
234.         }));
235.     }, 2000);
237. }
238. //ChangeColor();
239. //使用几何球体EllipsoidGeometry创建,修改颜色
240. function ChangeColor1() {
241.         var appearance = new Cesium.PerInstanceColorAppearance({
242.             translucent: false,
243.             closed: true
244.         });
246.         var anotherAppearance = new Cesium.PerInstanceColorAppearance({
247.             renderState: {
248.                 depthTest: {
249.                     enabled: true
250.                 },
251.                 cull: {
252.                     enabled: true,
253.                     face: Cesium.CullFace.BACK
254.                 }
255.             }
256.         });
258.         var wall = Cesium.WallGeometry.fromConstantHeights({
259.             positions : Cesium.Cartesian3.fromDegreesArray([
260.               19.0, 47.0,
261.               19.0, 48.0,
262.               20.0, 48.0,
263.               20.0, 47.0,
264.               19.0, 47.0,
265.             ]),
266.             minimumHeight : 20000.0,
267.             maximumHeight : 10000.0
268.           });
269.           var geometry = Cesium.WallGeometry.createGeometry(wall);
271.           viewer.entities.add(geometry);
272.           viewer.zoomTo(viewer.entities);
273. }
274. ChangeColor1();
276. //创建墙
277. function CreateWall() {
278.     var redWall = viewer.entities.add({
279.         name: "Red wall at height",
280.         wall: {
281.           positions: Cesium.Cartesian3.fromDegreesArrayHeights([
282.             -115.0,
283.             44.0,
284.             200000.0,
285.             -90.0,
286.             44.0,
287.             200000.0,
288.           ]),
289.           minimumHeights: [100000.0, 100000.0],
290.           material: Cesium.Color.RED,
291.         },
292.       });
293.       
294.       var greenWall = viewer.entities.add({
295.         name: "Green wall from surface with outline",
296.         wall: {
297.           positions: Cesium.Cartesian3.fromDegreesArrayHeights([
298.             -107.0,
299.             43.0,
300.             100000.0,
301.             -97.0,
302.             43.0,
303.             100000.0,
304.             -97.0,
305.             40.0,
306.             100000.0,
307.             -107.0,
308.             40.0,
309.             100000.0,
310.             -107.0,
311.             43.0,
312.             100000.0,
313.           ]),
314.           material: Cesium.Color.GREEN,
315.           outline: true,
316.         },
317.       });
318.       
319.       var blueWall = viewer.entities.add({
320.         name: "Blue wall with sawtooth heights and outline",
321.         wall: {
322.           positions: Cesium.Cartesian3.fromDegreesArray([
323.             -115.0,
324.             50.0,
325.             -112.5,
326.             50.0,
327.             -110.0,
328.             50.0,
329.             -107.5,
330.             50.0,
331.             -105.0,
332.             50.0,
333.             -102.5,
334.             50.0,
335.             -100.0,
336.             50.0,
337.             -97.5,
338.             50.0,
339.             -95.0,
340.             50.0,
341.             -92.5,
342.             50.0,
343.             -90.0,
344.             50.0,
345.           ]),
346.           maximumHeights: [
347.             100000,
348.             200000,
349.             100000,
350.             200000,
351.             100000,
352.             200000,
353.             100000,
354.             200000,
355.             100000,
356.             200000,
357.             100000,
358.           ],
359.           minimumHeights: [
360.             0,
361.             100000,
362.             0,
363.             100000,
364.             0,
365.             100000,
366.             0,
367.             100000,
368.             0,
369.             100000,
370.             0,
371.           ],
372.           material: Cesium.Color.BLUE.withAlpha(0.5),
373.           outline: true,
374.           outlineColor: Cesium.Color.BLACK,
375.         },
376.       });
377.       viewer.zoomTo(viewer.entities);
378. }
379. //CreateWall();