<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
:shadow="!isEdit"
|
:left="left"
|
width="390px"
|
@close="close(true)"
|
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"
|
@change="changeURL"
|
:disabled="isEdit"
|
></el-input>
|
</el-form-item>
|
<el-form-item v-if="layers.length" label="图层名:" prop="layer">
|
<el-select
|
v-model="data.layer"
|
:disabled="isEdit"
|
placeholder="请选择图层"
|
>
|
<el-option
|
v-for="layer in layers"
|
:key="layer"
|
:label="layer"
|
:value="layer"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-else label="图层名:" prop="layer">
|
<el-input
|
placeholder="请输入图层名"
|
v-model="data.layer"
|
:disabled="isEdit"
|
>
|
<template slot="append">
|
<el-button @click="getLayers">获取图层</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="数据类型:">
|
<el-select v-model="data.class" :disabled="isEdit">
|
<el-option label="点" value="point"></el-option>
|
<el-option label="线" value="polyline"></el-option>
|
<el-option label="面" value="polygon"></el-option>
|
</el-select>
|
</el-form-item>
|
<div v-if="point">
|
<el-form-item label="样式类型:" v-if="!polygonLabel">
|
<el-select v-model="pointType" @change="edit('pointType')">
|
<el-option label="文本" value="label"></el-option>
|
<el-option label="图标" value="billboard"></el-option>
|
<el-option label="文本+图标" value="labelBillboard"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="fields.length" label="文本内容:" prop="text">
|
<el-select
|
v-model="data.text"
|
placeholder="请选择字段名"
|
@change="edit('text')"
|
>
|
<el-option
|
v-for="field in fields"
|
:key="field"
|
:label="field"
|
:value="'[' + (arcgis_front || geoserver_front) + field + ']'"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-else label="文本内容:" prop="text">
|
<el-input
|
placeholder="请输入内容"
|
v-model="data.text"
|
@change="edit('text')"
|
>
|
<template slot="append">
|
<el-button @click="confirmAddress">获取字段</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item v-if="showLable" label="文本比例:">
|
<el-input-number
|
:min="0"
|
:step="0.1"
|
v-model="data.point.scale"
|
@change="edit('scale')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showLable" label="字体样式:">
|
<el-select
|
v-model="data.point.font"
|
placeholder="请选择字体"
|
@change="edit('font')"
|
style="width: 133px"
|
>
|
<el-option
|
v-for="font in fonts"
|
:key="font.value"
|
:label="font.name"
|
:value="font.value"
|
>
|
</el-option>
|
</el-select>
|
<el-checkbox-group
|
v-model="fontStyle"
|
style="display: inline-block; margin-left: 6px; position: absolute"
|
@change="edit('fontStyle')"
|
>
|
<el-checkbox-button label="bold"
|
><div class="bold minBtn"></div
|
></el-checkbox-button>
|
<el-checkbox-button label="italic"
|
><div class="italic minBtn"></div
|
></el-checkbox-button>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item v-if="showLable && !polygonLabel" label="边框宽度:">
|
<el-input-number
|
:min="0"
|
v-model="data.point.outlineWidth"
|
@change="edit('outlineWidth')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="polygonLabel" label="最小可视:">
|
<el-input-number
|
:min="0"
|
v-model="data.polygon.labelNear"
|
@change="edit('labelNear')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="polygonLabel" label="最大可视:">
|
<el-input-number
|
:min="0"
|
v-model="data.polygon.labelFar"
|
@change="edit('labelFar')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item
|
v-if="showLable && !polygonLabel"
|
class="nolabel-form-item"
|
>
|
<el-form-item class="inline-form-item" label="文本填充:">
|
<el-color-picker
|
v-model="data.color"
|
show-alpha
|
@change="edit('color')"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item class="inline-form-item" label="文本边框:">
|
<el-color-picker
|
v-model="data.outlineColor"
|
@change="edit('outlineColor')"
|
></el-color-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item
|
v-if="showLable && !polygonLabel"
|
class="nolabel-form-item"
|
>
|
<el-form-item class="inline-form-item" label="显示背景:">
|
<el-switch
|
v-model="showBackground"
|
@change="edit('showBackground')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item
|
class="inline-form-item"
|
v-if="showBackground"
|
label="文本背景:"
|
style="vertical-align: -webkit-baseline-middle"
|
>
|
<el-color-picker
|
v-model="data.point.bgColor"
|
@change="edit('bgColor')"
|
></el-color-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item label="忽略遮挡:">
|
<el-switch
|
v-model="IgnoreShelter"
|
@change="edit('IgnoreShelter')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item v-if="showLabelBillboard" label="水平偏移:">
|
<el-input-number
|
v-model="data.point.offsetX"
|
@change="edit('offsetX')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showLabelBillboard" label="垂直偏移:">
|
<el-input-number
|
v-model="data.point.offsetY"
|
@change="edit('offsetY')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="showBillboard" label="图标路径:" prop="image">
|
<el-input v-model="data.image" @change="edit('image')"></el-input>
|
</el-form-item>
|
<el-form-item v-if="showBillboard" label="图标比例:">
|
<el-input-number
|
:min="0"
|
:step="0.1"
|
v-model="data.point.imageScale"
|
@change="edit('imageScale')"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
<div v-if="polyline">
|
<el-form-item label="线宽:">
|
<el-input-number
|
:min="0"
|
v-model="data.polyline.width"
|
@change="edit('width')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="线高:" v-if="!data.clampToGround">
|
<el-input-number
|
v-model="data.polyline.height"
|
@change="edit('height')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="间隔线:">
|
<el-switch
|
v-model="data.polyline.dash"
|
@change="edit('dash')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item class="nolabel-form-item">
|
<el-form-item label="填充色:" class="inline-form-item">
|
<el-color-picker
|
v-model="data.color"
|
show-alpha
|
@change="edit('color')"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item
|
label="间隔色:"
|
class="inline-form-item"
|
v-if="data.polyline.dash"
|
>
|
<el-color-picker
|
v-model="data.polyline.gapColor"
|
show-alpha
|
@change="edit('gapColor')"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item label="边框色:" class="inline-form-item" v-else>
|
<el-color-picker
|
v-model="data.outlineColor"
|
show-alpha
|
@change="edit('outlineColor')"
|
></el-color-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item label="间隔长度:" v-if="data.polyline.dash">
|
<el-input-number
|
v-model="data.polyline.dashLength"
|
@change="edit('dashLength')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="边框宽度:" v-else>
|
<el-input-number
|
v-model="data.polyline.outlineWidth"
|
@change="edit('outlineWidth')"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
<div v-else-if="polygon">
|
<el-form-item label="显示注记:">
|
<el-switch
|
v-model="polygonLabel"
|
@change="showPolygonLabel"
|
></el-switch>
|
</el-form-item>
|
<el-form-item class="nolabel-form-item">
|
<el-form-item class="inline-form-item" label="填充色:">
|
<el-color-picker
|
v-model="data.color"
|
show-alpha
|
@change="edit('color')"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item
|
v-if="data.polygon.outline"
|
class="inline-form-item"
|
label="边框色:"
|
>
|
<el-color-picker
|
v-model="data.outlineColor"
|
@change="edit('outlineColor')"
|
></el-color-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item class="nolabel-form-item">
|
<el-form-item class="inline-form-item" label="是否水面:">
|
<el-switch
|
v-model="data.polygon.water"
|
@change="edit('water')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item class="inline-form-item" label="显示边框:">
|
<el-switch
|
v-model="data.polygon.outline"
|
@change="edit('outline')"
|
></el-switch>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item
|
label="边框宽度:"
|
v-if="data.polygon.outline && data.clampToGround"
|
>
|
<el-input-number
|
v-model="data.polygon.outlineWidth"
|
@change="edit('outlineWidth')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="!data.clampToGround" label="底部高度:">
|
<el-input-number
|
v-model="data.polygon.height"
|
@change="edit('height')"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item v-if="!data.clampToGround" label="拉伸高度:">
|
<el-input-number
|
v-model="data.polygon.extrudedHeight"
|
@change="edit('extrudedHeight')"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
<el-form-item label="是否贴地:">
|
<el-switch
|
v-model="data.clampToGround"
|
@change="edit('clampToGround')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item label="贴地类型:" v-if="data.clampToGround">
|
<el-select
|
v-model="data.classificationType"
|
@change="edit('classificationType')"
|
>
|
<el-option label="地形" :value="0"></el-option>
|
<el-option label="模型" :value="1"></el-option>
|
<el-option label="全部" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="最小层级:">
|
<el-input-number
|
:min="0"
|
:max="26"
|
v-model="data.minimumLevel"
|
@change="edit('minimumLevel')"
|
placeholder="可选"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="最大层级:">
|
<el-input-number
|
:min="0"
|
:max="26"
|
v-model="data.maximumLevel"
|
@change="edit('maximumLevel')"
|
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>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import popupTools from "./mixin/popupTools";
|
import wfsEdit from "./mixin/wfsEdit";
|
import serviceTools from "@mixin/serviceTools";
|
let wfsData, _editData, editTime;
|
export default {
|
name: "AddModel",
|
components: {
|
Popup,
|
},
|
mixins: [popupTools, wfsEdit, serviceTools],
|
data() {
|
return {
|
title: "添加数据",
|
type: "",
|
isEdit: false,
|
left: undefined,
|
defaultEditData: undefined,
|
pointType: "label",
|
IgnoreShelter: true,
|
showBackground: false,
|
polygonLabel: false,
|
fontStyle: [],
|
data: {
|
name: "wfs数据",
|
class: "point",
|
urls: "",
|
layer: "",
|
color: "rgba(255, 255, 255, 1)",
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
classificationType: 2,
|
text: "",
|
image: undefined,
|
point: {
|
font: "Arial",
|
scale: 2,
|
bgColor: undefined,
|
outlineWidth: 1,
|
offsetX: 0,
|
offsetY: 0,
|
imageScale: 1,
|
},
|
polyline: {
|
width: 2,
|
outlineWidth: 0,
|
height: 0,
|
dash: false,
|
dashLength: 20,
|
gapColor: "rgba(0,0,0,0)",
|
},
|
polygon: {
|
height: 0,
|
outlineWidth: 1,
|
extrudedHeight: 100,
|
outline: false,
|
water: false,
|
labelNear: 0,
|
labelFar: 999999999,
|
},
|
minimumLevel: 0,
|
maximumLevel: 22,
|
},
|
fields: [],
|
layers: [],
|
hasFields: false,
|
arcgis_front: "",
|
geoserver_front: "",
|
// 表单验证规则
|
rules: {
|
image: [{ required: true, message: "请输入图标路径", trigger: "blur" }],
|
text: [{ required: true, message: "请输入文本内容", trigger: "blur" }],
|
textSelect: [
|
{ required: true, message: "请选择字段名", trigger: "blur" },
|
],
|
layer: [{ required: true, message: "请输入图层名", trigger: "blur" }],
|
urls: [{ required: true, message: "请输入服务地址", trigger: "blur" }],
|
},
|
};
|
},
|
computed: {
|
// 点
|
point: function () {
|
return (
|
this.data.class === "point" ||
|
(this.data.class === "polygon" && this.polygonLabel)
|
);
|
},
|
// 线
|
polyline: function () {
|
return this.data.class === "polyline";
|
},
|
// 面
|
polygon: function () {
|
return this.data.class === "polygon";
|
},
|
// 文本样式
|
showLable: function () {
|
return this.pointType === "label" || this.pointType === "labelBillboard";
|
},
|
// 图标样式
|
showBillboard: function () {
|
return (
|
this.pointType === "billboard" || this.pointType === "labelBillboard"
|
);
|
},
|
// 文本加图标样式
|
showLabelBillboard: function () {
|
return this.pointType === "labelBillboard";
|
},
|
},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, isSave) {
|
if (!isSave && this.defaultEditData && wfsData) {
|
this.restore(wfsData);
|
this.defaultEditData = undefined;
|
_editData = undefined;
|
}
|
wfsData = undefined;
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
this.hasFields = false;
|
},
|
// 打开弹窗
|
open(type, editData, defaultData) {
|
this.close(true);
|
|
this.type = type;
|
this.isEdit = !!editData;
|
if (this.isEdit) {
|
this.title = "编辑数据";
|
this.left = "calc(100% - 420px)";
|
// 获取图层
|
wfsData = sgworld._treeTool.getData(editData.id);
|
sgworld.Core.extend(this.data, editData, true, true);
|
sgworld.Core.extend(this.data[editData.class], editData, true, true);
|
this.data.id = editData.id;
|
if (editData.class === "polygon" && editData.text) {
|
this.polygonLabel = true;
|
sgworld.Core.extend(this.data.point, editData, true, true);
|
}
|
|
if (editData.class === "point" || this.polygonLabel) {
|
this.IgnoreShelter = editData.disableDepthTestDistance === "Infinity";
|
editData.bold && this.fontStyle.push("bold");
|
editData.italic && this.fontStyle.push("italic");
|
|
if (editData.text && editData.image) {
|
this.pointType = "labelBillboard";
|
} else if (editData.image) {
|
this.pointType = "billboard";
|
}
|
}
|
editData.bgColor && (this.showBackground = true);
|
let color = Cesium.Color.fromCssColorString(
|
editData.color || "#ffffff"
|
).withAlpha(sgworld.Core.defaultValue(editData.alpha, 1));
|
this.data.color = color.toCssHexString();
|
|
// 定位
|
editData.flyTo && (this.flyTo = editData.flyTo.join(","));
|
this.defaultEditData = editData;
|
_editData = { ...editData };
|
} else {
|
this.title = "添加数据";
|
if (defaultData) {
|
// 合并参数
|
sgworld.Core.extend(this.data, defaultData, true, true);
|
}
|
}
|
|
this.$refs.pop.open();
|
},
|
// 添加数据
|
addData() {
|
this.$refs.form.validate((valid) => {
|
// 验证通过
|
if (valid) {
|
let color = window.Cesium.Color.fromCssColorString(this.data.color);
|
let alpha = color.alpha;
|
color.alpha = 1;
|
|
let data = {
|
id: window.sgworld.Core.getuid(),
|
sourceType: this.type,
|
alpha: alpha,
|
...this.data,
|
...this.data[this.data.class],
|
};
|
data.color = color.toCssHexString();
|
if (this.flyTo) {
|
data.flyTo = this.flyTo.split(",");
|
}
|
if (this.polygonLabel) {
|
let outlineWidth = data.outlineWidth;
|
Object.assign(data, this.data.point);
|
data.outlineWidth = outlineWidth;
|
}
|
|
data.urls = this.getWfsFullURL(data.urls, data.layer);
|
|
if (data.minimumLevel !== undefined) {
|
data.minimumLevel = parseInt(data.minimumLevel);
|
} else {
|
delete data.minimumLevel;
|
}
|
if (data.maximumLevel !== undefined) {
|
data.maximumLevel = parseInt(data.maximumLevel);
|
} else {
|
delete data.maximumLevel;
|
}
|
|
if (data.class === "point" || this.polygonLabel) {
|
this.IgnoreShelter && (data.disableDepthTestDistance = "Infinity");
|
this.fontStyle.includes("bold") && (data.bold = true);
|
this.fontStyle.includes("italic") && (data.italic = true);
|
} else {
|
delete data.text;
|
delete data.image;
|
}
|
delete data.point;
|
delete data.polyline;
|
delete data.polygon;
|
|
this.$emit("success", data, this.isEdit);
|
|
this.close(false, true);
|
}
|
});
|
},
|
// 编辑
|
edit(editType) {
|
clearTimeout(editTime);
|
if (this.isEdit) {
|
editTime = setTimeout(() => {
|
wfsData = this.editWfs(editType, wfsData, _editData);
|
sgworld._treeTool.treeData.set(_editData.id, wfsData);
|
}, 100);
|
}
|
},
|
showPolygonLabel() {
|
if (this.polygonLabel) {
|
this.pointType = "label";
|
}
|
this.edit("polygonLabel");
|
},
|
/**
|
* 获取属性字段
|
*/
|
confirmAddress() {
|
let url = this.data.urls;
|
let layername = this.data.layer;
|
let wfsFields = this.confirmWfsAddress(url, layername);
|
wfsFields
|
.then((fields) => {
|
this.fields = fields;
|
if (!fields || !fields.length) {
|
this.$message("暂无属性字段");
|
}
|
})
|
.catch((err) => {
|
this.$message.error("获取属性字段失败");
|
});
|
},
|
changeURL() {
|
if (!this.isEdit) {
|
this.layers = [];
|
this.fields = [];
|
}
|
},
|
getLayers() {
|
this.getWfsLayers(this.data.urls)
|
.then((data) => {
|
this.layers = data.layers;
|
if (!this.layers || !this.layers.length) {
|
this.$message("暂无图层信息");
|
}
|
})
|
.catch((err) => {
|
this.$message.error("获取图层失败");
|
});
|
},
|
},
|
};
|
</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%;
|
}
|
|
.minBtn {
|
width: 16px;
|
height: 16px;
|
background-image: url(~@/assets/default.png);
|
cursor: pointer;
|
}
|
.bold {
|
background-position: 0 -416px;
|
}
|
.italic {
|
background-position: 0 -432px;
|
}
|
}
|
</style>
|
