cesium可视化空间数据1

---恢复内容开始---

1.多边形

我们要从经度和纬度列表中为美国怀俄明州添加一个多边形。（怀俄明被选中是因为它是一个简单的多边形。）我们可以复制并粘贴以下代码到Sandcastle中：

<!DOCTYPE html>

<html>

<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>Hello World!</title>

  <script src="../Cesium/Build/Cesium/Cesium.js"></script>

  <style>

 @import url(../Cesium/Build/Cesium/Widgets/widgets.css);

      html, body, #cesiumContainer {

          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }

  </style>

</head>

<body>

  <div id="cesiumContainer"></div>

  <script>

var viewer = new Cesium.Viewer('cesiumContainer');

//Cesium.Viewer （容器)用于构建应用程序的基本构件。

var wyoming = viewer.entities.add({//添加实体到容器中，给实体命名为“Wyoming”

  name : 'Wyoming',

  polygon : {//polygon是多边形  Cesium.PolygonHierarchy （positions, holes）

    hierarchy : Cesium.Cartesian3.fromDegreesArray([//hierarchy分层（位置，孔）

                              -109.080842,45.002073,

                              -105.91517,45.002073,

                              -104.058488,44.996596,

                              -104.053011,43.002989,

                              -104.053011,41.003906,

                              -105.728954,40.998429,

                              -107.919731,41.003906,

                              -109.04798,40.998429,

                              -111.047063,40.998429,

                              -111.047063,42.000709,

                              -111.047063,44.476286,

                              -111.05254,45.002073]),

    height : 0,

    material : Cesium.Color.RED.withAlpha(0.5),//使用红色，绿色，蓝色和alpha值指定的颜色，范围从0（无强度）到1.0（全强度）。

    outline : true,//几何轮廓存在

    outlineColor : Cesium.Color.BLACK//设置轮廓颜色为黑色

  }

});

viewer.zoomTo(wyoming);//zoomTo （target，offset）目标和偏移

  </script>

</body>

</html>

立方体

<!DOCTYPE html>

<html>

<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>Hello World!</title>

  <script src="../Cesium/Build/Cesium/Cesium.js"></script>

  <style>

 @import url(../Cesium/Build/Cesium/Widgets/widgets.css);

      html, body, #cesiumContainer {

          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }

  </style>

</head>

<body>

  <div id="cesiumContainer"></div>

  <script>

var viewer = new Cesium.Viewer('cesiumContainer');//容器

var blueBox = viewer.entities.add({//蓝色盒子

    name : 'Blue box',

    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),//三维笛卡尔点（x，y，z）

    box : {

        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),//dimensions 尺寸

        material : Cesium.Color.BLUE//材质蓝色

    }

});

var redBox = viewer.entities.add({//红色盒子

    name : 'Red box with black outline',

    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),

    box : {

        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),

        material : Cesium.Color.RED.withAlpha(0.5),

        outline : true,

        outlineColor : Cesium.Color.BLACK

    }

});

var outlineOnly = viewer.entities.add({//黄色盒子

    name : 'Yellow box outline',

    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),

    box : {

        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),

        fill : false,

        outline : true,

        outlineColor : Cesium.Color.YELLOW

    }

});

viewer.zoomTo(viewer.entities);

  </script>

</body>

</html>

<!DOCTYPE html>

<html>

<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>Hello World!</title>

  <script src="../Cesium/Build/Cesium/Cesium.js"></script>

  <style>

 @import url(../Cesium/Build/Cesium/Widgets/widgets.css);

      html, body, #cesiumContainer {

          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }

  </style>

</head>

<body>

  <div id="cesiumContainer"></div>

  <script>

<!DOCTYPE html>

<html>

<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>Hello World!</title>

  <script src="../Cesium/Build/Cesium/Cesium.js"></script>

  <style>

 @import url(../Cesium/Build/Cesium/Widgets/widgets.css);

      html, body, #cesiumContainer {

          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }

  </style>

</head>

<body>

  <div id="cesiumContainer"></div>

  <script>

var viewer = new Cesium.Viewer('cesiumContainer');

