<template>
|
<div class="container">
|
<div class="model-panel-list">
|
<el-row :gutter="10">
|
<el-col :span="6">
|
<el-button
|
icon="el-icon-plus"
|
size="small"
|
type="primary"
|
@click="showCreateHandle"
|
>
|
创建
|
</el-button>
|
</el-col>
|
<el-col :span="6">
|
<el-button
|
icon="el-icon-delete"
|
size="small"
|
type="danger"
|
@click="clearHandle"
|
>
|
清空
|
</el-button>
|
</el-col>
|
<el-col :span="6">
|
<el-button
|
icon="el-icon-view"
|
size="small"
|
:type="showPlot ? 'success' : 'info'"
|
@click="toggleVisible"
|
>
|
{{ showPlot ? "隐藏" : "显示" }}
|
</el-button>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" v-for="circle in circles" :key="circle.attr.id">
|
<el-col :span="14">
|
{{ circle.attr.name || " " }}
|
</el-col>
|
<el-col :span="10" style="textAlign:right">
|
<el-button
|
icon="el-icon-s-promotion"
|
size="mini"
|
circle
|
@click="() => focusHandle(circle.attr.id)"
|
/>
|
<el-button
|
icon="el-icon-edit"
|
size="mini"
|
circle
|
@click="() => editHandle(circle)"
|
/>
|
<el-button
|
icon="el-icon-delete"
|
type="danger"
|
size="mini"
|
circle
|
@click="() => removeHandle(circle.attr.id)"
|
/>
|
</el-col>
|
</el-row>
|
</div>
|
<el-dialog
|
:visible="showCreatePanel"
|
width="380px"
|
title="创建圆形"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
:before-close="closeCreateHandle"
|
>
|
<p>请输入内容：</p>
|
<el-input v-model="circle.name" placeholder="请输入内容" />
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="closeCreateHandle">取 消</el-button>
|
<el-button type="primary" @click="createHandle">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {global} from "../../global";
|
|
// 默认样式
|
const DEFAULT_STYLE = {
|
"semiMinorAxis": 100,
|
"semiMajorAxis": 100,
|
"height": 0,
|
"extrudedHeight": 0,
|
"opacity": 0.6,
|
"fill": true,
|
"color": "#3388ff",
|
"outline": true,
|
"outlineColor": "#ffffff",
|
"rotation": 0
|
}
|
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
circle: {
|
id: null,
|
name: "",
|
},
|
showCreatePanel: false,
|
showPlot: true,
|
};
|
},
|
computed: {
|
timestamp() {
|
return this.$store.state.map.timestamp;
|
},
|
circles() {
|
return this.entities.map(entity => entity.attribute)
|
},
|
entities() {
|
let entities = this.timestamp && global.map ? global.map.plotDrawTool.getEntitys() : [];
|
return entities.filter(entity => entity.attribute.type === "circle" && entity.attribute.attr && !entity.attribute.attr.wave);
|
}
|
},
|
methods: {
|
editHandle(circle) {
|
if (!global.map) return;
|
this.circle = {
|
id: circle.attr.id,
|
name: circle.attr.name,
|
};
|
this.showCreatePanel = true;
|
},
|
removeHandle(id) {
|
if (!global.map) return;
|
global.map.deletePlot(id);
|
this.$store.dispatch("map/updateTimestamp");
|
},
|
closeCreateHandle() {
|
this.showCreatePanel = false;
|
},
|
showCreateHandle() {
|
this.showCreatePanel = true;
|
},
|
_initCircle() {
|
this.circle = {
|
id: null,
|
name: "",
|
};
|
},
|
createHandle() {
|
if(!global.map) return;
|
let map = global.map;
|
const { id, name } = this.circle;
|
const entity = id && map.getPlotById(id);
|
this.closeCreateHandle();
|
if (entity) {
|
// map.updatePlotStyle(id, ...DEFAULT_STYLE);
|
map.updatePlotAttribute(id, { name });
|
this._initCircle();
|
this.$store.dispatch("map/updateTimestamp");
|
} else {
|
map.startDraw({
|
type: "circle",
|
style: {text: name, ...DEFAULT_STYLE},
|
attr: {
|
name,
|
}
|
}, () => {
|
this._initCircle();
|
this.$store.dispatch("map/updateTimestamp");
|
});
|
}
|
|
},
|
toggleVisible() {
|
this.showPlot = !this.showPlot;
|
if (global.map) {
|
this.entities.forEach((entity) => {
|
entity.show = this.showPlot;
|
});
|
}
|
this.$store.dispatch("map/updateTimestamp");
|
},
|
focusHandle(markerId) {
|
if (global.map) {
|
const entity = global.map.getPlotById(markerId);
|
if(entity) {
|
global.map.viewer.flyTo(entity, {duration: 1});
|
}
|
}
|
},
|
clearHandle() {
|
if (global.map) {
|
this.entities.forEach((entity) => {
|
global.map.plotDrawTool.deleteEntity(entity);
|
});
|
}
|
this.$store.dispatch("map/updateTimestamp");
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.images img{
|
width: 36px;
|
height: auto;
|
margin:0px 5px;
|
cursor: pointer;
|
}
|
|
.model-panel-list > div {
|
margin-bottom: 5px;
|
padding: 5px 0 5px 0;
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
}
|
|
.image-list {
|
margin: 20px 0;
|
}
|
|
.image-list ul , .image-list li{
|
margin:0;
|
padding:0;
|
list-style:none;
|
}
|
|
.image-list li {
|
display: inline-block;
|
margin: 0 5px 5px 5px;
|
cursor: pointer;
|
padding: 5px 8px;
|
border-radius: 3px;
|
}
|
|
.image-list li img {
|
width: 32px;
|
height: 32px;
|
}
|
|
.image-list li:hover,
|
.image-list li.active {
|
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
</style>
|
