Skip to content

Commit 077d357

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Cesium&ES6模块的代码示例】
1 parent 5e1dce4 commit 077d357

299 files changed

Lines changed: 9025 additions & 10549 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎website/public/static/data/kml/bikeRide_wuhan.kml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,27 @@ xmlns:atom="http://www.w3.org/2005/Atom">
1010
<LineStyle><color>7f0000ff</color><width>0</width></LineStyle>
1111
<IconStyle>
1212
<scale>0.8</scale>
13-
<Icon><href>./img/glyphicons_242_google_maps.png</href></Icon>
13+
<Icon><href>./img/car.png</href></Icon>
1414
</IconStyle>
1515
</Style>
1616
<Style id="start"><IconStyle>
1717
<scale>0.5</scale>
18-
<Icon><href>./img/glyphicons_242_google_maps.png</href></Icon>
18+
<Icon><href>./img/car.png</href></Icon>
1919
<hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
2020
</IconStyle></Style>
2121
<Style id="end"><IconStyle>
2222
<scale>0.8</scale>
23-
<Icon><href>./img/glyphicons_242_google_maps.png</href></Icon>
23+
<Icon><href>./img/car.png</href></Icon>
2424
<hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
2525
</IconStyle></Style>
2626
<Style id="statistics"><IconStyle>
2727
<scale>0.8</scale>
28-
<Icon><href>./img/glyphicons_242_google_maps.png</href></Icon>
28+
<Icon><href>./img/car.png</href></Icon>
2929
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
3030
</IconStyle></Style>
3131
<Style id="waypoint"><IconStyle>
3232
<scale>0.8</scale>
33-
<Icon><href>./img/glyphicons_242_google_maps.png</href></Icon>
33+
<Icon><href>./img/car.png</href></Icon>
3434
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
3535
</IconStyle></Style>
3636
<Schema id="schema">

‎website/public/static/data/kml/img/car.png‎

3.33 KB
Loading

‎website/public/static/demo/cesium/example/analysis/analysis-cube.htm‎

