123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <template>
- <div class="sm-function-module-content" v-show="customServiceShow">
- <div class="sm-function-module-sub-section">
- <label class="label-container">{{ Resource.OpenLayer }}</label>
- <select class="sm-select" v-model="LayerType">
- <option value="S3M">{{ Resource.s3mLayer }}</option>
- <option value="IMAGERY">{{ Resource.imageryLayer }}</option>
- <option value="TERRAIN">{{ Resource.terrainLayer }}</option>
- </select>
- <div class="token">
- <label>{{ Resource.addToken }}</label>
- <input style="margin-left: 10px" type="checkbox" v-model="addToken" />
- </div>
- <input
- class="sm-input"
- type="text"
- :placeholder="Resource.layerUrl"
- v-model="LayerURL"
- />
- <input
- class="sm-input"
- type="text"
- :placeholder="Resource.layerName"
- v-model="LayerNmae"
- />
- <input
- class="sm-input"
- type="text"
- :placeholder="Resource.addToken"
- v-show="addToken"
- v-model="LayerToken"
- />
- <div class="boxchild">
- <el-button type="primary" size="mini" @click="openLayer">{{
- Resource.confirm
- }}</el-button>
- </div>
- <label class="label-container">{{ Resource.OpenScene }}</label>
- <label>{{ Resource.addToken }}</label>
- <input
- style="margin-left: 10px"
- type="checkbox"
- v-model="addSceneToken"
- />
- <input
- class="sm-input"
- type="text"
- :placeholder="Resource.sceneUrl"
- v-model="SceneURL"
- />
- <input
- class="sm-input"
- type="text"
- :placeholder="Resource.addToken"
- v-show="addSceneToken"
- v-model="SceneToken"
- />
- <div class="boxchild">
- <el-button type="primary" size="mini" @click="openScene">
- {{ Resource.confirm }}
- </el-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- let layerLen;
- export default {
- name: "addCustomService",
- data() {
- return {
- sharedState: store.state,
- LayerType: "S3M",
- addToken: false,
- LayerURL: null,
- LayerNmae: null,
- LayerToken: null,
- addSceneToken: false,
- SceneURL: null,
- SceneToken: null,
- };
- },
- computed: {
- customServiceShow: function () {
- return this.sharedState.addLayer[1];
- },
- },
- methods: {
- // 添加自定义场景
- openScene() {
- if (this.SceneURL == null || this.SceneURL == "") {
- this.$Message.error(Resource.urlNotNullMsg);
- return;
- }
- // 检查地址是否正确
- // if(){return;}
- //去引号
- if (this.SceneURL.charAt(0) == '"' || this.SceneURL.charAt(0) == "'") {
- let reg = /^['|"](.*)['|"]$/;
- this.SceneURL = this.SceneURL.replace(reg, "$1");
- }
- if (this.SceneToken) {
- Cesium.Credential.CREDENTIAL = new Cesium.Credential(this.SceneToken);
- }
- if (viewer) {
- let promiseArray = [];
- let s = viewer.scene.open(this.SceneURL);
- promiseArray.push(s);
- this.promiseWhen(promiseArray);
- }
- },
- // 打开自定义图层
- openLayer() {
- if (this.LayerURL == null || this.LayerURL == "") {
- this.$Message.error(Resource.urlNotNullMsg);
- return;
- }
- if (this.LayerURL.charAt(0) == '"' || this.LayerURL.charAt(0) == "'") {
- let reg = /^['|"](.*)['|"]$/;
- this.LayerURL = this.LayerURL.replace(reg, "$1");
- }
- if (this.LayerToken) {
- Cesium.Credential.CREDENTIAL = new Cesium.Credential(this.LayerToken);
- }
- switch (this.LayerType) {
- case "S3M":
- this.addS3M(this.LayerURL);
- break;
- case "IMAGERY":
- this.addImage(this.LayerURL);
- break;
- case "TERRAIN":
- this.addTerrain(this.LayerURL);
- break;
- default:
- store.setAnalysisAction([0, 0, 0, 0, 1]);
- }
- },
- addS3M(LayerURL) {
- let promiseArray = [];
- let options = {};
- if (this.LayerNmae) {
- options.name = this.LayerNmae;
- } else {
- this.$Message.warning(Resource.layerNameNotNullMsg);
- return;
- }
- layerLen = viewer.scene.layers.layerQueue.length;
- promiseArray.push(viewer.scene.addS3MTilesLayerByScp(LayerURL, options));
- this.promiseWhen(promiseArray, true);
- },
- addTerrain(LayerURL) {
- viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
- url: LayerURL,
- isSct: true, //地形服务源自SuperMap iServer发布时需设置isSct为true
- });
- setTimeout(() => {
- //更新图层
- store.setTerrainLayerManage(viewer.terrainProvider.tablename);
- }, 1500);
- },
- addImage(LayerURL) {
- var layer = viewer.imageryLayers.addImageryProvider(
- new Cesium.SuperMapImageryProvider({
- url: LayerURL,
- })
- );
- viewer.flyTo(layer);
- setTimeout(() => {
- //更新图层
- store.setImgLayerManage(viewer.imageryLayers._layers.length);
- }, 1500);
- },
- promiseWhen(promiseArray, isSCP) {
- Cesium.when.all(
- promiseArray,
- function (layers) {
- setTimeout(() => {
- //更新图层
- store.setS3MLayerManage(viewer.scene.layers.layerQueue.length);
- store.setImgLayerManage(viewer.imageryLayers._layers.length);
- store.setTerrainLayerManage(viewer.terrainProvider.tablename);
- }, 500);
- if (isSCP && layers[layerLen]) {
- viewer.flyTo(layers[layerLen]);
- }
- },
- function (e) {
- if (widget._showRenderLoopErrors) {
- let title = Resource.scpUrlErrorMsg;
- widget.showErrorPanel(title, undefined, e);
- }
- }
- );
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- @import "./CustomServicePan.scss";
- </style>
|