'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