圆柱圆锥体

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <!-- Use correct character set. -->
  5.   <meta charset="utf-8">
  6.   <!-- Tell IE to use the latest, best version. -->
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  9.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  10.   <title>Hello World!</title>
  11.   <script src="../Cesium/Build/Cesium/Cesium.js"></script>
  12.   <style>
  13.  @import url(../Cesium/Build/Cesium/Widgets/widgets.css);
  14.       html, body, #cesiumContainer {
  15.           width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  16.       }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div id="cesiumContainer"></div>
  21.   <script>
  22. var viewer = new Cesium.Viewer('cesiumContainer');
  23.  
  24. var greenCylinder = viewer.entities.add({//Cylinder圆柱体
  25.     name : 'Green cylinder with black outline',
  26.     position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
  27.     cylinder : {
  28.         length : 400000.0,
  29.         topRadius : 200000.0,//圆柱体的顶部半径。
  30.         bottomRadius : 200000.0,//    圆柱体底部的半径。
  31.         material : Cesium.Color.GREEN.withAlpha(0.5),//绿色半透明
  32.         outline : true,//轮廓
  33.         outlineColor : Cesium.Color.DARK_GREEN//轮廓颜色深绿色
  34.     }
  35. });
  36.  
  37. var redCone = viewer.entities.add({//红色圆锥体
  38.     name : 'Red cone',
  39.     position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
  40.     cylinder : {
  41.         length : 400000.0,
  42.         topRadius : 0.0,
  43.         bottomRadius : 200000.0,
  44.         material : Cesium.Color.RED
  45.     }
  46. });
  47.  
  48. viewer.zoomTo(viewer.entities);
  49.   </script>
  50. </body>
  51. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <!-- Use correct character set. -->
  5.   <meta charset="utf-8">
  6.   <!-- Tell IE to use the latest, best version. -->
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  9.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  10.   <title>Hello World!</title>
  11.   <script src="../Cesium/Build/Cesium/Cesium.js"></script>
  12.   <style>
  13.  @import url(../Cesium/Build/Cesium/Widgets/widgets.css);
  14.       html, body, #cesiumContainer {
  15.           width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  16.       }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div id="cesiumContainer"></div>
  21.   <script>
  22. var viewer = new Cesium.Viewer('cesiumContainer');
  23.  
  24. var redPolygon = viewer.entities.add({//红色多边形
  25.     name : 'Red polygon on surface',
  26.     polygon : {
  27.         hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
  28.                                                         -115.0, 32.0,
  29.                                                         -107.0, 33.0,
  30.                                                         -102.0, 31.0,
  31.                                                         -102.0, 35.0]),//hierarchy多边形层次
  32.         material : Cesium.Color.RED
  33.     }
  34. });
  35.  
  36. var greenPolygon = viewer.entities.add({//绿色多边形
  37.     name : 'Green extruded polygon',
  38.     polygon : {
  39.         hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
  40.                                                         -100.0, 42.0,
  41.                                                         -104.0, 40.0]),
  42.         extrudedHeight: 500000.0,//多边形的挤出面和椭圆面之间的距离（以米为单位）
  43.         material : Cesium.Color.GREEN,
  44.         closeTop : false,
  45.         closeBottom : false
  46.     }
  47. });
  48.  
  49. var orangePolygon = viewer.entities.add({//橙色多边形
  50.     name : 'Orange polygon with per-position heights and outline',
  51.     polygon : {
  52.         hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 100000,
  53.                                                                -100.0, 25.0, 100000,
  54.                                                                -100.0, 30.0, 100000,
  55.                                                                -108.0, 30.0, 300000]),
  56.         extrudedHeight: 0,//多边形的挤出面和椭圆面之间的距离（以米为单位）。
  57.         perPositionHeight : true,//对每个位置使用options.positions的height，而不使用options.height来确定高度
  58.         material : Cesium.Color.ORANGE.withAlpha(0.5),//橘色半透明
  59.         outline : true,
  60.         outlineColor : Cesium.Color.BLACK//黑色轮廓线
  61.     }
  62. });
  63.  
  64. var bluePolygon = viewer.entities.add({//蓝色多边形
  65.     name : 'Blue polygon with holes and outline',
  66.     polygon : {
  67.         hierarchy : {
  68.             positions : Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0,
  69.                                                             -85.0, 30.0,
  70.                                                             -85.0, 40.0,
  71.                                                             -99.0, 40.0]),
  72.             holes : [{
  73.                 positions : Cesium.Cartesian3.fromDegreesArray([
  74.                     -97.0, 31.0,
  75.                     -97.0, 39.0,
  76.                     -87.0, 39.0,
  77.                     -87.0, 31.0
  78.                 ]),
  79.                 holes : [{
  80.                     positions : Cesium.Cartesian3.fromDegreesArray([
  81.                         -95.0, 33.0,
  82.                         -89.0, 33.0,
  83.                         -89.0, 37.0,
  84.                         -95.0, 37.0
  85.                     ]),
  86.                     holes : [{
  87.                         positions : Cesium.Cartesian3.fromDegreesArray([
  88.                             -93.0, 34.0,
  89.                             -91.0, 34.0,
  90.                             -91.0, 36.0,
  91.                             -93.0, 36.0
  92.                         ])
  93.                     }]
  94.                 }]
  95.             }]
  96.         },
  97.         material : Cesium.Color.BLUE.withAlpha(0.5),
  98.         outline : true,
  99.         outlineColor : Cesium.Color.BLACK
  100.     }
  101. });
  102.  
  103. viewer.zoomTo(viewer.entities);
  104.  
  105.   </script>
  106. </body>
  107. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <!-- Use correct character set. -->
  5.   <meta charset="utf-8">
  6.   <!-- Tell IE to use the latest, best version. -->
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  9.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  10.   <title>Hello World!</title>
  11.   <script src="../Cesium/Build/Cesium/Cesium.js"></script>
  12.   <style>
  13.  @import url(../Cesium/Build/Cesium/Widgets/widgets.css);
  14.       html, body, #cesiumContainer {
  15.           width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  16.       }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div id="cesiumContainer"></div>
  21.   <script>
  22. var viewer = new Cesium.Viewer('cesiumContainer');
  23.  
  24. var redLine = viewer.entities.add({
  25.     name : 'Red line on the surface',
  26.     polyline : {
  27.         positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
  28.                                                         -125, 35]),
  29.         width : 5,//多段线的宽度（以像素为单位）。
  30.         material : Cesium.Color.RED
  31.     }
  32. });
  33.  
  34. var glowingLine = viewer.entities.add({
  35.     name : 'Glowing blue line on the surface',
  36.     polyline : {
  37.         positions : Cesium.Cartesian3.fromDegreesArray([-75, 37,
  38.                                                         -125, 37]),
  39.         width : 10,
  40.         material : new Cesium.PolylineGlowMaterialProperty({
  41.             glowPower : 0.2,//发光强度的属性，以总线宽度的百分比表示。
  42.             color : Cesium.Color.BLUE
  43.         })
  44.     }
  45. });
  46.  
  47. var orangeOutlined = viewer.entities.add({
  48.     name : 'Orange line with black outline at height and following the surface',
  49.     polyline : {
  50.         positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000,
  51.                                                                -125, 39, 250000]),
  52.         width : 5,
  53.         material : new Cesium.PolylineOutlineMaterialProperty({
  54.             color : Cesium.Color.ORANGE,
  55.             outlineWidth : 2,
  56.             outlineColor : Cesium.Color.BLACK
  57.         })
  58.     }
  59. });
  60.  
  61. var purpleArrow = viewer.entities.add({
  62.     name : 'Purple straight arrow at height',
  63.     polyline : {
  64.         positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,
  65.                                                                -125, 43, 500000]),
  66.         width : 10,
  67.         followSurface : false,
  68.         material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
  69.     }
  70. });
  71.  
  72. viewer.zoomTo(viewer.entities);
  73.   </script>
  74. </body>
  75. </html>
  76.  
  77.   </script>
  78. </body>
  79. </html>