var greenCircle = viewer.entities.add({

    position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),

    name : 'Green circle at height',

    ellipse : {//Ellipse椭圆

        semiMinorAxis : 300000.0,//semiMinorAxis椭圆半短轴的长度（以米为单位）

        semiMajorAxis : 300000.0,//semiMajorAxis椭圆半长轴的长度（以米为单位）

        height: 200000.0,//椭圆和椭球面之间的距离，单位为米。

        material : Cesium.Color.GREEN//绿色

    }

});

var redEllipse = viewer.entities.add({

    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),

    name : 'Red ellipse on surface with outline',

    ellipse : {

        semiMinorAxis : 250000.0,

        semiMajorAxis : 400000.0,

        material : Cesium.Color.RED.withAlpha(0.5),//材质为红色半透明

        outline : true,//轮廓

        outlineColor : Cesium.Color.RED//轮廓颜色为红色

    }

});

var blueEllipse = viewer.entities.add({

    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),

    name : 'Blue translucent, rotated, and extruded ellipse with outline',

    ellipse : {

        semiMinorAxis : 150000.0,

        semiMajorAxis : 300000.0,

        extrudedHeight : 200000.0,

        rotation : Cesium.Math.toRadians(45),//从北向逆时针旋转的角度

        material : Cesium.Color.BLUE.withAlpha(0.5),//蓝色半透明

        outline : true//轮廓

    }

});

viewer.zoomTo(viewer.entities);

  </script>

</body>

</html>

  </script>

</body>

</html>

走廊

<!DOCTYPE html>

<html>

<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>Hello World!</title>

  <script src="../Cesium/Build/Cesium/Cesium.js"></script>

  <style>

 @import url(../Cesium/Build/Cesium/Widgets/widgets.css);

      html, body, #cesiumContainer {

          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }

  </style>

</head>

<body>

  <div id="cesiumContainer"></div>

  <script>

<!DOCTYPE html>

<html>

<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>Hello World!</title>

  <script src="../Cesium/Build/Cesium/Cesium.js"></script>

  <style>

 @import url(../Cesium/Build/Cesium/Widgets/widgets.css);

      html, body, #cesiumContainer {

          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

      }

  </style>

</head>

<body>

  <div id="cesiumContainer"></div>

  <script>

var viewer = new Cesium.Viewer('cesiumContainer');

var redCorridor = viewer.entities.add({

    name : 'Red corridor on surface with rounded corners and outline',

    corridor : {//走廊

        positions : Cesium.Cartesian3.fromDegreesArray([//定义走廊中心的位置数组。

                                                        -100.0, 40.0,

                                                        -105.0, 40.0,

                                                        -105.0, 35.0

                                                    ]),

                                                    width : 200000.0,//走廊边缘之间的距离，以米为单位

        material : Cesium.Color.RED.withAlpha(0.5),//材质为红色半透明

        outline : true,//轮廓

        outlineColor : Cesium.Color.RED//轮廓颜色红色

    }

});

var greenCorridor = viewer.entities.add({

    name : 'Green corridor at height with mitered corners',

    corridor : {

        positions : Cesium.Cartesian3.fromDegreesArray([

                                                        -90.0, 40.0,

                                                        -95.0, 40.0,

                                                        -95.0, 35.0

                                                    ]),

                                                    height: 100000.0,

                                                    width : 200000.0,

        cornerType: Cesium.CornerType.MITERED,//确定角的样式。Cesium.CornerType.BEVELED 角被剪切；Cesium.CornerType.MITERED角点是相邻边的交点；Cesium.CornerType.ROUNDED角有光滑的边缘

        material : Cesium.Color.GREEN//材质为绿色

    }

});

var blueCorridor = viewer.entities.add({

    name : 'Blue extruded corridor with beveled corners and outline',

    corridor : {

        positions : Cesium.Cartesian3.fromDegreesArray([

                                                        -80.0, 40.0,

                                                        -85.0, 40.0,

                                                        -85.0, 35.0

                                                    ]),

        height : 200000.0,

        extrudedHeight : 100000.0,//椭圆表面和挤压面之间的距离（米）。

        width : 200000.0,

        cornerType: Cesium.CornerType.BEVELED,

        material : Cesium.Color.BLUE.withAlpha(0.5),

        outline : true,

        outlineColor : Cesium.Color.BLUE

    }

});

