<template>
|
<Popup ref="pop"
|
:title="title"
|
@close="close(true)"
|
width="400px"
|
@yes="addData"
|
@cancel="close(false)">
|
|
<div id="archTopBox"
|
class="archTopBox">
|
|
<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 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>
|
</div>
|
</div>
|
<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">
|
{{ map.name }}
|
</el-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
</div>
|
</div>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "./Popup";
|
import TileLayer from "ol/layer/Tile"
|
import XYZ from "ol/source/XYZ"
|
// 影像图层
|
import mapLayers from "./layer";
|
export default {
|
name: "AddOnlineMap",
|
components: {
|
Popup,
|
},
|
mixins: [],
|
data () {
|
return {
|
title: "3D在线地图",
|
left: undefined,
|
tokne: "",
|
data: {
|
id: "",
|
sourceType: "",
|
name: "",
|
urls: "",
|
layer: "",
|
alpha: 1,
|
maximumLevel: 26,
|
zIndex: undefined,
|
},
|
mapCollection: undefined,
|
mapList: mapLayers,
|
};
|
},
|
computed: {
|
activeNames () {
|
return this.mapList.map((item) => {
|
return item.name;
|
});
|
},
|
},
|
methods: {
|
setCardChange (res) {
|
res.isShow=!res.isShow
|
},
|
// 关闭弹窗
|
close (isCloseBtn,removeLayer=true) {
|
// removeLayer && this.removeImageLayer();
|
|
// 重置data值
|
Object.assign(this.$data,this.$options.data());
|
!isCloseBtn&&this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open () {
|
this.close(true);
|
this.$refs.pop.open();
|
|
},
|
changeToken (token) {
|
this.mapCollection.tokne=token;
|
},
|
removeImageLayer () {
|
// window.BaseMapLayer && window.BaseMapLayer.deleteObject();
|
// window.BaseMapLayer = undefined;
|
window.Viewer.imageryLayers.remove(
|
window.BaseMapLayer
|
);
|
|
},
|
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;
|
if(mapCollection.sourceType==="cesium") {
|
|
return;
|
} else if(mapCollection.sourceType==="tdmap") {
|
|
var tokne=mapCollection.tokne;
|
//添加天地图影像
|
|
window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
url: map.urls+tokne,
|
layer: "tdtImgLayer",
|
style: "default",
|
format: "image/jpeg",
|
tileMatrixSetID: "GoogleMapsCompatible",
|
}))
|
|
|
} else if(mapCollection.sourceType==="gdmap") {
|
|
window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider(
|
new Cesium.UrlTemplateImageryProvider({
|
url: map.urls,
|
maximumLevel: 22,
|
})
|
);
|
|
|
} 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);//将图层移到最底层
|
|
if(is_production) {
|
Viewer.imageryLayers.raise(window.BaseMapLayer);//将图层上移一层
|
}
|
},
|
// 添加数据
|
addData () {
|
if(this.data.urls&&this.data.sourceType) {
|
let data={
|
id: window.sgworld.Core.getuid(),
|
...this.data,
|
Level: [0,26],
|
};
|
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;
|
}
|
|
data.item=window.BaseMapLayer;
|
window.BaseMapLayer=undefined;
|
|
this.$emit("success",data);
|
this.close(false,false);
|
} else {
|
this.$message("请选择地图");
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
/deep/.el-card__body {
|
padding: 0px !important;
|
}
|
|
.map {
|
display: inline-block;
|
cursor: pointer;
|
margin: 5px;
|
text-align: center;
|
|
.el-image {
|
border: 2px solid #fff;
|
border-radius: 4px;
|
}
|
}
|
|
.boxCard {
|
margin-bottom: 5px;
|
}
|
</style>
|
