<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="!isEdit"
|
:left="left"
|
@close="close(true)"
|
width="390px"
|
showBtn="true"
|
@yes="addData"
|
@cancel="close(false)"
|
>
|
<el-form ref="form" :model="data" :rules="rules" label-width="105px">
|
<el-form-item label="名称:">
|
<el-input v-model="data.name"></el-input>
|
</el-form-item>
|
<el-form-item label="地址:" prop="urls">
|
<el-input
|
v-model="data.urls"
|
:title="data.urls"
|
:disabled="isEdit"
|
></el-input>
|
</el-form-item>
|
<el-form-item v-if="showLayer" label="图层名:" prop="layer">
|
<el-input v-model="data.layer" :disabled="isEdit"></el-input>
|
</el-form-item>
|
<div v-if="type === 'local-map'">
|
<el-form-item label="类型:">
|
<el-select v-model="data.tms" :disabled="isEdit">
|
<el-option label="自定义" :value="false"></el-option>
|
<el-option label="TMS" :value="true"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="区块:" v-if="!data.tms">
|
<el-select v-model="data.tile" :disabled="isEdit">
|
<el-option label="{z}/{x}/{y}" value="{z}/{x}/{y}"></el-option>
|
<el-option
|
label="{z}/{x}/{reverseY}"
|
value="{z}/{x}/{reverseY}"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="nolabel-form-item">
|
<el-form-item class="inline-form-item" label="切片方式:">
|
<el-select
|
v-model="data.tileType"
|
:disabled="isEdit"
|
style="width: 95px"
|
>
|
<el-option label="墨卡托" value="Mercator"></el-option>
|
<el-option label="经纬度" value="Geo"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
class="inline-form-item"
|
label="格式:"
|
style="margin-left: -21px"
|
>
|
<el-select
|
v-model="data.img"
|
:disabled="isEdit"
|
style="width: 75px"
|
>
|
<el-option label="png" value="png"></el-option>
|
<el-option label="jpg" value="jpg"></el-option>
|
<el-option label="jpeg" value="jpeg"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form-item>
|
</div>
|
<el-form-item label="优先级:">
|
<el-input-number
|
@change="edit('zIndex')"
|
v-model="data.zIndex"
|
:min="0"
|
:max="zIndexMax"
|
placeholder="可选"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="图层定位:">
|
<el-input v-model="flyTo" placeholder="可选" :title="flyToPosition">
|
<i
|
slot="suffix"
|
class="el-input__icon el-icon-map-location"
|
title="获取当前位置"
|
@click="getPosition"
|
></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="显示层级:">
|
<el-slider v-model="data.level" range :max="26" @change="edit('level')">
|
</el-slider>
|
</el-form-item>
|
<el-form-item label="透明度:">
|
<el-slider
|
v-model="data.alpha"
|
:max="1"
|
:step="0.01"
|
@change="edit('alpha')"
|
>
|
</el-slider>
|
</el-form-item>
|
</el-form>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import popupTools from "./mixin/popupTools";
|
import imageEdit from "./mixin/imageEdit";
|
// 编辑的数据
|
let imagerLayer;
|
export default {
|
name: "AddImage",
|
components: {
|
Popup,
|
},
|
mixins: [popupTools, imageEdit],
|
data() {
|
return {
|
title: "添加数据",
|
left: undefined,
|
type: "",
|
isEdit: false,
|
defaultEditData: undefined,
|
data: {
|
name: "新增数据",
|
urls: "",
|
layer: "",
|
tile: "{z}/{x}/{y}",
|
tileType: "Mercator",
|
img: "png",
|
tms: false,
|
level: [0, 26],
|
alpha: 1,
|
zIndex: undefined,
|
},
|
zIndexMax: 0,
|
// 表单验证规则
|
rules: {
|
layer: [{ required: true, message: "请输入图层名", trigger: "blur" }],
|
urls: [{ required: true, message: "请输入服务地址", trigger: "blur" }],
|
},
|
};
|
},
|
computed: {
|
// 是否显示图层名
|
showLayer: function () {
|
return this.type === "wms" && this.data.urls.indexOf("gisserver") < 0;
|
},
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, isSave) {
|
if (!isSave && this.defaultEditData && imagerLayer) {
|
this.restore(imagerLayer);
|
this.defaultEditData = undefined;
|
}
|
imagerLayer = undefined;
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open(type, editData, defaultData) {
|
this.close(true);
|
this.type = type;
|
this.isEdit = !!editData;
|
// 最大索引
|
this.zIndexMax = window.Viewer.imageryLayers.length - 1;
|
// 是否编辑
|
if (this.isEdit) {
|
this.title = "编辑数据";
|
this.left = "calc(100% - 420px)";
|
|
// 获取图层
|
imagerLayer = window.sgworld.ProjectTree.getObject(editData.id);
|
imagerLayer = imagerLayer.item;
|
|
// 合并参数
|
sgworld.Core.extend(this.data, editData, true, true);
|
this.data.id = editData.id;
|
// 定位
|
editData.flyTo && (this.flyTo = editData.flyTo.join(","));
|
// 层级
|
if (editData.Level) {
|
if (editData.Level.split) {
|
this.data.level = editData.Level.split(",");
|
} else if (!Number.isNaN(parseInt(editData.Level))) {
|
this.data.level[0] = parseInt(editData.Level);
|
}
|
}
|
this.data.alpha = editData.alpha = imagerLayer.alpha;
|
this.data.zIndex = editData.zIndex = this.getImageIndex(imagerLayer);
|
this.defaultEditData = editData;
|
} else {
|
this.title = "添加数据";
|
this.data.name = type + "地图";
|
if (defaultData) {
|
// 合并参数
|
sgworld.Core.extend(this.data, defaultData, true, true);
|
// 定位
|
defaultData.flyTo && (this.flyTo = defaultData.flyTo.join(","));
|
}
|
}
|
this.$refs.pop.open();
|
},
|
// 添加数据
|
addData() {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
let data = {
|
id: window.sgworld.Core.getuid(),
|
sourceType: this.type,
|
...this.data,
|
};
|
data.Level = this.data.level.join(",");
|
if (this.flyTo) {
|
data.flyTo = this.flyTo.split(",");
|
}
|
// 删除多余值
|
delete data.level;
|
|
if (!this.showLayer) {
|
delete data.layer;
|
}
|
if (this.type !== "local-map") {
|
delete data.tile;
|
delete data.tileType;
|
delete data.img;
|
delete data.tms;
|
}
|
if (this.sgsMPT()) {
|
data.urls += "/Imagery";
|
}
|
this.$emit("success", data, this.isEdit);
|
|
this.close(false, true);
|
}
|
});
|
},
|
// 是否mpt影像
|
sgsMPT() {
|
return (
|
this.type === "wms" &&
|
(this.data.urls.indexOf("/SG") > -1 ||
|
this.data.urls.indexOf("/sg") - 1 ||
|
this.data.urls.indexOf("/SE") - 1)
|
);
|
},
|
// 编辑
|
edit(editType) {
|
this.isEdit && this.editImage(editType, imagerLayer);
|
},
|
},
|
};
|
</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%;
|
}
|
}
|
</style>
|