viewer.zoomTo(viewer.entities);

  </script>

</body>

</html>

  </script>

</body>

</html>

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

cesium可视化空间数据2
圆柱圆锥体 <!DOCTYPE html> <html> <head>  < ...
用Cesium可视化地下设施、矿山和地质层
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 本月的CesiumJS 1.70发布引入的一项关键改进是地下数据 ...
Cesium数据可视化-仓储调度系统可视化部分(附github源码)
Cesium数据可视化-仓储调度系统可视化部分目的仓储调度系统需要一个可视化展示物资运输实况的界面,需要配合GPS设备发送的位置信息,实时绘制物资运输情况和仓储仓库.因此,使用Cesium可视化该 ...
Cesium参考资源
Reference resources cesium官网 cesium 下载 cesium官方文档 APIs cesium-workshop github cesium 官方示例 cesium git ...
手把手教你学习R语言
本文为带大家了解R语言以及分段式的步骤教程! 人们学习R语言时普遍存在缺乏系统学习方法的问题.学习者不知道从哪开始,如何进行,选择什么学习资源.虽然网络上有许多不错的免费学习资源,然而它们多过了头,反 ...
剖析虚幻渲染体系（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. ...
Cesium中级教程1 - 空间数据可视化（一）
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 本教程将教读者如何使用Cesium的实体(Entity)API绘 ...
Cesium中级教程4 - 空间数据可视化（二）
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Viewer中的Entity功能让我们看看Viewer为操作e ...
Ceisum官方教程3 -- 空间数据可视化
原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

随机推荐

Chrome浏览器缓存查看工具－ChromeCacheView
最近想听一下最新的流行热歌,按着某网站的新歌排行榜逐首在巨鲸音乐网搜索下载,但相当一部分的歌曲还是没能下载到,逼不得已只能到百度MP3下载,在搜索结果中已经挑体积比较大的文件来下载了,但下载到的MP3 ...
ny14 会场安排问题
会场安排问题时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...
Ng-cloak解决angularJs中的闪烁问题
引言上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题,这次我们来使用另一种方法解决一下. 在使用AngularJS开发评教移动端的时候,我们经常会看见在Chrome这类快 ...
Android AlarmManager的一些问题
我开始的代码是这样写的 alarmManager.set(AlarmManager.RTC_WAKEUP, (5*1000), sender); 我的本意是设定五秒后启动闹钟但是每次都是我设置完闹钟 ...
Lo4j（一）初识
最近开始在研究log4j,可能因为是想要自己去搭建框架那. 废话不多说,先上一个例子好了. 第一步:当然是引入对象的jar包了地址:http://www.apache.org/dyn/closer. ...
SQL Server 2008下日志清理方法 2
SQL Server 2008下日志清理方法 (2011-07-14 10:30:45) 转自 http://blog.sina.com.cn/s/blog_4bdd3d0b0100wfvq.html ...
【WPF】CommandParameter解决多传参问题
方法一:传参按钮控件自身绑定的ItemSource 用WAF框架实现MVVM,按钮的点击事件都要通过Command来传递到这个View对应的ViewModel上,再通过ViewModel传递到上层的C ...
Spring事件监听Demo
Spring事件监听实现了观察者模式.本Demo在junit4测试环境中实现主要有三个类事件类.监听器类.事件发布类(入口) 事件类必须继承 ApplicationEvent,代码如下: impor ...
Boostrap入门级css样式学习
1. 自适应网页设计首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...
r函数知识总结
1. rbind(), cbind(): 构造.合并vector 或matrix为一个矩阵:cbind(1, 1:10) ----默认列合并, rbind(1, 1:10) ----行合并(or构造 ...

cesium可视化空间数据1

立方体

走廊

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

随机推荐

热门专题