Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
736da9bf by chiangbt
Options

20191205

1 parent 8e7bd3ba
Inline Side-by-side
Showing 2 changed files with 148 additions and 114 deletions
...@@ -35,9 +35,9 @@ ...@@ -35,9 +35,9 @@
35 </div> 35 </div>
36 <div id="toolbar" class="param-container tool-bar"> 36 <div id="toolbar" class="param-container tool-bar">
37 <div class="param-item"> 37 <div class="param-item">
38 <button type="button" id="area" class="button black">测面</button>
39 <button type="button" id="draw" class="button black">绘面</button> 38 <button type="button" id="draw" class="button black">绘面</button>
40 <button type="button" id="begin" class="button black">淹没分析</button> 39 <button type="button" id="begin" class="button black">淹没分析</button>
40 <button type="button" id="clear" class="button black">清除</button>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
...@@ -57,69 +57,38 @@ export default { ...@@ -57,69 +57,38 @@ export default {
57 left: "0px", 57 left: "0px",
58 backgroundColor: "#000000" 58 backgroundColor: "#000000"
59 }, 59 },
60 smviewer:{} 60 viewer:{}
61 } 61 }
62 }, 62 },
63 mounted: function(){ 63 mounted: function(){
64 this.viewer=new Cesium.Viewer("cesiumContainer", { 64 var __this = this;
65 __this.viewer=new Cesium.Viewer("cesiumContainer", {
65 terrainProvider : new Cesium.CesiumTerrainProvider({ 66 terrainProvider : new Cesium.CesiumTerrainProvider({
66 url : URL_CONFIG.SiChuan_TERRAIN, 67 url : URL_CONFIG.SiChuan_TERRAIN,
67 isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true 68 isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
68 }), 69 }),
69 }); 70 });
71
72 var scene = __this.viewer.scene;
73 var widget = __this.viewer.cesiumWidget;
70 // 隐藏logo 74 // 隐藏logo
71 $(".cesium-widget-credits")[0].style.visibility="hidden"; 75 $(".cesium-widget-credits")[0].style.visibility="hidden";
72 // 隐藏导航工具 76 // 隐藏导航工具
73 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 77 // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
74 78 // 添加数据服务
75 // 添加影像数据 79 this.addLayers(__this.viewer);
76 var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
77 url : URL_CONFIG.SiChuan_IMG
78 }));
79 80
80 var clampMode = 0; // 空间模式 81 var clampMode = 0; // 空间模式
81 var scene = this.viewer.scene; 82 var handlerPolygon;
82 var widget = this.viewer.cesiumWidget;
83 var handlerArea, handlePolygon;
84 // 设置相机视图
85 scene.camera.setView({
86 destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
87 orientation : {
88 heading : 1.4059101895600987,
89 pitch : -0.20917672793046682,
90 roll : 2.708944180085382e-13
91 }
92 });
93
94 // 量测面积代码
95 var stviewer = this.viewer;
96 var positions = null; 83 var positions = null;
97 handlerArea = new Cesium.MeasureHandler(this.viewer, Cesium.MeasureMode.Area, clampMode); 84 var positions2d = null;
98 handlerArea.measureEvt.addEventListener(function(result){
99 var mj = Number(result.area);
100 var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
101 handlerArea.areaLabel.text = "面积:" + area;
102 });
103 handlerArea.activeEvt.addEventListener(function(isActive){
104 if(isActive === true){
105 stviewer.enableCursorStyle = false;
106 stviewer._element.style.cursor = "";
107 $("body").removeClass("measureCur").addClass("measureCur");
108 }else{
109 stviewer.enableCursorStyle = true;
110 $("body").removeClass("measureCur");
111 }
112 });
113 $("#area").click(function(){
114 deactiveAll();
115 handlerArea&&handlerArea.activate();
116 });
117 85
118 // 绘制面 86 // 绘制面
119 handlePolygon = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Polygon); 87 handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon);
120 handlePolygon.drawEvt.addEventListener(function(polygon){ 88 handlerPolygon.drawEvt.addEventListener(function(polygon){
121 var array = [].concat(polygon.object.positions); 89 var array = [].concat(polygon.object.positions);
122 positions = []; 90 positions = [];
91 positions2d = [];
123 for(var i = 0, len = array.length; i < len; i++){ 92 for(var i = 0, len = array.length; i < len; i++){
124 var cartographic = Cesium.Cartographic.fromCartesian(array[i]); 93 var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
125 var longitude = Cesium.Math.toDegrees(cartographic.longitude); 94 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
...@@ -129,87 +98,152 @@ export default { ...@@ -129,87 +98,152 @@ export default {
129 positions.push(longitude); 98 positions.push(longitude);
130 positions.push(latitude); 99 positions.push(latitude);
131 positions.push(h); 100 positions.push(h);
101
102 positions2d.push(longitude);
103 positions2d.push(latitude);
104 positions2d.push(1000.0);
132 } 105 }
133 } 106 }
107 return positions;
134 }); 108 });
135 $("#draw").click(function(){ 109 $("#draw").click(function(){
136 deactiveAll(); 110 handlerPolygon && handlerPolygon.deactivate();
137 handlePolygon && handlePolygon.activate(); 111 handlerPolygon && handlerPolygon.activate();
138 }); 112 });
139 113
140 var hyp = new Cesium.HypsometricSetting();
141 //设置显示模式
142 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
143 //设置线颜色为红色
144 hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
145 //设置最大/最小可见高度
146 hyp.MinVisibleValue = 0;
147 //设置颜色表的最大/最小key值,表示高度
148 hyp.ColorTableMinKey = 1;
149 hyp.ColorTableMaxKey = 9000;
150 //新建颜色表
151 var colorTable = new Cesium.ColorTable();
152 var height = 1;
153 //每隔200m向颜色表插入一个随机色
154 for(var i = 0; i<90; i++){
155 height += 200;
156 colorTable.insert(height, getRandomColor());
157 }
158 //返回随机颜色
159 function getRandomColor(){
160 return new Cesium.Color(Math.random(), Math.random(), Math.random());
161 }
162 hyp.ColorTable = colorTable;
163 hyp.Opacity = 0.8;
164 //等高线间隔为200m
165 hyp.LineInterval = 200.0;
166 // 淹没分析
167 var currentHeight = 0;
168 var maxValue = 0;
169 var minValue = 0;
170 var int = null;
171
172 function flood(positions){
173 currentHeight = 0;
174 int = self.setInterval("flood()", 100);
175 maxValue = 3300;
176 minValue = 3000;
177 hyp.MinVisibleValue = minValue;
178 currentHeight = minValue;
179 window.flood = function() {
180 if(currentHeight > maxValue) {
181 self.clearInterval(int);
182 return;
183 }
184 hyp.MaxVisibleValue = currentHeight;
185 hyp.CoverageArea = positions;
186 console.log(positions);
187 stviewer.scene.globe.HypsometricSetting = {
188 hypsometricSetting : hyp,
189 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
190 };
191 currentHeight += (500) / 10;
192 };
193 }
194 $("#begin").click(function(){ 114 $("#begin").click(function(){
195 flood(positions); 115 var waterHeight = 2000;
196 handlePolygon.polygon.show = false; 116 var targetHeight = 3500;
197 // handlePolygon.polyline.show=false; 117 var entities = __this.viewer.entities;
118 //方式1
119 // __this.floodCal(entities, positions2d, waterHeight, targetHeight);
120 __this.floodParse(scene, positions2d, waterHeight, targetHeight);
121 handlerPolygon && handlerPolygon.clear();
198 }); 122 });
199 123
200 function clearAll(){ 124 $("#clear").click(function(){
201 handlerArea && handlerArea.clear(); 125 handlerPolygon && handlerPolygon.clear();
202 handlePolygon && handlePolygon.clear(); 126 });
203 }
204
205 function deactiveAll(){
206 handlePolygon && handlePolygon.deactivate();
207 handlerArea && handlerArea.deactivate();
208 }
209 127
210 $("#loadingbar").remove(); 128 $("#loadingbar").remove();
211 $("#toolbar").show(); 129 $("#toolbar").show();
212 } 130 },
131 methods: {
132 addLayers: function(viewer){
133 var __this = this;
134 // 添加影像数据
135 var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
136 url : URL_CONFIG.SiChuan_IMG
137 }));
138 // 设置相机视图
139 viewer.scene.camera.setView({
140 destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
141 orientation : {
142 heading : 1.4059101895600987,
143 pitch : -0.20917672793046682,
144 roll : 2.708944180085382e-13
145 }
146 });
147 },
148 measureArea: function(handlerArea, viewer){
149 var clampMode = 0; // 空间模式
150 var positions = null;
151 // handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode);
152 handlerArea.measureEvt.addEventListener(function(result){
153 var mj = Number(result.area);
154 var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
155 handlerArea.areaLabel.text = "面积:" + area;
156 });
157 handlerArea.activeEvt.addEventListener(function(isActive){
158 if(isActive === true){
159 viewer.enableCursorStyle = false;
160 viewer._element.style.cursor = "";
161 $("body").removeClass("measureCur").addClass("measureCur");
162 }else{
163 viewer.enableCursorStyle = true;
164 $("body").removeClass("measureCur");
165 }
166 });
167 },
168 initHyp: function(){
169 var hyp = new Cesium.HypsometricSetting();
170 //设置显示模式
171 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
172 //设置线颜色为红色
173 hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
174 //设置最大/最小可见高度
175 hyp.MinVisibleValue = 0;
176 //设置颜色表的最大/最小key值,表示高度
177 hyp.ColorTableMinKey = 1;
178 hyp.ColorTableMaxKey = 9000;
179 //新建颜色表
180 var colorTable = new Cesium.ColorTable();
181 var height = 1;
182 //每隔200m向颜色表插入一个随机色
183 for(var i = 0; i<90; i++){
184 height += 200;
185 colorTable.insert(height, getRandomColor());
186 }
187 //返回随机颜色
188 function getRandomColor(){
189 return new Cesium.Color(Math.random(), Math.random(), Math.random());
190 }
191 hyp.ColorTable = colorTable;
192 hyp.Opacity = 0.8;
193 //等高线间隔为200m
194 hyp.LineInterval = 200.0;
195
196 return hyp;
197 },
198 floodCal: function(entities, positions2d, waterHeight, targetHeight){
199 let entity = entities.add({
200 polygon : {
201 hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
202 perPositionHeight: true,
203 extrudedHeight: new Cesium.CallbackProperty(function(){
204 waterHeight+=20;
205 if(waterHeight>targetHeight){
206 waterHeight=targetHeight;//给个最大值
207 }
208 return waterHeight
209 }, false),
210 material: new Cesium.ImageMaterialProperty({
211 image: './images/waterNormals.jpg',
212 repeat : new Cesium.Cartesian2(1, 1),
213 transparent: true
214 })
215 }
216 });
217 },
218 floodParse: function(scene, positions2d, waterHeight, targetHeight){
219 var River1=new Cesium.Primitive({
220 geometryInstances : new Cesium.GeometryInstance({
221 geometry :new Cesium.PolygonGeometry({
222 polygonHierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
223 extrudedHeight: targetHeight,
224 height: waterHeight,
225 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
226 })
227 }),
228 appearance : new Cesium.EllipsoidSurfaceAppearance({
229 aboveGround : true,
230 material: new Cesium.Material({
231 fabric : {
232 type : 'Water',
233 uniforms : {
234 normalMap:'./images/waterNormals.jpg',
235 frequency: 100.0,
236 animationSpeed: 0.01,
237 amplitude: 10.0
238 }
239 }
240 })
241 }),
242 show : true
243 });
244 scene.primitives.add(River1);
245 }
246 }
213 }; 247 };
214 </script> 248 </script>
215 249
......