Lines changed: 86 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -7,140 +7,124 @@
77
<title>填挖方计算</title>
88
<!--引入第三方的jquery脚本库-->
99
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
10+
<!--引用Cesium脚本库文件-->
1011
<script src="./static/libs/include-cesium-local.js"></script>
11-
<style type='text/css'>
12-
.ToolLib {
13-
border-radius: 3px;
14-
overflow: hidden;
15-
width: 100%;
16-
height: auto;
17-
box-shadow: 0 0 2px 1px #949292;
18-
text-align: center;
19-
z-index: 2001;
20-
border-color: #66ccff;
21-
border-bottom: 1px solid #949292;
22-
margin-bottom: 2px;
23-
}
24-
25-
#GlobeView {
26-
width: 100%;
27-
height: 100%;
28-
position: absolute;
29-
}
30-
</style>
12+
<!--当前示例页面样式表引用-->
13+
<link rel="stylesheet" href="./static/demo/cesium/style.css" />
3114
<script>
3215
var webGlobe, viewer;
3316
//定义三维瓦片类
34-
var tileset;
17+
var terrainLayer;
3518
//定义交互式绘制矩形控件类
36-
var drawPolygon;
19+
var drawElement;
3720
//定义填挖方计算类
3821
var cutFill;
39-
var drawElement;
4022
//地图初始化函数
4123
function init() {
42-
//实例化要加载的source来源对象（世界矢量地图）
4324
//构造三维视图类（视图容器div的id，三维视图设置参数）
4425
webGlobe = new Cesium.WebSceneControl('GlobeView', {
4526
terrainExaggeration: 1,
4627
});
28+
//获取三维场景的视图对象
4729
viewer = webGlobe.viewer;
48-
webGlobe.appendGoogleMap('m@207000000');
49-
//加载IGS发布的M3D缓存地图文档
50-
tileset = webGlobe.append('http://develop.smaryun.com:6163/igs/rest/g3d/M3D', {});
51-
drawElement = new Cesium.DrawElement(webGlobe.viewer);
52-
cutFill = new Cesium.CutFillAnalyzeC(viewer, {
53-
callBack: callFillCut
30+
//添加Google影像地图
31+
webGlobe.appendGoogleMapExt({
32+
ptype: 's@130'
5433
});
55-
}
56-
// 绘制边界围栏>
57-
function drawGreenWall(viewer, positions) {
58-
positions[positions.length - 1] = positions[0];
59-
viewer.entities.add({
60-
name: '围栏',
61-
wall: {
62-
positions: positions,
63-
material: Cesium.Color.GREEN,
64-
outline: true
65-
}
34+
//构造地形图层管理类
35+
var terrain = new CesiumZondy.Layer.TerrainLayer({
36+
viewer: webGlobe.viewer
6637
});
67-
}
68-
69-
function callFillCut(result) {
70-
//两种结果表达方式
71-
var inputheightRange = document.getElementById("heightRange");
72-
var inputsurfaceArea = document.getElementById("surfaceArea");
73-
var inputcutVolume = document.getElementById("cutVolume");
74-
var inputfillVolume = document.getElementById("fillVolume");
75-
inputheightRange.value = result.minHeight + "~" + result.maxHeight;
76-
inputsurfaceArea.value = result.surfaceArea;
77-
inputcutVolume.value = result.cutVolume;
78-
inputfillVolume.value = result.fillVolume;
79-
80-
alert('高程范围：' + result.minHeight + '~' + result.maxHeight +
81-
'\r\n表面积：' + result.surfaceArea +
82-
'\r\n挖体积：' + result.cutVolume +
83-
'\r\n填体积：' + result.fillVolume);
84-
}
85-
86-
87-
/*填挖方计算*/
88-
function cutfillMeasure() {
38+
//加载三维地形地图文档（服务地址，配置参数）
39+
terrainlayer = terrain.append("http://develop.smaryun.com:6163/igs/rest/g3d/terrain", {});
40+
//初始化视图功能管理类
41+
var sceneManager = new CesiumZondy.Manager.SceneManager({
42+
viewer: webGlobe.viewer
43+
});
44+
//视点跳转
45+
sceneManager.flyToEx(120.9819, 23.5307, {
46+
height: 9161,
47+
heading: 30,
48+
pitch: -10,
49+
roll: 0
50+
});
51+
//初始化交互式绘制控件
52+
drawElement = new Cesium.DrawElement(webGlobe.viewer);
53+
//激活交互式绘制工具
8954
drawElement.startDrawingPolygon({
90-
callback: function (positions) {
55+
//绘制完成回调函数
56+
callback: function(positions) {
57+
//移除视图中所有的实体对象
9158
viewer.entities.removeAll();
92-
var greenWall = drawGreenWall(viewer, positions);
93-
94-
var xPaneNum = document.getElementById("xPaneNum").value;
95-
var yPaneNum = document.getElementById("yPaneNum").value;
96-
var Height = document.getElementById("Height").value;
97-
98-
cutFill.xPaneNumber = xPaneNum;
99-
cutFill.yPaneNumber = yPaneNum;
100-
cutFill.height = Height;
101-
102-
cutFill._pointsPolygon = positions;
103-
var minMax = cutFill.getMinAndMaxCartesian();
104-
cutFill.start(minMax);
59+
//添加填挖方分析显示实体
60+
//构造闭合区点数组
61+
positions[positions.length - 1] = positions[0];
62+
//在视图中添加围栏实体
63+
viewer.entities.add({
64+
//实体名称
65+
name: '围栏',
66+
//示例类型
67+
wall: {
68+
//实体点数组
69+
positions: positions,
70+
//实体材质
71+
material: new Cesium.Color(0.2, 0.5, 0.4, 0.7),
72+
//实体轮廓
73+
outline: true
74+
}
75+
});
76+
//初始化高级分析功能管理类
77+
var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({
78+
viewer: viewer
79+
});
80+
//创建填挖方实例
81+
cutFill = advancedAnalysisManager.createCutFill(0.0, {
82+
//设置x方向采样点个数
83+
xPaneNum: document.getElementById("x").value <= 0 ? 16 : document.getElementById("x").value,
84+
//设置y方向采样点个数参数
85+
yPaneNum: document.getElementById("y").value <= 0 ? 16 : document.getElementById("y").value,
86+
//设置填挖规整高度
87+
Height: document.getElementById("z").value <= 0 ? 16 : document.getElementById("z").value,
88+
//返回结果的回调函数
89+
callback: function(result) {
90+
document.getElementById("height").value = result.minHeight.toFixed(2) + '~' + result.maxHeight.toFixed(2);
91+
document.getElementById("surfaceArea").value = result.surfaceArea;
92+
document.getElementById("cutVolume").value = result.cutVolume;
93+
document.getElementById("fillVolume").value = result.fillVolume;
94+
}
95+
});
96+
//开始执行填挖方分析
97+
advancedAnalysisManager.startCutFill(cutFill, positions);
10598
}
10699
});
107100
}
108101

109102
/*移除填挖方计算*/
110103
function stopCutFillM() {
104+
//移除视图中所有的实体对象
111105
viewer.entities.removeAll();
106+
//停止交互式绘制工具
112107
drawElement.stopDrawing();
113108
}
114109
</script>
115110
</head>
116111

117112
<body onload="init()">
118-
<div class="ToolLib">
119-
<button class="ButtonLib" id="addCutFill" onclick="cutfillMeasure()">填挖方计算</button>
120-
<button class="ButtonLib" id="remove" onclick="stopCutFillM()">移除</button>
121-
</div>
122-
<div id="toolbar1" style="position:absolute;left:10px;top:40px;z-index:1000000;color:aliceblue">
123-
<label>参数输入：</label>
124-
<form id="form1" name="form1" method="get" action="">
125-
<label>x方向采样点个数:</label>
126-
<input type="text" name="xPaneNum" id="xPaneNum" value="16" /><br />
127-
<label>y方向采样点个数:</label>
128-
<input type="text" name="yPaneNum" id="yPaneNum" value="16" /><br />
129-
<label>设置平整高程</label>
130-
<input type="text" name="Height" id="Height" value="16" /><br />
131-
</form>
132-
<label>结果输出：</label><br />
133-
<label>高程范围:</label>
134-
<input type="text" name="heightRange" id="heightRange" readonly="readonly"
135-
style="width:280px;position:absolute" /><br />
136-
<label>表面积:</label>
137-
<input type="text" name="surfaceArea" id="surfaceArea" readonly="readonly" /><br />
138-
<label>挖体积:</label>
139-
<input type="text" name="cutVolume" id="cutVolume" readonly="readonly" /><br />
140-
<label>填体积:</label>
141-
<input type="text" name="fillVolume" id="fillVolume" readonly="readonly" /><br />
113+
<div id="GlobeView">
114+
<div class="message" style="left: 10px;">
115+
<p>参数</p>
116+
<span><font>x方向采样点个数:</font><input type="text" id="x" value="16"></span></br>
117+
<span><font>y方向采样点个数:</font><input type="text" id="y" value="16"></span></br>
118+
<span><font>填挖规整高度:</font><input type="text" id="z" value="16"></span></br>
119+
</div>
120+
<div class="message" style="right: 10px;">
121+
<p>填挖结果</p>
122+
<span><font>高程范围：</font><input type="text" id="height" value="0"></span></br>
123+
<span><font>表面积：</font><input type="text" id="surfaceArea" value="0"></span></br>
124+
<span><font>挖体积：</font><input type="text" id="cutVolume" value="0"></span></br>
125+
<span><font>填体积：</font><input type="text" id="fillVolume" value="0"></span></br>
126+
</div>
142127
</div>
143-
<div id="GlobeView"></div>
144128
</body>
145129

146130
</html>

‎website/public/static/demo/cesium/example/analysis/analysis-dynamiccut.htm‎

Lines changed: 62 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,60 +8,82 @@
88
<!--引入第三方的jquery脚本库-->
99
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
1010
<script src="./static/libs/include-cesium-local.js"></script>
11-
<style type='text/css'>
12-
#GlobeView {
13-
width: 100%;
14-
height: 100%;
15-
position: absolute;
16-
}
17-
</style>
11+
<!--当前示例页面样式表引用-->
12+
<link rel="stylesheet" href="./static/demo/cesium/style.css" />
1813
<script>
1914
//在JS脚本开发中使用严格模式，及时捕获一些可能导致编程错误的ECMAScript行为
2015
'use strict';
2116
//定义三维视图的主要类
2217
var webGlobe;
2318
//定义三维瓦片类
24-
var tileset;
19+
var landscapeLayer;
20+
//动态剖切对象
2521
var dynaCut;
26-
var planetEntity;
27-
var distance = 21;
22+
23+
var distance = 0;
24+
2825
function init() {
2926
//构造三维视图类（视图容器div的id，三维视图设置参数）
30-
webGlobe = new Cesium.WebSceneControl('GlobeView', {
31-
});
27+
webGlobe = new Cesium.WebSceneControl('GlobeView', {});
3228
if (webGlobe) {
33-
//加载谷歌矢量底图
34-
webGlobe.appendGoogleMap('m@207000000');
35-
//加载IGS发布的M3D缓存地图文档
36-
tileset = webGlobe.append('http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D', {
29+
//设置地下模式
30+
webGlobe.viewer.scene.globe.undergroundMode = true;
31+
//大气显示
32+
webGlobe.viewer.scene.skyAtmosphere.show = false;
33+
//大气显示
34+
webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false;
35+
//透明度
36+
webGlobe.viewer.scene.globe.enableTransparent = true;
37+
webGlobe.viewer.scene.globe.transparent = 0.0;
38+
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0.00001);
39+
//开启深度检测
40+
webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;
41+
//初始化视图功能管理类
42+
var sceneManager = new CesiumZondy.Manager.SceneManager({
43+
viewer: webGlobe.viewer
44+
});
45+
//视点跳转
46+
sceneManager.flyToEx(112.94845170512113, 30.004246325952618, {
47+
height: 2600,
48+
heading: 67,
49+
pitch: -30,
50+
roll: 0
51+
});
52+
//构造M3D模型层管理对象
53+
var m3dLayer = new CesiumZondy.Layer.M3DLayer({
54+
viewer: webGlobe.viewer
55+
});
56+
var drilllayer = m3dLayer.append(
57+
"http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", {
58+
autoReset: false,
59+
}
60+
);
61+
//加载M3D地图文档（服务地址，配置参数）
62+
landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {
3763
autoReset: false,
38-
loaded: function (layer) {
39-
DynamicCutting();
64+
maximumScreenSpaceError: 8,
65+
loaded: function(layer) {
66+
//进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下
67+
var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -500.0);
68+
//初始化分析功能管理类
69+
var analysisManager = new CesiumZondy.Manager.AnalysisManager({
70+
viewer: webGlobe.viewer
71+
});
72+
//创建剖切对象实例
73+
dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], {
74+
color: new Cesium.Color(0.0, 1.0, 1.0, 0.3)
75+
});
76+
//设置切面回调函数
77+
dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) {
78+
//设置剖切面距离
79+
plane.distance = distance;
80+
return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));
81+
}, false);
4082
}
4183
});
42-
webGlobe.flyToEx(0.0007, -0.002, {
43-
height: 200,
44-
heading: 0,
45-
pitch: -30
46-
});
4784
}
4885
}
4986

50-
function DynamicCutting() {
51-
//进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下
52-
var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -500.0)
53-
//创建剖切对象
54-
dynaCut = webGlobe.createDynamicCutting(tileset, [plane], { color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) });
55-
//获取剖切切面
56-
planetEntity = dynaCut.planes[0];
57-
//设置切面回调函数
58-
planetEntity.plane.plane = new Cesium.CallbackProperty(function (date) {
59-
//设置剖切面距离
60-
plane.distance = distance;
61-
return Cesium.Plane.transform(plane, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));
62-
}, false);
63-
}
64-
6587
function change() {
6688
distance = Number(document.getElementById('range').value);
6789
}
@@ -70,9 +92,8 @@
7092

7193
<body onload="init()">
7294
<div id="GlobeView">
73-
<div style="position:absolute;z-index:9999">
74-
<span>剖切距离：</span>
75-
<input type="range" id="range" min="0" max="22" value="21" oninput="change()" />
95+
<div class="message" style="left: 10px;">
96+
<span><font>剖切距离：</font><input type="range" id="range" min="-5000" max="200" value="0" oninput="change()" /></span>
7697
</div>
7798
</div>
7899
</body>

0 commit comments

Comments
 (0)