cesium可视化空间数据2的更多相关文章

  1. cesium可视化空间数据1

    ---恢复内容开始--- 1.多边形 我们要从经度和纬度列表中为美国怀俄明州添加一个多边形.(怀俄明被选中是因为它是一个简单的多边形.)我们可以复制并粘贴以下代码到Sandcastle中:   < ...

  2. 用Cesium可视化地下设施、矿山和地质层

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 本月的CesiumJS 1.70发布引入的一项关键改进是地下数据 ...

  3. Cesium数据可视化-仓储调度系统可视化部分(附github源码)

    Cesium数据可视化-仓储调度系统可视化部分 目的 仓储调度系统需要一个可视化展示物资运输实况的界面,需要配合GPS设备发送的位置信息,实时绘制物资运输情况和仓储仓库.因此,使用Cesium可视化该 ...

  4. Cesium参考资源

    Reference resources cesium官网 cesium 下载 cesium官方文档 APIs cesium-workshop github cesium 官方示例 cesium git ...

  5. 手把手教你学习R语言

    本文为带大家了解R语言以及分段式的步骤教程! 人们学习R语言时普遍存在缺乏系统学习方法的问题.学习者不知道从哪开始,如何进行,选择什么学习资源.虽然网络上有许多不错的免费学习资源,然而它们多过了头,反 ...

  6. 剖析虚幻渲染体系（15）- XR专题

    目录 15.1 本篇概述 15.1.1 本篇内容 15.1.2 XR概念 15.1.2.1 VR 15.1.2.2 AR 15.1.2.3 MR 15.1.2.4 XR 15.1.3 XR综述 15. ...

  7. Cesium中级教程1 - 空间数据可视化（一）

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 本教程将教读者如何使用Cesium的实体(Entity)API绘 ...

  8. Cesium中级教程4 - 空间数据可视化（二）

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Viewer中的Entity功能 让我们看看Viewer为操作e ...

  9. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

