From e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期四, 09 五月 2024 11:06:43 +0800 Subject: [PATCH] 代码更新 --- src/views/Tools/AddOnlineMap.vue | 291 ++++++++++++++++++++------------------------------------- 1 files changed, 102 insertions(+), 189 deletions(-) diff --git a/src/views/Tools/AddOnlineMap.vue b/src/views/Tools/AddOnlineMap.vue index 092f8f1..0a9e932 100644 --- a/src/views/Tools/AddOnlineMap.vue +++ b/src/views/Tools/AddOnlineMap.vue @@ -1,92 +1,53 @@ <template> - <Popup - ref="pop" - :title="title" - @close="close(true)" - width="400px" - @yes="addData" - @cancel="close(false)" - > + <Popup ref="pop" + :title="title" + @close="close(true)" + width="400px" + @yes="addData" + @cancel="close(false)"> - <div - id="archTopBox" - class="archTopBox" - > + <div id="archTopBox" + class="archTopBox"> - <div - class="boxCard" - v-for="(item,index) in mapList" - > + <div class="boxCard" + v-for="(item, index) in mapList"> <el-card class="box-card"> - <div - slot="header" - class="clearfix" - > - <span style="font-size:14px">{{item.name}}</span> + <div slot="header" + class="clearfix"> + <span style="font-size:14px">{{ item.name }}</span> <div style="float: right; padding: 3px 0"> - <i - v-show="!item.isShow" - style="margin-left:10px" - class="el-icon-arrow-up" - :title="$t('archiveObj.fold')" - @click="setCardChange(item)" - ></i> - <i - v-show="item.isShow" - style="margin-left:10px" - class="el-icon-arrow-down" - :title="$t('archiveObj.develop')" - @click="setCardChange(item)" - ></i> + <i v-show="!item.isShow" + style="margin-left:10px" + class="el-icon-arrow-up" + :title="$t('archiveObj.fold')" + @click="setCardChange(item)"></i> + <i v-show="item.isShow" + style="margin-left:10px" + class="el-icon-arrow-down" + :title="$t('archiveObj.develop')" + @click="setCardChange(item)"></i> </div> </div> - <div - :id="item.id" - style="margin:5px 1px" - v-show="!item.isShow" - > + <div :id="item.id" + style="margin:5px 1px" + v-show="!item.isShow"> <div style="margin:10px;width:380px"> - <div - class="map" - v-for="(map, mapIndex) in item.list" - @click="addImageLayer(map, item)" - > - <img - style="width: 60px; height: 60px" - :src="map.image" - ></img> - <div> <el-link :underline="false"> + <div class="map" + v-for="(map, mapIndex) in item.list" + @click="addImageLayer(map, item)"> + <img style="width: 60px; height: 60px" + :src="map.image"></img> + <div> + <el-link :underline="false"> {{ map.name }} - </el-link></div> + </el-link> + </div> </div> </div> </div> </el-card> </div> - - <!-- <el-collapse :value="activeNames"> - <el-collapse-item - v-for="(mapCollection, index) in mapList" - :title="mapCollection.name" - :name="mapCollection.name" - :key="index" - > - <div - class="map" - v-for="(map, mapIndex) in mapCollection.list" - :key="mapIndex" - @click="addImageLayer(map, mapCollection)" - > - <el-image - style="width: 60px; height: 60px" - :src="require(`@assets/imageLayer/${map.image}`)" - fit="fill" - ></el-image> - <span>{{ map.name }}</span> - </div> - </el-collapse-item> - </el-collapse> --> </div> </el-form> </Popup> @@ -97,16 +58,16 @@ import TileLayer from "ol/layer/Tile" import XYZ from "ol/source/XYZ" // 褰卞儚鍥惧眰 - +import mapLayers from "./layer"; export default { name: "AddOnlineMap", components: { Popup, }, mixins: [], - data() { + data () { return { - title: "鍦ㄧ嚎鍦板浘", + title: "3D鍦ㄧ嚎鍦板浘", left: undefined, tokne: "", data: { @@ -120,177 +81,127 @@ zIndex: undefined, }, mapCollection: undefined, - mapList: [ - { - name: "澶╁湴鍥�", - sourceType: "tdmap", - tokne: "94a34772eb88317fcbf8428e10448561", - maximumLevel: 18, - id: 1, - isShow: true, - list: [ - { - name: "澶╁湴鍥惧湴鍥�", - image: require("../../assets/img/imageLayer/tdmap_map.jpg"), - urls: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=", - olUrls: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' - }, - { - name: "澶╁湴鍥惧奖鍍�", - image: require("../../assets/img/imageLayer/tdmap_image.jpg"), - urls: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=", - olUrls: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' - }, - { - name: "澶╁湴鍥惧湴褰�", - image: require("../../assets/img/imageLayer/tdmap_label.jpg"), - urls: "http://t0.tianditu.com/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=", - olUrls: 'http://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=' - }, - ], - }, - { - name: "楂樺痉鍦板浘", - sourceType: "gdmap", - maximumLevel: 18, - id: 2, - isShow: true, - list: [ - { - name: "楂樺痉鍦板浘", - image: require("../../assets/img/imageLayer/gdmap_map.jpg"), - urls: "https://webst02.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}", - }, - { - name: "楂樺痉褰卞儚", - image: require("../../assets/img/imageLayer/gdmap_image.jpg"), - urls: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", - }, - - ], - }, - - ], + mapList: mapLayers, }; }, computed: { - activeNames() { + activeNames () { return this.mapList.map((item) => { return item.name; }); }, }, methods: { - setCardChange(res) { - res.isShow = !res.isShow + setCardChange (res) { + res.isShow=!res.isShow }, // 鍏抽棴寮圭獥 - close(isCloseBtn, removeLayer = true) { + close (isCloseBtn,removeLayer=true) { // removeLayer && this.removeImageLayer(); // 閲嶇疆data鍊� - Object.assign(this.$data, this.$options.data()); - !isCloseBtn && this.$refs.pop.close(); + Object.assign(this.$data,this.$options.data()); + !isCloseBtn&&this.$refs.pop.close(); }, // 鎵撳紑寮圭獥 - open() { + open () { this.close(true); this.$refs.pop.open(); + }, - changeToken(token) { - this.mapCollection.tokne = token; + changeToken (token) { + this.mapCollection.tokne=token; }, - removeImageLayer() { + removeImageLayer () { // window.BaseMapLayer && window.BaseMapLayer.deleteObject(); // window.BaseMapLayer = undefined; window.Viewer.imageryLayers.remove( window.BaseMapLayer ); - window.map.removeLayer(window.olBaseMapLayer); - }, - addImageLayer(map, mapCollection) { - if ( - this.data.name === map.name && - (this.data.urls === map.urls || this.data.urls === mapCollection.urls) + }, + addImageLayer (map,mapCollection) { + + if( + this.data.name===map.name&& + (this.data.urls===map.urls||this.data.urls===mapCollection.urls) ) { return; } this.removeImageLayer(); - this.mapCollection = mapCollection; + this.mapCollection=mapCollection; + if(mapCollection.sourceType==="cesium") { - if (mapCollection.sourceType === "tdmap") { - var tokne = mapCollection.tokne; + return; + } else if(mapCollection.sourceType==="tdmap") { + + var tokne=mapCollection.tokne; //娣诲姞澶╁湴鍥惧奖鍍� - window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ - url: map.urls + tokne, + window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ + url: map.urls+tokne, layer: "tdtImgLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible", })) - window.olBaseMapLayer = new TileLayer({ - title: "楂樺痉鍦板浘", - source: new XYZ({ - url: map.olUrls + tokne - }), - zIndex: -1 - }); - window.map.addLayer(window.olBaseMapLayer); - } else if (mapCollection.sourceType === "gdmap") { - window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider( + } else if(mapCollection.sourceType==="gdmap") { + + window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: map.urls, - maximumLevel: this.data.maximumLevel, + maximumLevel: 22, }) ); - window.olBaseMapLayer = new TileLayer({ - title: "楂樺痉鍦板浘", - source: new XYZ({ - url: map.urls, - wrapX: false - }), - zIndex: -1 - }); - window.map.addLayer(window.olBaseMapLayer); + + } else if(mapCollection.sourceType==="localmap") { + var ulr=map.urls; + console.log(iisHost) + ulr=ulr.replace("{host}",iisHost) + + window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider( + new Cesium.UrlTemplateImageryProvider({ + url: ulr, + maximumLevel: 22, + }) + ); + + } Viewer.imageryLayers.lowerToBottom(window.BaseMapLayer);//灏嗗浘灞傜Щ鍒版渶搴曞眰 + Viewer.imageryLayers.raise(window.BaseMapLayer);//灏嗗浘灞傜Щ鍒版渶搴曞眰 - Viewer.imageryLayers.raise(window.BaseMapLayer);//灏嗗浘灞備笂绉讳竴灞� - - - - - + if(is_production) { + Viewer.imageryLayers.raise(window.BaseMapLayer);//灏嗗浘灞備笂绉讳竴灞� + } }, // 娣诲姞鏁版嵁 - addData() { - if (this.data.urls && this.data.sourceType) { - let data = { + addData () { + if(this.data.urls&&this.data.sourceType) { + let data={ id: window.sgworld.Core.getuid(), ...this.data, - Level: [0, 26], + Level: [0,26], }; - if (data.sourceType === "tdmap") { - data.urls += "&tk=" + this.tokne; - } else if (data.sourceType === "bdmap") { - data.style = this.mapCollection.style; + if(data.sourceType==="tdmap") { + data.urls+="&tk="+this.tokne; + } else if(data.sourceType==="bdmap") { + data.style=this.mapCollection.style; } - if (this.mapCollection.GCJ02) { - data.GCJ02 = true; + if(this.mapCollection.GCJ02) { + data.GCJ02=true; } - data.item = window.BaseMapLayer; - window.BaseMapLayer = undefined; + data.item=window.BaseMapLayer; + window.BaseMapLayer=undefined; - this.$emit("success", data); - this.close(false, false); + this.$emit("success",data); + this.close(false,false); } else { this.$message("璇烽�夋嫨鍦板浘"); } @@ -303,6 +214,7 @@ /deep/.el-card__body { padding: 0px !important; } + .map { display: inline-block; cursor: pointer; @@ -314,6 +226,7 @@ border-radius: 4px; } } + .boxCard { margin-bottom: 5px; } -- Gitblit v1.9.3