<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"
|
:disabled="isEdit"
|
></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-option label="管线" value="polylineVolume"></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="showLable" label="文本内容:" prop="text">
|
<el-input v-model="data.text" @change="edit('text')"></el-input>
|
</el-form-item>
|
<el-form-item v-if="showLable" label="文本大小:">
|
<el-input v-model="data.point.size" @change="edit('size')"></el-input>
|
</el-form-item>
|
<el-form-item v-if="showLable" label="字体样式:">
|
<el-select
|
v-model="data.point.font_family"
|
placeholder="请选择字体"
|
@change="edit('font_family')"
|
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"
|
:max="6"
|
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="data.point.showBackground"
|
@change="edit('showBackground')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item class="inline-form-item" label="忽略遮挡:">
|
<el-switch
|
v-model="IgnoreShelter"
|
@change="edit('IgnoreShelter')"
|
></el-switch>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item v-else label="忽略遮挡:">
|
<el-switch
|
v-model="IgnoreShelter"
|
@change="edit('IgnoreShelter')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item
|
v-if="showLable && data.point.showBackground"
|
label="文本背景:"
|
>
|
<el-color-picker
|
v-model="data.point.backgroundColor"
|
show-alpha
|
@change="edit('backgroundColor')"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item v-if="showLabelBillboard" label="高度类型:">
|
<el-select
|
v-model="data.point.heightReference"
|
@change="edit('heightReference')"
|
>
|
<el-option label="绝对高度" :value="0"></el-option>
|
<el-option label="相对高度" :value="2"></el-option>
|
<el-option label="贴地" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="data.point.heightReference != 1" label="高度值:">
|
<el-input-number
|
placeholder="可选"
|
v-model="data.point.pointHeight"
|
@change="edit('pointHeight')"
|
></el-input-number>
|
</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>
|
</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="间隔线:">
|
<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>
|
<el-form-item v-if="!data.clampToGround" label="高度:">
|
<el-input-number
|
v-model="data.polyline.height"
|
@change="edit('height')"
|
></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>
|
<div v-else>
|
<el-form-item label="半径:">
|
<el-input-number
|
:min="0"
|
v-model="data.polylineVolume.radius"
|
@change="edit('radius')"
|
></el-input-number>
|
</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>
|
<el-form-item label="高度:">
|
<el-input-number
|
v-model="data.polylineVolume.height"
|
@change="edit('height')"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
<el-form-item v-if="clampToGround" label="是否贴地:">
|
<el-switch
|
v-model="data.clampToGround"
|
@change="edit('clampToGround')"
|
></el-switch>
|
</el-form-item>
|
<el-form-item
|
label="贴地类型:"
|
v-if="clampToGround && 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"
|
v-model="data.near"
|
@change="edit('near')"
|
placeholder="可选"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="最大距离:">
|
<el-input-number
|
:min="0"
|
v-model="data.far"
|
@change="edit('far')"
|
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 geojsonEdit from "./mixin/geojsonEdit";
|
let geojson;
|
export default {
|
name: "AddGeojson",
|
components: {
|
Popup,
|
},
|
mixins: [popupTools, geojsonEdit],
|
data() {
|
return {
|
title: "添加数据",
|
type: "",
|
isEdit: false,
|
pointType: "label",
|
IgnoreShelter: true,
|
polygonLabel: false,
|
fontStyle: [],
|
left: undefined,
|
data: {
|
name: "geosjon数据",
|
class: "point",
|
urls: "",
|
color: "rgba(255, 255, 255, 1)",
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
classificationType: 2,
|
text: "",
|
image: undefined,
|
point: {
|
font_family: "Microsoft YaHei",
|
size: "18px",
|
backgroundColor: undefined,
|
showBackground: false,
|
pointHeight: undefined,
|
heightReference: 0,
|
outlineWidth: 1,
|
italic: false,
|
bold: false,
|
offsetX: 0,
|
offsetY: 0,
|
imageScale: 1,
|
},
|
polyline: {
|
width: 2,
|
height: 0,
|
outlineWidth: 0,
|
dash: false,
|
dashLength: 20,
|
gapColor: "rgba(0,0,0,0)",
|
},
|
polylineVolume: {
|
radius: 1,
|
height: 0,
|
},
|
polygon: {
|
extrudedHeight: 100,
|
height: 0,
|
outlineWidth: 1,
|
outline: false,
|
water: false,
|
labelNear: 0,
|
labelFar: 999999999,
|
},
|
near: 0,
|
far: 99999999999,
|
},
|
// 表单验证规则
|
rules: {
|
image: [{ required: true, message: "请输入图标路径", trigger: "blur" }],
|
text: [{ 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";
|
},
|
// 管线
|
polylineVolume: function () {
|
return this.data.class === "polylineVolume";
|
},
|
clampToGround: function () {
|
return !this.point && !this.polylineVolume;
|
},
|
// 文本样式
|
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 && geojson) {
|
this.restore(geojson);
|
}
|
geojson = 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;
|
if (this.isEdit) {
|
this.title = "编辑数据";
|
this.left = "calc(100% - 420px)";
|
// 获取图层
|
geojson = sgworld.ProjectTree.getObject(editData.id);
|
// 保存当前配置参数
|
// geojson.saveDefaultVectorData && geojson.saveDefaultVectorData();
|
if (editData.class === "label" || editData.class === "image") {
|
editData.class = "point";
|
}
|
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.flyTo && (this.flyTo = editData.flyTo.join(","));
|
} 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 data = {
|
id: window.sgworld.Core.getuid(),
|
sourceType: this.type,
|
...this.data,
|
...this.data[this.data.class],
|
};
|
if (this.flyTo) {
|
data.flyTo = this.flyTo.split(",");
|
}
|
if (this.polygonLabel) {
|
let outlineWidth = data.outlineWidth;
|
Object.assign(data, this.data.point);
|
data.outlineWidth = outlineWidth;
|
}
|
|
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;
|
delete data.polylineVolume;
|
|
this.$emit("success", data, this.isEdit);
|
|
this.close(false, true);
|
}
|
});
|
},
|
// 编辑
|
edit(editType) {
|
this.isEdit && this.editVector(editType, geojson);
|
},
|
showPolygonLabel() {
|
if (this.polygonLabel) {
|
this.pointType = "label";
|
}
|
this.edit("polygonLabel");
|
},
|
},
|
};
|
</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>
|
