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 118 additions and 84 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,32 +57,86 @@ export default { ...@@ -57,32 +57,86 @@ 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";
78 // 添加数据服务
79 this.addLayers(__this.viewer);
80
81 var clampMode = 0; // 空间模式
82 var handlerPolygon;
83 var positions = null;
84 var positions2d = null;
85
86 // 绘制面
87 handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon);
88 handlerPolygon.drawEvt.addEventListener(function(polygon){
89 var array = [].concat(polygon.object.positions);
90 positions = [];
91 positions2d = [];
92 for(var i = 0, len = array.length; i < len; i++){
93 var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
94 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
95 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
96 var h=cartographic.height;
97 if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
98 positions.push(longitude);
99 positions.push(latitude);
100 positions.push(h);
74 101
102 positions2d.push(longitude);
103 positions2d.push(latitude);
104 positions2d.push(1000.0);
105 }
106 }
107 return positions;
108 });
109 $("#draw").click(function(){
110 handlerPolygon && handlerPolygon.deactivate();
111 handlerPolygon && handlerPolygon.activate();
112 });
113
114 $("#begin").click(function(){
115 var waterHeight = 2000;
116 var targetHeight = 3500;
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();
122 });
123
124 $("#clear").click(function(){
125 handlerPolygon && handlerPolygon.clear();
126 });
127
128 $("#loadingbar").remove();
129 $("#toolbar").show();
130 },
131 methods: {
132 addLayers: function(viewer){
133 var __this = this;
75 // 添加影像数据 134 // 添加影像数据
76 var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({ 135 var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
77 url : URL_CONFIG.SiChuan_IMG 136 url : URL_CONFIG.SiChuan_IMG
78 })); 137 }));
79
80 var clampMode = 0; // 空间模式
81 var scene = this.viewer.scene;
82 var widget = this.viewer.cesiumWidget;
83 var handlerArea, handlePolygon;
84 // 设置相机视图 138 // 设置相机视图
85 scene.camera.setView({ 139 viewer.scene.camera.setView({
86 destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545), 140 destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
87 orientation : { 141 orientation : {
88 heading : 1.4059101895600987, 142 heading : 1.4059101895600987,
...@@ -90,11 +144,11 @@ export default { ...@@ -90,11 +144,11 @@ export default {
90 roll : 2.708944180085382e-13 144 roll : 2.708944180085382e-13
91 } 145 }
92 }); 146 });
93 147 },
94 // 量测面积代码 148 measureArea: function(handlerArea, viewer){
95 var stviewer = this.viewer; 149 var clampMode = 0; // 空间模式
96 var positions = null; 150 var positions = null;
97 handlerArea = new Cesium.MeasureHandler(this.viewer, Cesium.MeasureMode.Area, clampMode); 151 // handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode);
98 handlerArea.measureEvt.addEventListener(function(result){ 152 handlerArea.measureEvt.addEventListener(function(result){
99 var mj = Number(result.area); 153 var mj = Number(result.area);
100 var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡" 154 var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
...@@ -102,41 +156,16 @@ export default { ...@@ -102,41 +156,16 @@ export default {
102 }); 156 });
103 handlerArea.activeEvt.addEventListener(function(isActive){ 157 handlerArea.activeEvt.addEventListener(function(isActive){
104 if(isActive === true){ 158 if(isActive === true){
105 stviewer.enableCursorStyle = false; 159 viewer.enableCursorStyle = false;
106 stviewer._element.style.cursor = ""; 160 viewer._element.style.cursor = "";
107 $("body").removeClass("measureCur").addClass("measureCur"); 161 $("body").removeClass("measureCur").addClass("measureCur");
108 }else{ 162 }else{
109 stviewer.enableCursorStyle = true; 163 viewer.enableCursorStyle = true;
110 $("body").removeClass("measureCur"); 164 $("body").removeClass("measureCur");
111 } 165 }
112 }); 166 });
113 $("#area").click(function(){ 167 },
114 deactiveAll(); 168 initHyp: function(){
115 handlerArea&&handlerArea.activate();
116 });
117
118 // 绘制面
119 handlePolygon = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Polygon);
120 handlePolygon.drawEvt.addEventListener(function(polygon){
121 var array = [].concat(polygon.object.positions);
122 positions = [];
123 for(var i = 0, len = array.length; i < len; i++){
124 var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
125 var longitude = Cesium.Math.toDegrees(cartographic.longitude);
126 var latitude = Cesium.Math.toDegrees(cartographic.latitude);
127 var h=cartographic.height;
128 if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
129 positions.push(longitude);
130 positions.push(latitude);
131 positions.push(h);
132 }
133 }
134 });
135 $("#draw").click(function(){
136 deactiveAll();
137 handlePolygon && handlePolygon.activate();
138 });
139
140 var hyp = new Cesium.HypsometricSetting(); 169 var hyp = new Cesium.HypsometricSetting();
141 //设置显示模式 170 //设置显示模式
142 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE; 171 hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
...@@ -163,52 +192,57 @@ export default { ...@@ -163,52 +192,57 @@ export default {
163 hyp.Opacity = 0.8; 192 hyp.Opacity = 0.8;
164 //等高线间隔为200m 193 //等高线间隔为200m
165 hyp.LineInterval = 200.0; 194 hyp.LineInterval = 200.0;
166 // 淹没分析
167 var currentHeight = 0;
168 var maxValue = 0;
169 var minValue = 0;
170 var int = null;
171 195
172 function flood(positions){ 196 return hyp;
173 currentHeight = 0; 197 },
174 int = self.setInterval("flood()", 100); 198 floodCal: function(entities, positions2d, waterHeight, targetHeight){
175 maxValue = 3300; 199 let entity = entities.add({
176 minValue = 3000; 200 polygon : {
177 hyp.MinVisibleValue = minValue; 201 hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
178 currentHeight = minValue; 202 perPositionHeight: true,
179 window.flood = function() { 203 extrudedHeight: new Cesium.CallbackProperty(function(){
180 if(currentHeight > maxValue) { 204 waterHeight+=20;
181 self.clearInterval(int); 205 if(waterHeight>targetHeight){
182 return; 206 waterHeight=targetHeight;//给个最大值
183 } 207 }
184 hyp.MaxVisibleValue = currentHeight; 208 return waterHeight
185 hyp.CoverageArea = positions; 209 }, false),
186 console.log(positions); 210 material: new Cesium.ImageMaterialProperty({
187 stviewer.scene.globe.HypsometricSetting = { 211 image: './images/waterNormals.jpg',
188 hypsometricSetting : hyp, 212 repeat : new Cesium.Cartesian2(1, 1),
189 analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION 213 transparent: true
190 }; 214 })
191 currentHeight += (500) / 10;
192 };
193 } 215 }
194 $("#begin").click(function(){
195 flood(positions);
196 handlePolygon.polygon.show = false;
197 // handlePolygon.polyline.show=false;
198 }); 216 });
199 217 },
200 function clearAll(){ 218 floodParse: function(scene, positions2d, waterHeight, targetHeight){
201 handlerArea && handlerArea.clear(); 219 var River1=new Cesium.Primitive({
202 handlePolygon && handlePolygon.clear(); 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
203 } 238 }
204
205 function deactiveAll(){
206 handlePolygon && handlePolygon.deactivate();
207 handlerArea && handlerArea.deactivate();
208 } 239 }
209 240 })
210 $("#loadingbar").remove(); 241 }),
211 $("#toolbar").show(); 242 show : true
243 });
244 scene.primitives.add(River1);
245 }
212 } 246 }
213 }; 247 };
214 </script> 248 </script>
......