| | |
| | | <el-row v-show="selectGroup" class="specific-tools-group"> |
| | | <el-popover |
| | | placement="bottom" |
| | | width="" |
| | | width="100%" |
| | | trigger="click" |
| | | :popper-class="'tools-panel-content'" |
| | | v-for="(item,index) in menuList" :key="index" |
| | |
| | | <img :src="item.icon" alt=""/> |
| | | <span>{{ item.label }}</span> |
| | | </el-button> |
| | | <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)"> |
| | | <img :src="itemT.icon" alt=""/> |
| | | <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)" v-show="item.index!=='2'"> |
| | | <img :src="itemT.icon" :title="itemT.title" v-show="item.index!=='2'"/> |
| | | </el-button> |
| | | <div class="base-map-inner-panel" v-show="isShow&&item.index==='2'"> |
| | | <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item"> |
| | | <img class="base-map-img" width="50" height="50" :src="item.conf.icon_actived" :title="item.name" |
| | | @click="changeBasemap(item)"/> |
| | | <el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck" |
| | | label="标注" @change="changeBasemap(item)"> |
| | | </el-checkbox> |
| | | </div> |
| | | </div> |
| | | </el-popover> |
| | | <el-button @click="changeSelect" class="special-button"> |
| | | <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i> |
| | | </el-button> |
| | | </el-row> |
| | | <el-button @click="changeSelect" class="special-button"> |
| | | <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i> |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | // 测量的方法 |
| | | import Measure from '@/components/plugin/MeaSure' |
| | | // import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css' |
| | | // 封装的选择弹框 |
| | | // import BaseNavMenuItem from '@components/panel/BaseNavMenuItem' |
| | | // 标注的方法 |
| | | // import MakeTation from '@components/plugin/MakeTation' |
| | | |
| | | export default { |
| | | name: 'ToolBoxPanel', |
| | | // components: { BaseNavMenuItem }, |
| | | data () { |
| | | return { |
| | | isShow: true, |
| | | currentBaseMapCode: 'tianditu_img', |
| | | basemapList: [], |
| | | menuList: [ |
| | | { |
| | | icon: plot, |
| | |
| | | { |
| | | index: '1-1', |
| | | label: '点标绘', |
| | | icon: marker |
| | | icon: marker, |
| | | title: '点标绘' |
| | | }, |
| | | { |
| | | index: '1-2', |
| | | label: '线标绘', |
| | | icon: line |
| | | icon: line, |
| | | title: '线标绘' |
| | | }, |
| | | { |
| | | index: '1-4', |
| | | label: '多边形', |
| | | icon: polygonJ |
| | | icon: polygonJ, |
| | | title: '多边形' |
| | | }, |
| | | { |
| | | index: '1-5', |
| | | label: '矩形', |
| | | icon: polygonS |
| | | icon: polygonS, |
| | | title: '矩形' |
| | | }, |
| | | { |
| | | index: '1-3', |
| | | label: '圆形', |
| | | icon: polygonY |
| | | icon: polygonY, |
| | | title: '圆形' |
| | | } |
| | | ] |
| | | }, |
| | |
| | | { |
| | | index: '3-1', |
| | | label: '距离', |
| | | icon: distance |
| | | icon: distance, |
| | | title: '距离测量' |
| | | }, |
| | | { |
| | | index: '3-2', |
| | | label: '面积', |
| | | icon: mm |
| | | icon: mm, |
| | | title: '面积测量' |
| | | } |
| | | ] |
| | | }, |
| | |
| | | items: [ |
| | | { |
| | | index: '4-1', |
| | | label: '全屏' |
| | | label: '全屏', |
| | | icon: '', |
| | | title: '全屏' |
| | | }, |
| | | { |
| | | index: '4-2', |
| | | label: 'A4横向' |
| | | label: 'A4横向', |
| | | icon: '', |
| | | title: 'A4横向' |
| | | }, |
| | | { |
| | | index: '4-3', |
| | | label: 'A4纵向' |
| | | label: 'A4纵向', |
| | | icon: '', |
| | | title: 'A4纵向' |
| | | } |
| | | ] |
| | | } |
| | |
| | | active: 0 |
| | | } |
| | | }, |
| | | computed: { |
| | | basemapHelper () { |
| | | return this.$store.state.map.basemapHelper |
| | | } |
| | | }, |
| | | watch: { |
| | | basemapHelper (newVal) { |
| | | if (newVal != null) { |
| | | this.updateBasemapList() |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | updateBasemapList () { |
| | | this.basemapList = this.basemapHelper.getBasemapList() |
| | | }, |
| | | changeBasemap (itm) { |
| | | const code = itm.code |
| | | this.basemapList.forEach((item) => { |
| | | if (item.code === code) { |
| | | console.log(this.currentBaseMapCode) |
| | | if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) { |
| | | this.currentBaseMapCode = code |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true) |
| | | } else { |
| | | this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false) |
| | | } |
| | | |
| | | this.basemapHelper.getBasemapList().forEach((item) => { |
| | | item.layer.bringToBack() |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | changeChoose (index) { |
| | | this.active = index |
| | | }, |
| | |
| | | break |
| | | case '面积': |
| | | Measure.startMeasureArea(this.map, this.L) |
| | | break |
| | | case '全屏': |
| | | // this.map.toggleFullscreen() |
| | | var printer = this.L.easyPrint({ |
| | | sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], |
| | | filename: 'map_image', |
| | | exportOnly: true, |
| | | hideControlContainer: true |
| | | }).addTo(this.map) |
| | | printer.printMap('CurrentSize', 'MyManualPrint') |
| | | break |
| | | case 'A4横向': |
| | | var printerX = this.L.easyPrint({ |
| | | sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], |
| | | filename: 'map_image', |
| | | exportOnly: true, |
| | | hideControlContainer: true |
| | | }).addTo(this.map) |
| | | printerX.printMap('A4Landscape page', 'MyManualPrint') |
| | | break |
| | | case 'A4纵向': |
| | | var printerY = this.L.easyPrint({ |
| | | sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], |
| | | filename: 'map_image', |
| | | exportOnly: true, |
| | | hideControlContainer: true |
| | | }).addTo(this.map) |
| | | printerY.printMap('A4Portrait page', 'MyManualPrint') |
| | | break |
| | | } |
| | | }, |
| | |
| | | // 左上功能控制 |
| | | changeSelect () { |
| | | this.selectGroup = !this.selectGroup |
| | | this.isShow = !this.isShow |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .specific-tools { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-evenly; |
| | | |
| | | .el-button { |
| | | z-index: 999; |
| | | padding: 0; |
| | | margin: 0 0.015rem; |
| | | width: 45px; |
| | | height: 45px; |
| | | background: @background-color-tools; |
| | | border: none; |
| | | .base-map-img{ |
| | | position: absolute; |
| | | } |
| | | .base-map-img:hover{ |
| | | cursor:pointer; |
| | | } |
| | | |
| | | img { |
| | | width: 22px; |
| | |
| | | } |
| | | |
| | | .specific-tools-group { |
| | | z-index: 1; |
| | | .tools-panel-choose { |
| | | border: none; |
| | | box-shadow: 0 0 0.03rem @color-shadow; |
| | |
| | | } |
| | | } |
| | | } |
| | | .isD-enter-active, .isD-leave-active{ |
| | | transition: all 0.5s; |
| | | } |
| | | .isD-enter, .isD-leave-to{ |
| | | opacity: 0; |
| | | transform: translateX(-100px); |
| | | } |
| | | </style> |