<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: "addOnlineOlMap",
|
components: {
|
Popup,
|
},
|
mixins: [],
|
data() {
|
return {
|
title: "2D在线地图",
|
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.map.removeLayer(window.olBaseMapLayer);
|
if (!is_production) {
|
if (window.vectorLayer) {
|
window.map.removeLayer(window.vectorLayer);
|
}
|
}
|
},
|
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") {
|
window.olBaseMapLayer = new TileLayer({
|
title: "高德地图",
|
source: new XYZ({
|
url: map.urls,
|
wrapX: false
|
}),
|
zIndex: -1
|
});
|
window.map.addLayer(window.olBaseMapLayer);
|
return;
|
} else if (mapCollection.sourceType === "tdmap") {
|
|
var tokne = mapCollection.tokne;
|
//添加天地图影像
|
|
|
|
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.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;
|
ulr = ulr.replace("{host}", iisHost)
|
|
|
|
window.olBaseMapLayer = new TileLayer({
|
title: "高德地图",
|
source: new XYZ({
|
url: ulr,
|
wrapX: false
|
}),
|
zIndex: -1
|
});
|
window.map.addLayer(window.olBaseMapLayer);
|
}
|
|
},
|
// 添加数据
|
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>
|
