<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:left="left"
|
width="390px"
|
showBtn="true"
|
:btnArr="btnArr"
|
@yes="yes"
|
@cancel="close"
|
>
|
<el-form ref="form" :model="data" :rules="rules" label-width="100px">
|
<div v-if="isLogin">
|
<el-form-item label="地址:" prop="url">
|
<el-input v-model="data.url"></el-input>
|
</el-form-item>
|
</div>
|
<div v-else>
|
<el-form-item label="工作区:">
|
<el-select v-model="workspace" @change="getDatastores">
|
<el-option
|
v-for="item in workspaces"
|
:key="item.name"
|
:label="item.name"
|
:value="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数据存储:">
|
<el-select v-model="datastore" @change="getLayers">
|
<el-option
|
v-for="item in datastores"
|
:key="item.name"
|
:label="item.name"
|
:value="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="服务类型:">
|
<el-select v-model="type">
|
<el-option label="WMS" value="wms"></el-option>
|
<el-option label="WMTS" value="wmts"></el-option>
|
<el-option label="WFS" value="wfs"></el-option>
|
<el-option label="Geojson" value="geojson"></el-option>
|
<el-option label="矢量切片" value="vector"></el-option>
|
</el-select>
|
</el-form-item>
|
<div
|
class="mapList scrollbar"
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.5)"
|
>
|
<el-tree ref="tree" :data="layers"></el-tree>
|
</div>
|
</div>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import serviceTools from "@mixin/serviceTools";
|
import axios from "axios";
|
|
export default {
|
name: "Gisserver",
|
components: {
|
Popup,
|
},
|
mixins: [serviceTools],
|
data() {
|
return {
|
title: "Geoserver",
|
left: undefined,
|
key: "",
|
workspace: "",
|
workspaces: [],
|
datastore: "",
|
datastores: [],
|
layer: "",
|
layers: [],
|
isLogin: true,
|
loading: false,
|
type: "wms",
|
data: {
|
url: "http://183.162.245.49:8099/geoserver",
|
username: "",
|
password: "",
|
},
|
// 表单验证规则
|
rules: {
|
url: [{ required: true, message: "请输入服务地址", trigger: "blur" }],
|
},
|
btnArr: [],
|
};
|
},
|
computed: {},
|
mounted() {
|
if (sessionStorage.getItem("geoserverURL")) {
|
this.data.url = sessionStorage.getItem("geoserverURL");
|
}
|
if (
|
sessionStorage.getItem("geoserverURL") &&
|
sessionStorage.getItem("geoserverLogin")
|
) {
|
this.isLogin = sessionStorage.getItem("geoserverLogin") === "1";
|
this.getWorkspaces();
|
this.setBtnArr();
|
}
|
},
|
methods: {
|
setBtnArr() {
|
if (this.isLogin) {
|
this.btnArr = [];
|
} else {
|
this.btnArr = [
|
{
|
name: "退出",
|
fun: () => {
|
this.isLogin = true;
|
sessionStorage.removeItem("geoserverLogin");
|
this.btnArr = [];
|
},
|
},
|
{
|
name: "取消",
|
fun: () => {
|
this.close();
|
},
|
},
|
{
|
name: "确定",
|
type: "primary",
|
fun: () => {
|
this.yes();
|
},
|
},
|
];
|
}
|
},
|
// 关闭弹窗
|
close() {
|
this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open() {
|
this.$refs.pop.open();
|
},
|
// 添加数据
|
yes() {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
if (this.isLogin) {
|
this.login();
|
} else {
|
this.addLayer();
|
}
|
}
|
});
|
},
|
addLayer() {
|
let selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
if (selectNode) {
|
this.layer = selectNode.name;
|
let data = {
|
id: SmartEarth.uuid(),
|
name: this.layer,
|
sourceType: this.type,
|
urls: this.data.url,
|
layer: `${this.workspace}:${this.layer}`,
|
};
|
switch (this.type) {
|
case "wms":
|
data.urls += `/wms`;
|
break;
|
case "wmts":
|
data.tileType = "Geo";
|
data.urls += `/gwc/service/wmts?layer=${this.workspace}:${this.layer}&TileMatrixSet={TileMatrixSet}&TileMatrix={TileMatrixSet}:{TileMatrix}&&TileRow={TileRow}&TileCol={TileCol}&format=image/png&request=GetTile`;
|
break;
|
case "wfs":
|
case "vector":
|
data.openProp = true;
|
break;
|
case "geojson":
|
data.urls += `/${this.workspace}/ows?service=WFS&request=GetFeature&typeName=${data.layer}&outputFormat=application/json`;
|
data.openProp = true;
|
break;
|
}
|
this.getLayerData().then((ref) => {
|
let featureType = ref.data.featureType;
|
if (this.type === "wmts" || this.type === "vector") {
|
data.srs = featureType.srs;
|
}
|
let latLonBoundingBox = featureType.latLonBoundingBox;
|
data.flyTo = [
|
latLonBoundingBox.minx,
|
latLonBoundingBox.miny,
|
latLonBoundingBox.maxx,
|
latLonBoundingBox.maxy,
|
];
|
this.$emit("success", data);
|
this.close();
|
});
|
} else {
|
this.$message("请选择需要加载的图层");
|
}
|
},
|
login() {
|
sessionStorage.setItem("geoserverURL", this.data.url);
|
this.getWorkspaces();
|
},
|
axiosGet(url) {
|
return axios.get(url, {
|
withCredentials: true,
|
});
|
},
|
getLayerData() {
|
return this.axiosGet(
|
this.data.url +
|
`/rest/workspaces/${this.workspace}/datastores/${this.datastore}/featuretypes/${this.layer}.json`
|
);
|
},
|
getWorkspaces() {
|
this.workspace = "";
|
this.datastore = "";
|
this.layers = [];
|
this.axiosGet(this.data.url + "/rest/workspaces.json")
|
.then((data) => {
|
let workspace =
|
data.data && data.data.workspaces && data.data.workspaces.workspace;
|
this.workspaces = workspace;
|
sessionStorage.setItem("geoserverLogin", 1);
|
this.isLogin = false;
|
this.setBtnArr();
|
})
|
.catch(() => {
|
console.log("获取工作区失败");
|
});
|
},
|
getDatastores(workspace) {
|
this.datastore = "";
|
this.layers = [];
|
this.axiosGet(
|
this.data.url + `/rest/workspaces/${workspace}/datastores.json`
|
)
|
.then((data) => {
|
let dataStore =
|
data.data && data.data.dataStores && data.data.dataStores.dataStore;
|
this.datastores = dataStore;
|
})
|
.catch(() => {
|
console.log("获取数据存储失败");
|
});
|
},
|
getLayers(datastore) {
|
this.loading = true;
|
this.axiosGet(
|
this.data.url +
|
`/rest/workspaces/${this.workspace}/datastores/${datastore}/featuretypes.json`
|
)
|
.then((data) => {
|
let featureType =
|
data.data &&
|
data.data.featureTypes &&
|
data.data.featureTypes.featureType;
|
this.layers = [];
|
featureType.forEach((item) => {
|
this.layers.push({
|
label: item.name,
|
...item,
|
});
|
});
|
this.loading = false;
|
})
|
.catch(() => {
|
console.log("获取图层失败");
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.el-form {
|
margin-top: 20px;
|
margin-right: 10px;
|
width: 380px;
|
|
/deep/ .el-form-item__label {
|
color: #fff;
|
font-size: 18px;
|
}
|
|
/deep/ .el-select {
|
width: 100%;
|
}
|
|
.mapList {
|
border-top: 1px solid rgba(32, 160, 255, 0.3);
|
max-height: 200px;
|
padding-top: 5px;
|
}
|
|
.el-tree {
|
background: transparent;
|
color: #fff;
|
margin: 0 10px;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
}
|
</style>
|