随机推荐

  1. Linux下NDK的配置

    vim ~/.bashrc 在文件末尾添加如图两行代码 写下来方便复制export NDKROOT=/usr/ndk/android-ndk-r12bexport PATH=$NDKROOT:$PAT ...

  2. 经典 makefile 教程

     makefile很重要 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序 ...

  3. python2安装pymongo

    wget --no-check-certificate https://pypi.python.org/packages/source/p/pymongo/pymongo-2.6.3.tar.gz#m ...

  4. Windows2012R2版本区别

    From:https://zh.wikipedia.org/wiki/Windows_Server_2012 Windows Server 2012有4种版本:Foundation, Essentia ...

  5. 【Java】高并发同步Volatile的使用

    引言: 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的Synchronized,它在多处理器开发中保证了共享变量的“可见性”. 可见性的意思 ...

  6. java 多线程9 : synchronized锁机制 之 代码块锁

    synchronized同步代码块 用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...

  7. 关于HTML、XHTML、CSS、XML的区别

    1.HTML(Hyper Text Mark-up Language) HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言,是为“网页创建和其他可在 ...

  8. c++之——抽象基类

    在一个虚函数的声明语句的分号前加上 =0:就可以将一个虚函数变成纯虚函数,其中,=0只能出现在类内部的虚函数声明语句处.纯虚函数只用声明,而不用定义,其存在就是为了提供接口,含有纯虚函数的类是抽象基类 ...

  9. [转]Windows Server 2008 对 CPU 及 RAM 的支持规格

    Windows Server 2008 对 CPU 的支援: 在看到下表时,请注意其数字所指的是:主板上的实体 CPU的个数,也就是几个 Sockets 举例来说,机器上安装 2 个 4 核心的 CP ...

  10. POJ 3253-Fence Repair（堆）

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 27055   Accepted: 8800 Des ...