<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="label in labels" :key="label.attr.id">
|
<el-col :span="14">
|
{{ label.attr.name || ' ' }}
|
</el-col>
|
<el-col :span="10" style="textalign: right">
|
<el-button
|
icon="el-icon-s-promotion"
|
size="mini"
|
circle
|
@click="() => focusHandle(label.attr.id)"
|
/>
|
|
<!-- <el-button-->
|
<!-- icon="el-icon-edit"-->
|
<!-- size="mini"-->
|
<!-- circle-->
|
<!-- @click="() => editHandle(label)"-->
|
<!-- />-->
|
<el-button
|
icon="el-icon-delete"
|
type="danger"
|
size="mini"
|
circle
|
@click="() => removeHandle(label)"
|
/>
|
</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="label.name" placeholder="请输入内容" />
|
<p>请选择风险等级：</p>
|
<el-select v-model="color" placeholder="请选择" >
|
<el-option
|
v-for="item in colorList"
|
:key="item.id"
|
:value="item.name"
|
:label="item.text"
|
></el-option>
|
</el-select>
|
<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 { addMap , deleteColorMap} from '@/api/fourColorMap'
|
import { global } from '../../global';
|
|
// 默认样式
|
const LABEL_STYLE = {
|
opacity: 1,
|
color: '#FFFFFF',
|
font_family: '黑体',
|
font_size: 18,
|
font_style: 'normal',
|
font_weight: 'normal',
|
border: false,
|
border_color: '#ffffff',
|
border_width: 2,
|
background: true,
|
background_color: 'rgba(0, 0, 0, .8)',
|
};
|
|
export default {
|
props:['type','colorMapList'],
|
components: {},
|
data() {
|
return {
|
label: {
|
id: null,
|
name: '',
|
},
|
color:'',
|
colorList:[{id:1,name:'blue',text:'低风险'},{id:2,name:'yellow',text:'一般风险'},{id:3,name:'orange',text:'较大风险'},{id:4,name:'red',text:'重大风险'},],
|
showCreatePanel: false,
|
showPlot: true,
|
form:{
|
id:'',
|
etype:1,
|
"type": "Feature",
|
"properties": {
|
"type": "polygon",
|
"style": { "text": "D号楼", "clampToGround": true ,color:'',},
|
"attr": {
|
"name": "",
|
"id": ""
|
}
|
},
|
"geometry": {
|
"type": "Polygon",
|
"coordinates": [
|
[
|
[120.728524, 31.258178, 0],
|
[120.727911, 31.257992, 0],
|
[120.728024, 31.25772, 0],
|
[120.727986, 31.2577, 0],
|
[120.728039, 31.257535, 0],
|
[120.728759, 31.257714, 0],
|
[120.728524, 31.258178, 0],
|
[120.728524, 31.258178, 0],
|
[120.728524, 31.258178, 0]
|
]
|
]
|
}
|
},
|
};
|
},
|
computed: {
|
timestamp() {
|
return this.$store.state.map.timestamp;
|
},
|
labels() {
|
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 === 'polygon');
|
},
|
},
|
methods: {
|
editHandle(label) {
|
if (!global.map) return;
|
this.label = {
|
id: label.attr.id,
|
name: label.attr.name,
|
};
|
this.showCreatePanel = true;
|
},
|
removeHandle(label) {
|
if (!global.map) return;
|
for(let i in this.colorMapList){
|
if(JSON.parse(this.colorMapList[i].properties).attr.id === label.attr.id){
|
deleteColorMap({id:this.colorMapList[i].id}).then(res =>{
|
if(res.data.code === '200'){
|
this.$message({
|
title:'成功',
|
message:'删除成功',
|
duration:2000,
|
type:'success'
|
})
|
global.map.deletePlot(label.attr.id);
|
this.$store.dispatch('map/updateTimestamp');
|
}
|
})
|
}
|
}
|
|
|
},
|
closeCreateHandle() {
|
this.showCreatePanel = false;
|
},
|
showCreateHandle() {
|
this.showCreatePanel = true;
|
},
|
_initLabel() {
|
this.label = {
|
id: null,
|
name: '',
|
};
|
},
|
async createHandle() {
|
// debugger
|
// this.form.geometry = JSON.stringify(this.form.geometry)
|
// this.form.properties = JSON.stringify(this.form.properties)
|
// let res = await addMap(this.form)
|
if (!global.map) return;
|
let map = global.map;
|
const { id, name } = this.label;
|
const entity = id && map.getPlotById(id);
|
this.closeCreateHandle();
|
if (entity) {
|
map.updatePlotStyle(id, { text: name });
|
map.updatePlotAttribute(id, { name });
|
this._initLabel();
|
this.$store.dispatch('map/updateTimestamp');
|
} else {
|
map.startDraw(
|
{
|
type: 'polygon',
|
style: { text: name ,color:this.color, clampToGround: true},
|
attr: {
|
name,
|
},
|
},
|
(entity) => {
|
console.log(wutu3d.draw.attr.getCoordinates(entity));
|
this._initLabel();
|
this.$store.dispatch('map/updateTimestamp');
|
this.form = {
|
id:'',
|
etype:this.type,
|
"type": "Feature",
|
"properties":
|
JSON.stringify(entity.attribute),
|
"geometry": JSON.stringify({
|
"type": "Polygon",
|
"coordinates": [
|
|
wutu3d.draw.attr.getCoordinates(entity)
|
|
]
|
})
|
}
|
// this.form.properties.style.color = this.color
|
// this.form.properties = JSON.stringify(this.form.properties)
|
addMap(this.form).then(res =>{
|
if(res.data.code === '200'){
|
// this.$emit('testLoadedData')
|
this.$message({
|
type:'success',
|
duration:2000,
|
title:'成功',
|
message:'四色图新增成功',
|
})
|
}
|
})
|
}
|
);
|
}
|
},
|
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>
|
