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

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的更多相关文章

  1. cesium可视化空间数据2

    圆柱圆锥体 <!DOCTYPE html> <html> <head> <!-- Use correct character set. --> < ...

  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. Yii2.0 权威指南

    Yii 是一个高性能,基于组件的 PHP 框架,用于快速开发 Web 应用程序. 一.安装1.Composer 安装Composer是一个基于项目的依赖管理器,负责将PHP项目所依赖的包或库安装到项目 ...

  2. GNU风格 ARM汇编语法3

    . GNU汇编程序中的分段 <1>.section伪操作 .section <section_name> {,”<flags>”} Starts a new cod ...

  3. js实现点击按钮实现上一张下一张相册滚动效果

    /****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar&qu ...

  4. 【Unity笔记】碰撞器(Collision)与触发器(Trigger)的区别

    当碰撞器Collision组件身上的属性IsTrigger勾选为True时,该碰撞器就成了触发器. 区别:1.能够产生的回调和函数不同.碰撞器:MonoBehaviour.OnCollisionEnt ...

  5. NIO与传统IO的区别<转>

    传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大时,线程所占用的栈内存和CPU线程切换的开销将非常巨大.使用NIO,不再需要为每个线程创建单独的线程,可以用一个含有限数 ...

  6. Spring的作用域以及RequestContextListener作用<转>

    一.配置方式 在Spring2.0中除了以前的Singleton和Prototype外又加入了三个新的web作用域,分别为request.session和global session,如果你想让你的容 ...

  7. JAVA里使用CKEditor和CKFinder的配置

    在JSP里使用CKEditor和CKFinder的配置 CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. “预览”中有一大堆鸟语,看 ...

  8. Android——edittext的几个属性

    <EditText android:layout_columnSpan="2" android:hint="To" android:layout_grav ...

  9. C#递归累计到父行

    搞了半天 写了一个算法,希望能帮到需要的朋友 效果如下 水电费用是由 就是部门水费和电费累加的,而部门水费由科室水费累加起来的 表结构 DataTable dt = new DataTable(); ...

  10. Java-jdbc连接简化类jdbcUtil

    在src文件夹下创建配置文件 db.properties db.properties drivername=com.mysql.jdbc.Driver url=jdbc:mysql://localho ...