| | |
| | | <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.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="label.name" placeholder="请输入内容" /> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <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> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { global } from '../../global'; |
| | | 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 { |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | label: { |
| | | id: null, |
| | | name: '', |
| | | }, |
| | | showCreatePanel: false, |
| | | showPlot: true, |
| | | // 默认样式 |
| | | 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)', |
| | | }; |
| | | }, |
| | | 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(id) { |
| | | if (!global.map) return; |
| | | global.map.deletePlot(id); |
| | | this.$store.dispatch('map/updateTimestamp'); |
| | | }, |
| | | closeCreateHandle() { |
| | | this.showCreatePanel = false; |
| | | }, |
| | | showCreateHandle() { |
| | | this.showCreatePanel = true; |
| | | }, |
| | | _initLabel() { |
| | | this.label = { |
| | | id: null, |
| | | name: '', |
| | | }; |
| | | }, |
| | | createHandle() { |
| | | 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 }, |
| | | attr: { |
| | | name, |
| | | |
| | | 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; |
| | | }, |
| | | }, |
| | | () => { |
| | | this._initLabel(); |
| | | 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'); |
| | | }, |
| | | }, |
| | | }; |
| | | 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; |
| | | } |
| | | .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); |
| | | } |
| | | .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 { |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .image-list ul, |
| | | .image-list li { |
| | | margin: 0; |
| | | padding: 0; |
| | | list-style: none; |
| | | } |
| | | .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 { |
| | | 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 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); |
| | | } |
| | | .image-list li:hover, |
| | | .image-list li.active { |
| | | box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15); |
| | | } |
| | | </style> |