<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>
|
|
<!-- <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>
|
</template>
|
|
<script>
|
import Popup from "./Popup";
|
import TileLayer from "ol/layer/Tile"
|
import XYZ from "ol/source/XYZ"
|
// 影像图层
|
|
export default {
|
name: "AddOnlineMap",
|
components: {
|
Popup,
|
},
|
mixins: [],
|
data() {
|
return {
|
title: "在线地图",
|
left: undefined,
|
tokne: "",
|
data: {
|
id: "",
|
sourceType: "",
|
name: "",
|
urls: "",
|
layer: "",
|
alpha: 1,
|
maximumLevel: 26,
|
zIndex: undefined,
|
},
|
mapCollection: undefined,
|
mapList: [{
|
name: "Cesium",
|
sourceType: "cesium",
|
tokne: "94a34772eb88317fcbf8428e10448561",
|
maximumLevel: 18,
|
id: 1,
|
isShow: true,
|
list: [{
|
name: "Cesium影像",
|
image: require("../../assets/img/imageLayer/tdmap_image.jpg"),
|
urls: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
},],
|
},
|
|
{
|
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}",
|
},
|
|
],
|
}, {
|
name: '本地服务',
|
sourceType: 'localmap',
|
maximumLevel: 22,
|
id: 3,
|
isShow: true,
|
list: [
|
{
|
name: "地图",
|
image: require("../../assets/img/imageLayer/gdmap_map.jpg"),
|
urls: "http://{host}/LFData/2d/tiles/vec/{z}/{x}/{y}.png",
|
},
|
{
|
name: "影像",
|
image: require("../../assets/img/imageLayer/gdmap_image.jpg"),
|
urls: "http://{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png",
|
},
|
{
|
name: "地形",
|
image: require("../../assets/img/imageLayer/dixing.png"),
|
urls: "http://{host}/LFData/2d/tiles/ter/{z}/{x}/{y}.png",
|
},
|
{
|
name: "1:20万区域地质图",
|
image: require("../../assets/img/imageLayer/25dizhi.png"),
|
urls: "http://{host}/LFData/2d/tiles/20w_qydz/{z}/{x}/{y}.png",
|
},
|
],
|
}
|
|
],
|
};
|
},
|
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
|
);
|
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.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(
|
new Cesium.UrlTemplateImageryProvider({
|
url: map.urls,
|
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;
|
ulr = ulr.replace("{host}", iisHost)
|
|
window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
|
new Cesium.UrlTemplateImageryProvider({
|
url: ulr,
|
maximumLevel: 22,
|
})
|
);
|
|
window.olBaseMapLayer = new TileLayer({
|
title: "高德地图",
|
source: new XYZ({
|
url: ulr,
|
wrapX: false
|
}),
|
zIndex: -1
|
});
|
window.map.addLayer(window.olBaseMapLayer);
|
}
|
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>
|
