<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: "./images/icon/1.png", type: "消防预警"},
|
// {url: "./images/icon/2.png", type: "风险预警"},
|
// {url: "./images/icon/3.png", type: "监控"},
|
{url: "./images/wet.png", type: "光柱"},
|
// {url: "./images/dry.png", type: "车辆2"},
|
],
|
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" && entity.attribute.attr.isBeam);
|
}
|
},
|
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;
|
});
|
global.map.beams.setVisible(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,
|
},
|
attr: {
|
isBeam: true
|
},
|
}, (entity) => {
|
// const wgs84PosArr = global.map.plotDrawTool.getCoordinates(entity)[0];
|
// global.map.beams.add(null, {x: wgs84PosArr[0], y: wgs84PosArr[1]}, {});
|
// global.map.plotDrawTool.deleteEntity(entity);
|
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>
|
