<template>
|
<div class="container">
|
<div class="images">
|
<img
|
v-for="image in images"
|
:key="image.url"
|
:src="image.url"
|
@click="clickCreateHandle(image.url)"
|
/>
|
</div>
|
<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="marker in markers" :key="marker.attr.id">
|
<el-col :span="2">
|
<img :src="marker.style.image" style="width:22px;height:22px;" />
|
</el-col>
|
<el-col :span="12">
|
{{ marker.attr.name || ' ' }}
|
</el-col>
|
<el-col :span="10" style="textAlign:right">
|
<el-button
|
icon="el-icon-s-promotion"
|
size="mini"
|
circle
|
@click="() => focusHandle(marker.attr.id)"
|
/>
|
<el-button
|
icon="el-icon-edit"
|
size="mini"
|
circle
|
@click="() => editHandle(marker)"
|
/>
|
<el-button
|
icon="el-icon-delete"
|
type="danger"
|
size="mini"
|
circle
|
@click="() => removeHandle(marker.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="marker.name" placeholder="请输入内容" />
|
<div class="image-list">
|
<ul>
|
<li
|
v-for="item in images"
|
:key="item.url"
|
@click="marker.image = item.url"
|
:class="marker.image === item.url ? 'active' : ''"
|
>
|
<img :src="item.url" />
|
</li>
|
</ul>
|
</div>
|
<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';
|
|
export default {
|
components: {},
|
data() {
|
return {
|
images: [
|
{ url: './image/icon/1.png', type: '消防预警' },
|
{ url: './images/icon/2.png', type: '风险预警' },
|
{ url: './images/icon/3.png', type: '监控' },
|
{ url: './images/wet.png', type: '车辆1' },
|
{ url: './images/dry.png', type: '车辆2' },
|
{ url: './images/alarm1.png', type: '告警' },
|
{ url: './images/police.png', type: '警察' },
|
],
|
marker: {
|
id: null,
|
name: '',
|
image: null,
|
scale: 0.25,
|
},
|
showCreatePanel: false,
|
showPlot: true,
|
};
|
},
|
computed: {
|
timestamp() {
|
return this.$store.state.map.timestamp;
|
},
|
markers() {
|
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 === 'billboard');
|
},
|
},
|
methods: {
|
editHandle(marker) {
|
if (!global.map) return;
|
this.marker = {
|
id: marker.attr.id,
|
name: marker.attr.name,
|
image: marker.style.image,
|
scale: 0.5,
|
};
|
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;
|
},
|
_initMarker() {
|
this.marker = {
|
id: null,
|
name: '',
|
image: '',
|
scale: 0.25,
|
};
|
},
|
createHandle() {
|
if (!global.map) return;
|
let map = global.map;
|
const { id, image, scale, name } = this.marker;
|
const entity = id && map.getPlotById(id);
|
this.closeCreateHandle();
|
if (entity) {
|
map.updatePlotStyle(id, { image, scale });
|
map.updatePlotAttribute(id, { name });
|
this._initMarker();
|
this.$store.dispatch('map/updateTimestamp');
|
} else {
|
map.startDraw(
|
{
|
type: 'billboard',
|
style: {
|
image,
|
scale,
|
},
|
attr: {
|
name,
|
},
|
},
|
() => {
|
this._initMarker();
|
}
|
);
|
}
|
},
|
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 });
|
}
|
}
|
},
|
clickCreateHandle(url) {
|
if (!global.map) return;
|
global.map.startDraw(
|
{
|
type: 'billboard',
|
style: {
|
image: url,
|
scale: 0.25,
|
},
|
},
|
() => {
|
this.$store.dispatch('map/updateTimestamp');
|
}
|
);
|
},
|
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>
|
