'20191208'
Showing
8 changed files
with
247 additions
and
39 deletions
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | * @Author: jiangbotao | 2 | * @Author: jiangbotao |
3 | * @Date: 2019-12-03 22:31:52 | 3 | * @Date: 2019-12-03 22:31:52 |
4 | * @LastEditors: jiangbotao | 4 | * @LastEditors: jiangbotao |
5 | * @LastEditTime: 2019-12-08 23:13:54 | 5 | * @LastEditTime: 2019-12-09 13:55:27 |
6 | * @FilePath: \superglobevue\README.md | 6 | * @FilePath: \superglobevue\README.md |
7 | --> | 7 | --> |
8 | # superglobevue | 8 | # superglobevue |
... | @@ -31,6 +31,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 | ... | @@ -31,6 +31,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。 |
31 | - viewer_underground.vue 地底开挖效果,实际上是改变某个SCP图层的局部透明度 | 31 | - viewer_underground.vue 地底开挖效果,实际上是改变某个SCP图层的局部透明度 |
32 | - viewer_split.vue 地图分屏 | 32 | - viewer_split.vue 地图分屏 |
33 | - viewer_spatialquery.vue 空间过滤查询 | 33 | - viewer_spatialquery.vue 空间过滤查询 |
34 | - viewer_spatialquery_tl.vue 空间过滤,将结果(面)转换为entity | ||
34 | - viewer_fire.vue 火焰效果 | 35 | - viewer_fire.vue 火焰效果 |
35 | 36 | ||
36 | ## 2、设置 | 37 | ## 2、设置 | ... | ... |
1 | <!-- | 1 | <!-- |
2 | * 矢量数据白模 | 2 | * 矢量数据白模的展示 |
3 | * @Author: jiangbotao | 3 | * @Author: jiangbotao |
4 | * @Date: 2019-12-07 14:24:01 | 4 | * @Date: 2019-12-07 14:24:01 |
5 | * @LastEditors: jiangbotao | 5 | * @LastEditors: jiangbotao |
6 | * @LastEditTime: 2019-12-07 18:07:21 | 6 | * @LastEditTime: 2019-12-09 13:09:00 |
7 | * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue | 7 | * @FilePath: \superglobevue\src\components\viewer_3dmodel.vue |
8 | --> | 8 | --> |
9 | <template> | 9 | <template> |
... | @@ -65,6 +65,7 @@ export default { | ... | @@ -65,6 +65,7 @@ export default { |
65 | 65 | ||
66 | try{ | 66 | try{ |
67 | //打开所发布三维服务下的所有图层 | 67 | //打开所发布三维服务下的所有图层 |
68 | //GZ_SCENE中只有白模数据,没有矢量数据图层 | ||
68 | var promise = scene.open(URL_CONFIG.GZ_SCENE); | 69 | var promise = scene.open(URL_CONFIG.GZ_SCENE); |
69 | Cesium.when.all(promise, function(layers){ | 70 | Cesium.when.all(promise, function(layers){ |
70 | //设置图层的阴影模式 | 71 | //设置图层的阴影模式 |
... | @@ -89,7 +90,6 @@ export default { | ... | @@ -89,7 +90,6 @@ export default { |
89 | widget.showErrorPanel(title, undefined, e); | 90 | widget.showErrorPanel(title, undefined, e); |
90 | } | 91 | } |
91 | } | 92 | } |
92 | |||
93 | $('#loadingbar').remove(); | 93 | $('#loadingbar').remove(); |
94 | } | 94 | } |
95 | } | 95 | } | ... | ... |
... | @@ -59,7 +59,7 @@ export default { | ... | @@ -59,7 +59,7 @@ export default { |
59 | $(".cesium-viewer-animationContainer")[0].style.visibility="hidden"; | 59 | $(".cesium-viewer-animationContainer")[0].style.visibility="hidden"; |
60 | // 隐藏导航工具 | 60 | // 隐藏导航工具 |
61 | // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; | 61 | // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; |
62 | 62 | // 添加天地图数据 | |
63 | __this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ | 63 | __this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ |
64 | mapStyle : Cesium.TiandituMapsStyle.IMG_C, | 64 | mapStyle : Cesium.TiandituMapsStyle.IMG_C, |
65 | token: URL_CONFIG.TOKEN_TIANDITU | 65 | token: URL_CONFIG.TOKEN_TIANDITU |
... | @@ -75,12 +75,9 @@ export default { | ... | @@ -75,12 +75,9 @@ export default { |
75 | __this.smviewer.camera.setView({ | 75 | __this.smviewer.camera.setView({ |
76 | destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 450.0) | 76 | destination : Cesium.Cartesian3.fromDegrees(116.34485552299206, 39.99754814959118, 450.0) |
77 | }); | 77 | }); |
78 | 78 | // 鼠标左键点击事件 | |
79 | |||
80 | var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); | 79 | var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); |
81 | handler.setInputAction(function(e) { | 80 | handler.setInputAction(function(e) { |
82 | //首先移除之前添加的点 | ||
83 | // viewer.entities.removeAll(); | ||
84 | //获取点击位置笛卡尔坐标 | 81 | //获取点击位置笛卡尔坐标 |
85 | var position = scene.pickPosition(e.position); | 82 | var position = scene.pickPosition(e.position); |
86 | //将笛卡尔坐标转化为经纬度坐标 | 83 | //将笛卡尔坐标转化为经纬度坐标 |
... | @@ -88,7 +85,7 @@ export default { | ... | @@ -88,7 +85,7 @@ export default { |
88 | var longitude = Cesium.Math.toDegrees(cartographic.longitude); | 85 | var longitude = Cesium.Math.toDegrees(cartographic.longitude); |
89 | var latitude = Cesium.Math.toDegrees(cartographic.latitude); | 86 | var latitude = Cesium.Math.toDegrees(cartographic.latitude); |
90 | var height = 2; | 87 | var height = 2; |
91 | 88 | // 火灾地点 | |
92 | var staticPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); | 89 | var staticPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); |
93 | var entity = __this.smviewer.entities.add({ | 90 | var entity = __this.smviewer.entities.add({ |
94 | position : staticPosition | 91 | position : staticPosition |
... | @@ -139,7 +136,6 @@ export default { | ... | @@ -139,7 +136,6 @@ export default { |
139 | var rotation = new Cesium.Quaternion() | 136 | var rotation = new Cesium.Quaternion() |
140 | var hpr = new Cesium.HeadingPitchRoll() | 137 | var hpr = new Cesium.HeadingPitchRoll() |
141 | var trs = new Cesium.TranslationRotationScale() | 138 | var trs = new Cesium.TranslationRotationScale() |
142 | |||
143 | // 改变粒子系统的位置 | 139 | // 改变粒子系统的位置 |
144 | function computeEmitterModelMatrix() { | 140 | function computeEmitterModelMatrix() { |
145 | hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr) | 141 | hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr) | ... | ... |
1 | <!-- | 1 | <!-- |
2 | * @Author: jiangbotao | 2 | * @Author: jiangbotao |
3 | * 本例中使用了铁岭的倾斜摄影数据发布的服务 | 3 | * 本例中使用了铁岭的倾斜摄影数据发布的服务 |
4 | * 1、必须同时发布为三维和Rest服务 | 4 | * 1、必须同时发布为三维和Rest数据服务 |
5 | * 2、使用要素查询方式来选择倾斜摄影覆盖面 | 5 | * 2、使用要素查询方式来选择倾斜摄影覆盖面(a、矢量面紧贴S3M;b、矢量面构筑entity) |
6 | * 3、使用Popup来弹出倾斜摄影覆盖面的信息 | 6 | * 3、使用Popup来弹出倾斜摄影覆盖面的信息 |
7 | * @Date: 2019-12-03 22:52:56 | 7 | * @Date: 2019-12-03 22:52:56 |
8 | * @LastEditors: jiangbotao | 8 | * @LastEditors: jiangbotao |
9 | * @LastEditTime: 2019-12-09 12:23:57 | 9 | * @LastEditTime: 2019-12-09 13:33:21 |
10 | * @FilePath: \superglobevue\src\components\viewer.vue | 10 | * @FilePath: \superglobevue\src\components\viewer.vue |
11 | --> | 11 | --> |
12 | <template> | 12 | <template> |
... | @@ -62,6 +62,7 @@ export default { | ... | @@ -62,6 +62,7 @@ export default { |
62 | }; | 62 | }; |
63 | }, | 63 | }, |
64 | mounted: function() { | 64 | mounted: function() { |
65 | // cesium视图 | ||
65 | this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false }); | 66 | this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false }); |
66 | // 使用自定义的navigation | 67 | // 使用自定义的navigation |
67 | var options = {}; | 68 | var options = {}; |
... | @@ -74,19 +75,24 @@ export default { | ... | @@ -74,19 +75,24 @@ export default { |
74 | $(".cesium-widget-credits")[0].style.visibility = "hidden"; | 75 | $(".cesium-widget-credits")[0].style.visibility = "hidden"; |
75 | // 隐藏导航工具 | 76 | // 隐藏导航工具 |
76 | $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; | 77 | $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; |
77 | 78 | // 必要的引用对象 | |
78 | var smviewer = this.viewer; | 79 | var smviewer = this.viewer; |
79 | var scene = this.viewer.scene; | 80 | var scene = this.viewer.scene; |
80 | var widget = this.viewer.cesiumWidget; | 81 | var widget = this.viewer.cesiumWidget; |
81 | var camera = scene.camera; | 82 | var camera = scene.camera; |
82 | // 场景位置,用于popup定位 | 83 | // 场景位置,用于popup定位 |
83 | var scenePosition = null; | 84 | var scenePosition = null; |
85 | var infoboxContainer = document.getElementById("bubble"); | ||
86 | var table = document.getElementById("tab"); | ||
84 | 87 | ||
85 | try { | 88 | try { |
89 | // 添加s3m图层 | ||
86 | var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config", | 90 | var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config", |
87 | { name: "oblique photography" }); | 91 | { name: "oblique photography" }); |
88 | Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面,否则矢量面找不到目标去贴对象 | 92 | Cesium.when.all([promise2], function(obliqueLayers){ |
89 | camera.setView({ // 先定位,开始渲染定位区域的倾斜 | 93 | // 等倾斜摄影数据加载完了再去加载矢量面,否则矢量面找不到目标去贴对象 |
94 | // 先定位,开始渲染定位区域的倾斜 | ||
95 | camera.setView({ | ||
90 | destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093), | 96 | destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093), |
91 | orientation : { | 97 | orientation : { |
92 | heading: 4.39611370540786, | 98 | heading: 4.39611370540786, |
... | @@ -103,16 +109,17 @@ export default { | ... | @@ -103,16 +109,17 @@ export default { |
103 | widget.showErrorPanel(title, undefined, e); | 109 | widget.showErrorPanel(title, undefined, e); |
104 | } | 110 | } |
105 | } | 111 | } |
112 | // 倾斜摄影模型下的矢量数据面 | ||
106 | var dataSourceName = '铁岭矢量面'; // 数据源名称 | 113 | var dataSourceName = '铁岭矢量面'; // 数据源名称 |
107 | var dataSetName = 'New_Region3D_1'; // 数据集名称 | 114 | var dataSetName = 'New_Region3D_1'; // 数据集名称 |
108 | var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true'; | 115 | var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true'; |
109 | var infoboxContainer = document.getElementById("bubble"); | ||
110 | var table = document.getElementById("tab"); | ||
111 | 116 | ||
112 | // 鼠标左键的触发事件,查询要素并弹出显示 | 117 | // 鼠标左键的触发事件,查询要素并弹出显示 |
113 | var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); | 118 | var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); |
114 | handler.setInputAction(function(e) { | 119 | handler.setInputAction(function(e) { |
120 | // 删除可能存在的identify-area的entity,它是我们后面查询的用于标识模型的三维面 | ||
115 | smviewer.entities.removeById('identify-area'); | 121 | smviewer.entities.removeById('identify-area'); |
122 | // 当前位置 | ||
116 | var position = scene.pickPosition(e.position); | 123 | var position = scene.pickPosition(e.position); |
117 | // 设置场景位置 | 124 | // 设置场景位置 |
118 | scenePosition = position; | 125 | scenePosition = position; |
... | @@ -123,24 +130,10 @@ export default { | ... | @@ -123,24 +130,10 @@ export default { |
123 | x: longitude, | 130 | x: longitude, |
124 | y: latitude | 131 | y: latitude |
125 | }; | 132 | }; |
126 | // console.log(queryPoint); | 133 | // 将当前点转换为地理坐标后进行查询 |
127 | queryByPoint(queryPoint); | 134 | queryByPoint(queryPoint); |
128 | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | 135 | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
129 | 136 | ||
130 | var ellipsoid = this.viewer.scene.globe.ellipsoid; | ||
131 | handler.setInputAction(function(e) { | ||
132 | var cartesian = smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid); | ||
133 | if(cartesian){ | ||
134 | //将笛卡尔三维坐标转为地图坐标(弧度) | ||
135 | var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian); | ||
136 | //将地图坐标(弧度)转为十进制的度数 | ||
137 | var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); | ||
138 | var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4); | ||
139 | var alti_String = (smviewer.camera.positionCartographic.height).toFixed(2); | ||
140 | $('.ant-layout-footer').text('经度 : ' + log_String +' | 纬度 : ' + lat_String + ' | 高度 : ' + alti_String); | ||
141 | } | ||
142 | }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
143 | |||
144 | $("#close").click(function(){ | 137 | $("#close").click(function(){ |
145 | // 关闭气泡 | 138 | // 关闭气泡 |
146 | smviewer.entities.removeAll(); | 139 | smviewer.entities.removeAll(); |
... | @@ -182,7 +175,7 @@ export default { | ... | @@ -182,7 +175,7 @@ export default { |
182 | if (resultObj.featureCount > 0) { | 175 | if (resultObj.featureCount > 0) { |
183 | var selectedFeature = resultObj.features[0]; | 176 | var selectedFeature = resultObj.features[0]; |
184 | addClapFeature(selectedFeature); | 177 | addClapFeature(selectedFeature); |
185 | console.log(selectedFeature); | 178 | // console.log(selectedFeature); |
186 | $("#bubble").show(); | 179 | $("#bubble").show(); |
187 | for (var i=table.rows.length-1; i>-1; i--){ | 180 | for (var i=table.rows.length-1; i>-1; i--){ |
188 | table.deleteRow(i); | 181 | table.deleteRow(i); |
... | @@ -205,6 +198,9 @@ export default { | ... | @@ -205,6 +198,9 @@ export default { |
205 | } | 198 | } |
206 | 199 | ||
207 | // 将数据服务查询到的要素添加到场景中高亮显示,表示选中效果。 | 200 | // 将数据服务查询到的要素添加到场景中高亮显示,表示选中效果。 |
201 | // 两种方法: | ||
202 | // a. 矢量面紧贴S3M | ||
203 | // b. 使用entity模型 | ||
208 | function addClapFeature(feature) { | 204 | function addClapFeature(feature) { |
209 | var lonLatArr = getLonLatArray(feature.geometry.points); | 205 | var lonLatArr = getLonLatArray(feature.geometry.points); |
210 | // smviewer.entities.add({ | 206 | // smviewer.entities.add({ |
... | @@ -216,6 +212,7 @@ export default { | ... | @@ -216,6 +212,7 @@ export default { |
216 | // }, | 212 | // }, |
217 | // clampToS3M: true // 贴在S3M模型表面 | 213 | // clampToS3M: true // 贴在S3M模型表面 |
218 | // }); | 214 | // }); |
215 | console.log(lonLatArr); | ||
219 | smviewer.entities.add({ | 216 | smviewer.entities.add({ |
220 | id: 'identify-area', | 217 | id: 'identify-area', |
221 | name: '单体化标识面', | 218 | name: '单体化标识面', | ... | ... |
... | @@ -165,7 +165,6 @@ export default { | ... | @@ -165,7 +165,6 @@ export default { |
165 | spatialQueryMode:SuperMap.REST.SpatialQueryMode.CONTAIN, | 165 | spatialQueryMode:SuperMap.REST.SpatialQueryMode.CONTAIN, |
166 | geometry: drawGeometryArgs | 166 | geometry: drawGeometryArgs |
167 | }); | 167 | }); |
168 | console.log('aa'); | ||
169 | var url = 'http://www.supermapol.com/realspace/services/data-cbd/rest/data'; | 168 | var url = 'http://www.supermapol.com/realspace/services/data-cbd/rest/data'; |
170 | getFeaturesByGeometryService = new SuperMap.REST.GetFeaturesByGeometryService(url, { | 169 | getFeaturesByGeometryService = new SuperMap.REST.GetFeaturesByGeometryService(url, { |
171 | eventListeners: { | 170 | eventListeners: { | ... | ... |
src/components/viewer_spatialquery_tl.vue
0 → 100644
1 | <!-- | ||
2 | * 空间查询 | ||
3 | * 二维结果面形成entity | ||
4 | * @Author: jiangbotao | ||
5 | * @Date: 2019-12-03 22:52:56 | ||
6 | * @LastEditors: jiangbotao | ||
7 | * @LastEditTime: 2019-12-09 13:54:49 | ||
8 | * @FilePath: \superglobevue\src\components\viewer.vue | ||
9 | --> | ||
10 | <template> | ||
11 | <div> | ||
12 | <div id="cesiumContainer" v-bind:style="styleObject"></div> | ||
13 | <div id='loadingbar' class="spinner"> | ||
14 | <div class="spinner-container container1"> | ||
15 | <div class="circle1"></div> | ||
16 | <div class="circle2"></div> | ||
17 | <div class="circle3"></div> | ||
18 | <div class="circle4"></div> | ||
19 | </div> | ||
20 | <div class="spinner-container container2"> | ||
21 | <div class="circle1"></div> | ||
22 | <div class="circle2"></div> | ||
23 | <div class="circle3"></div> | ||
24 | <div class="circle4"></div> | ||
25 | </div> | ||
26 | <div class="spinner-container container3"> | ||
27 | <div class="circle1"></div> | ||
28 | <div class="circle2"></div> | ||
29 | <div class="circle3"></div> | ||
30 | <div class="circle4"></div> | ||
31 | </div> | ||
32 | </div> | ||
33 | <div id="toolbar" class="param-container tool-bar"> | ||
34 | <div> | ||
35 | <button id="search" >查询</button> | ||
36 | </div> | ||
37 | </div> | ||
38 | </div> | ||
39 | </template> | ||
40 | |||
41 | <script> | ||
42 | import URL_CONFIG from "./../config/urlConfig.vue"; | ||
43 | const Cesium = window.Cesium; | ||
44 | const SuperMap = window.SuperMap; | ||
45 | export default { | ||
46 | data: function() { | ||
47 | return { | ||
48 | styleObject: { | ||
49 | width: "100%", | ||
50 | position: "absolute", | ||
51 | top: "0px", | ||
52 | bottom: "0px", | ||
53 | left: "0px", | ||
54 | backgroundColor: "#000000" | ||
55 | }, | ||
56 | smviewer: {} | ||
57 | }; | ||
58 | }, | ||
59 | mounted: function() { | ||
60 | var __this = this; | ||
61 | __this.viewer = new Cesium.Viewer('cesiumContainer', { animation: true }); | ||
62 | var scene = __this.viewer.scene; | ||
63 | var widget = __this.viewer.cesiumWidget; | ||
64 | var camera = scene.camera; | ||
65 | // 隐藏logo | ||
66 | $(".cesium-widget-credits")[0].style.visibility = "hidden"; | ||
67 | $(".cesium-viewer-animationContainer")[0].style.visibility="hidden"; | ||
68 | $(".cesium-infoBox")[0].style.visibility='hidden'; | ||
69 | // 隐藏导航工具 | ||
70 | // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; | ||
71 | |||
72 | try { | ||
73 | var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config", | ||
74 | { name: "oblique photography" }); | ||
75 | Cesium.when([promise2], function(layers) { | ||
76 | camera.setView({ | ||
77 | destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093), | ||
78 | orientation : { | ||
79 | heading: 4.39611370540786, | ||
80 | pitch : -0.43458664812464143, | ||
81 | roll : 2.0174972803488345e-11 | ||
82 | } | ||
83 | }); | ||
84 | // 去除加载动画 | ||
85 | $('#loadingbar').remove(); | ||
86 | |||
87 | var positions = null; | ||
88 | // 绘制面 | ||
89 | var handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon, 0); | ||
90 | handlerPolygon.drawEvt.addEventListener(function(polygon){ | ||
91 | var points = polygon.object.positions; | ||
92 | var arr = []; | ||
93 | if(points && points instanceof Array && points.length >= 3){ | ||
94 | for(var i = 0, j = points.length; i < j; i++){ | ||
95 | var point = __this.convertPoint(points[i]); | ||
96 | if(point){ | ||
97 | arr.push(point); | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | var linearRing = new SuperMap.Geometry.LinearRing(arr); | ||
102 | var searchPolygon = new SuperMap.Geometry.Polygon(linearRing); | ||
103 | query(searchPolygon); | ||
104 | }); | ||
105 | $("#search").on("click", function(){ | ||
106 | handlerPolygon.activeEvt.addEventListener(function(isActive){ | ||
107 | if(isActive === true){ | ||
108 | __this.viewer.enableCursorStyle = false; | ||
109 | __this.viewer._element.style.cursor = ''; | ||
110 | $('body').removeClass('drawCur').addClass('drawCur'); | ||
111 | }else{ | ||
112 | __this.viewer.enableCursorStyle = true; | ||
113 | $('body').removeClass('drawCur'); | ||
114 | } | ||
115 | }); | ||
116 | handlerPolygon && handlerPolygon.deactivate(); | ||
117 | handlerPolygon && handlerPolygon.activate(); | ||
118 | }); | ||
119 | function processCompleted(queryEventArgs){ | ||
120 | var selectedFeatures = queryEventArgs.originResult.features; | ||
121 | __this.viewer.entities.removeAll(); | ||
122 | |||
123 | console.log(selectedFeatures); | ||
124 | for(var i = 0; i < selectedFeatures.length; i++){ | ||
125 | var value = selectedFeatures[i].fieldValues["0"]; | ||
126 | var feature = selectedFeatures[i]; | ||
127 | var pts = []; | ||
128 | for(var j=0; j< feature.geometry.points.length; j++){ | ||
129 | pts.push(feature.geometry.points[j].x); | ||
130 | pts.push(feature.geometry.points[j].y); | ||
131 | } | ||
132 | __this.viewer.entities.add({ | ||
133 | id: value, | ||
134 | name: selectedFeatures[i].fieldValues["0"], | ||
135 | polygon: { | ||
136 | hierarchy: Cesium.Cartesian3.fromDegreesArray(pts), | ||
137 | material: new Cesium.Color(0.0, 1.0, 0.0, 0.3), | ||
138 | extrudedHeight: 100, | ||
139 | height: 50, | ||
140 | vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT, | ||
141 | outline : true, | ||
142 | outlineColor : Cesium.Color.BLACK | ||
143 | }, | ||
144 | }); | ||
145 | } | ||
146 | } | ||
147 | function query(drawGeometryArgs){ | ||
148 | var getFeaturesByGeometryParameters, getFeaturesByGeometryService; | ||
149 | getFeaturesByGeometryParameters = new SuperMap.REST.GetFeaturesByGeometryParameters({ | ||
150 | datasetNames: ["铁岭矢量面:New_Region3D_1"], | ||
151 | toIndex:-1, | ||
152 | spatialQueryMode:SuperMap.REST.SpatialQueryMode.INTERSECT, | ||
153 | geometry: drawGeometryArgs | ||
154 | }); | ||
155 | var url = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data'; | ||
156 | getFeaturesByGeometryService = new SuperMap.REST.GetFeaturesByGeometryService(url, { | ||
157 | eventListeners: { | ||
158 | "processCompleted": processCompleted, | ||
159 | "processFailed": processFailed | ||
160 | } | ||
161 | }); | ||
162 | getFeaturesByGeometryService.processAsync(getFeaturesByGeometryParameters); | ||
163 | } | ||
164 | function processFailed(e) { | ||
165 | alert(e.error.errorMsg); | ||
166 | } | ||
167 | }, function() { | ||
168 | var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?'; | ||
169 | widget.showErrorPanel(title, undefined, e); | ||
170 | }); | ||
171 | } catch (e) { | ||
172 | if (widget._showRenderLoopErrors) { | ||
173 | var title = '渲染时发生错误,已停止渲染。'; | ||
174 | widget.showErrorPanel(title, undefined, e); | ||
175 | } | ||
176 | } | ||
177 | |||
178 | $("#loadingbar").remove(); | ||
179 | }, | ||
180 | methods:{ | ||
181 | convertPoint : function(point){ | ||
182 | var lonlatPoint = Cesium.Cartographic.fromCartesian(point); | ||
183 | var x = Cesium.Math.toDegrees(lonlatPoint.longitude); | ||
184 | var y = Cesium.Math.toDegrees(lonlatPoint.latitude); | ||
185 | if(x && y){ | ||
186 | return new SuperMap.Geometry.Point(x, y); | ||
187 | } | ||
188 | return undefined; | ||
189 | } | ||
190 | } | ||
191 | }; | ||
192 | </script> | ||
193 | |||
194 | <style> | ||
195 | .sm-compass { | ||
196 | pointer-events: auto; | ||
197 | position: absolute; | ||
198 | right: 10px; | ||
199 | top: 10px; | ||
200 | width: 128px; | ||
201 | height: 128px; | ||
202 | overflow: hidden; | ||
203 | } | ||
204 | .sm-zoom { | ||
205 | top: 130px; | ||
206 | } | ||
207 | .drawCur{ | ||
208 | cursor: url(/images/cur/draw.cur), auto; | ||
209 | } | ||
210 | .cesium-infoBox{ | ||
211 | top: 20; | ||
212 | left: 0; | ||
213 | transition: opacity 0.2s; | ||
214 | } | ||
215 | </style> |
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | * @Author: jiangbotao | 2 | * @Author: jiangbotao |
3 | * @Date: 2019-12-03 22:54:10 | 3 | * @Date: 2019-12-03 22:54:10 |
4 | * @LastEditors: jiangbotao | 4 | * @LastEditors: jiangbotao |
5 | * @LastEditTime: 2019-12-07 14:31:42 | 5 | * @LastEditTime: 2019-12-09 13:10:30 |
6 | * @FilePath: \superglobevue\src\config\urlConfig.vue | 6 | * @FilePath: \superglobevue\src\config\urlConfig.vue |
7 | --> | 7 | --> |
8 | <script> | 8 | <script> | ... | ... |
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | * @Author: jiangbotao | 2 | * @Author: jiangbotao |
3 | * @Date: 2019-12-03 22:31:08 | 3 | * @Date: 2019-12-03 22:31:08 |
4 | * @LastEditors: jiangbotao | 4 | * @LastEditors: jiangbotao |
5 | * @LastEditTime: 2019-12-09 12:10:58 | 5 | * @LastEditTime: 2019-12-09 13:55:51 |
6 | * @FilePath: \superglobevue\src\views\Home.vue | 6 | * @FilePath: \superglobevue\src\views\Home.vue |
7 | --> | 7 | --> |
8 | <template> | 8 | <template> |
... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
10 | </template> | 10 | </template> |
11 | 11 | ||
12 | <script> | 12 | <script> |
13 | import viewer from "@/components/viewer_s3m_single.vue"; | 13 | import viewer from "@/components/viewer_spatialquery_tl.vue"; |
14 | 14 | ||
15 | export default { | 15 | export default { |
16 | name: "home", | 16 | name: "home", | ... | ... |
-
Please register or sign in to post a comment