CustomServicePan.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <div class="sm-function-module-content" v-show="customServiceShow">
  3. <div class="sm-function-module-sub-section">
  4. <label class="label-container">{{ Resource.OpenLayer }}</label>
  5. <select class="sm-select" v-model="LayerType">
  6. <option value="S3M">{{ Resource.s3mLayer }}</option>
  7. <option value="IMAGERY">{{ Resource.imageryLayer }}</option>
  8. <option value="TERRAIN">{{ Resource.terrainLayer }}</option>
  9. </select>
  10. <div class="token">
  11. <label>{{ Resource.addToken }}</label>
  12. <input style="margin-left: 10px" type="checkbox" v-model="addToken" />
  13. </div>
  14. <input
  15. class="sm-input"
  16. type="text"
  17. :placeholder="Resource.layerUrl"
  18. v-model="LayerURL"
  19. />
  20. <input
  21. class="sm-input"
  22. type="text"
  23. :placeholder="Resource.layerName"
  24. v-model="LayerNmae"
  25. />
  26. <input
  27. class="sm-input"
  28. type="text"
  29. :placeholder="Resource.addToken"
  30. v-show="addToken"
  31. v-model="LayerToken"
  32. />
  33. <div class="boxchild">
  34. <el-button type="primary" size="mini" @click="openLayer">{{
  35. Resource.confirm
  36. }}</el-button>
  37. </div>
  38. <label class="label-container">{{ Resource.OpenScene }}</label>
  39. <label>{{ Resource.addToken }}</label>
  40. <input
  41. style="margin-left: 10px"
  42. type="checkbox"
  43. v-model="addSceneToken"
  44. />
  45. <input
  46. class="sm-input"
  47. type="text"
  48. :placeholder="Resource.sceneUrl"
  49. v-model="SceneURL"
  50. />
  51. <input
  52. class="sm-input"
  53. type="text"
  54. :placeholder="Resource.addToken"
  55. v-show="addSceneToken"
  56. v-model="SceneToken"
  57. />
  58. <div class="boxchild">
  59. <el-button type="primary" size="mini" @click="openScene">
  60. {{ Resource.confirm }}
  61. </el-button>
  62. </div>
  63. </div>
  64. </div>
  65. </template>
  66. <script>
  67. let layerLen;
  68. export default {
  69. name: "addCustomService",
  70. data() {
  71. return {
  72. sharedState: store.state,
  73. LayerType: "S3M",
  74. addToken: false,
  75. LayerURL: null,
  76. LayerNmae: null,
  77. LayerToken: null,
  78. addSceneToken: false,
  79. SceneURL: null,
  80. SceneToken: null,
  81. };
  82. },
  83. computed: {
  84. customServiceShow: function () {
  85. return this.sharedState.addLayer[1];
  86. },
  87. },
  88. methods: {
  89. // 添加自定义场景
  90. openScene() {
  91. if (this.SceneURL == null || this.SceneURL == "") {
  92. this.$Message.error(Resource.urlNotNullMsg);
  93. return;
  94. }
  95. // 检查地址是否正确
  96. // if(){return;}
  97. //去引号
  98. if (this.SceneURL.charAt(0) == '"' || this.SceneURL.charAt(0) == "'") {
  99. let reg = /^['|"](.*)['|"]$/;
  100. this.SceneURL = this.SceneURL.replace(reg, "$1");
  101. }
  102. if (this.SceneToken) {
  103. Cesium.Credential.CREDENTIAL = new Cesium.Credential(this.SceneToken);
  104. }
  105. if (viewer) {
  106. let promiseArray = [];
  107. let s = viewer.scene.open(this.SceneURL);
  108. promiseArray.push(s);
  109. this.promiseWhen(promiseArray);
  110. }
  111. },
  112. // 打开自定义图层
  113. openLayer() {
  114. if (this.LayerURL == null || this.LayerURL == "") {
  115. this.$Message.error(Resource.urlNotNullMsg);
  116. return;
  117. }
  118. if (this.LayerURL.charAt(0) == '"' || this.LayerURL.charAt(0) == "'") {
  119. let reg = /^['|"](.*)['|"]$/;
  120. this.LayerURL = this.LayerURL.replace(reg, "$1");
  121. }
  122. if (this.LayerToken) {
  123. Cesium.Credential.CREDENTIAL = new Cesium.Credential(this.LayerToken);
  124. }
  125. switch (this.LayerType) {
  126. case "S3M":
  127. this.addS3M(this.LayerURL);
  128. break;
  129. case "IMAGERY":
  130. this.addImage(this.LayerURL);
  131. break;
  132. case "TERRAIN":
  133. this.addTerrain(this.LayerURL);
  134. break;
  135. default:
  136. store.setAnalysisAction([0, 0, 0, 0, 1]);
  137. }
  138. },
  139. addS3M(LayerURL) {
  140. let promiseArray = [];
  141. let options = {};
  142. if (this.LayerNmae) {
  143. options.name = this.LayerNmae;
  144. } else {
  145. this.$Message.warning(Resource.layerNameNotNullMsg);
  146. return;
  147. }
  148. layerLen = viewer.scene.layers.layerQueue.length;
  149. promiseArray.push(viewer.scene.addS3MTilesLayerByScp(LayerURL, options));
  150. this.promiseWhen(promiseArray, true);
  151. },
  152. addTerrain(LayerURL) {
  153. viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  154. url: LayerURL,
  155. isSct: true, //地形服务源自SuperMap iServer发布时需设置isSct为true
  156. });
  157. setTimeout(() => {
  158. //更新图层
  159. store.setTerrainLayerManage(viewer.terrainProvider.tablename);
  160. }, 1500);
  161. },
  162. addImage(LayerURL) {
  163. var layer = viewer.imageryLayers.addImageryProvider(
  164. new Cesium.SuperMapImageryProvider({
  165. url: LayerURL,
  166. })
  167. );
  168. viewer.flyTo(layer);
  169. setTimeout(() => {
  170. //更新图层
  171. store.setImgLayerManage(viewer.imageryLayers._layers.length);
  172. }, 1500);
  173. },
  174. promiseWhen(promiseArray, isSCP) {
  175. Cesium.when.all(
  176. promiseArray,
  177. function (layers) {
  178. setTimeout(() => {
  179. //更新图层
  180. store.setS3MLayerManage(viewer.scene.layers.layerQueue.length);
  181. store.setImgLayerManage(viewer.imageryLayers._layers.length);
  182. store.setTerrainLayerManage(viewer.terrainProvider.tablename);
  183. }, 500);
  184. if (isSCP && layers[layerLen]) {
  185. viewer.flyTo(layers[layerLen]);
  186. }
  187. },
  188. function (e) {
  189. if (widget._showRenderLoopErrors) {
  190. let title = Resource.scpUrlErrorMsg;
  191. widget.showErrorPanel(title, undefined, e);
  192. }
  193. }
  194. );
  195. },
  196. },
  197. };
  198. </script>
  199. <style lang="scss" scoped>
  200. @import "./CustomServicePan.scss";
  201. </style>