| | |
| | | <div class="left-top-toolbox-panel"> |
| | | <div class="specific-tools"> |
| | | <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="工具" placement="left"> |
| | | <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice" @click.enter.native="changeSelectMouse"> |
| | | <div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse" > |
| | | <i class="icon iconfont icongongju"></i> |
| | | <!--<span class="span-default">工具</span>--> |
| | | </el-button> |
| | | </div> |
| | | </el-tooltip> |
| | | <transition name="animationChange"> |
| | | <el-row v-show="selectGroup" class="specific-tools-group"> |
| | | <div v-show="selectGroup" class="specific-tools-group"> |
| | | <el-popover |
| | | trigger="manual" |
| | | placement="bottom" |
| | | :popper-class="'tools-panel-content'" |
| | | v-for="(item,index) in menuList" :key="index" |
| | | :width="item.index === '2'?230 : 150" |
| | | v-model="isShow[index]" |
| | | > |
| | | v-model="isShow[index]"> |
| | | <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" @click.native="changeChoose(index)"> |
| | | <!-- <img :src="item.iconSelecd" alt="" v-if="active === index"/> |
| | | <img :src="item.icon" alt="" v-else/> --> |
| | | <i :class="'icon iconfont '+item.icon"></i> |
| | | </el-button> |
| | | <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'"> |
| | | <!-- <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checkedItem" alt=""/> |
| | | <img :src="itemT.icon" :title="itemT.title" alt="" v-else/> --> |
| | | <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'" :class="indexT==toolActive?'hover':''" > |
| | | <i :class="'icon iconfont '+itemT.icon"></i> |
| | | </el-button> |
| | | <lc-base-map v-show="item.index==='2'"></lc-base-map> |
| | |
| | | <!-- <el-button @click="changeSelect" class="special-button"> |
| | | <i class="el-icon-d-arrow-left"></i> |
| | | </el-button> --> |
| | | </el-row> |
| | | </div> |
| | | </transition> |
| | | </div> |
| | | </div> |
| | |
| | | checkedItem: false, |
| | | Selecd: -1, |
| | | isSelecd: -1, |
| | | toolActive: -1, |
| | | menuList: [ |
| | | { |
| | | icon: 'iconjuliceliang', // plot, |
| | |
| | | label: '点标绘', |
| | | icon: 'iconlocation-full', // marker, |
| | | title: '点标绘', |
| | | active: false, |
| | | iconChoose: markerChoose |
| | | }, |
| | | { |
| | |
| | | label: '线标绘', |
| | | icon: 'iconline', // line, |
| | | title: '线标绘', |
| | | active: 0, |
| | | iconChoose: lineChoose |
| | | }, |
| | | { |
| | |
| | | label: '多边形', |
| | | icon: 'iconliubianxing1', // polygonJ, |
| | | title: '多边形', |
| | | active: 0, |
| | | iconChoose: polygonJChoose |
| | | }, |
| | | { |
| | |
| | | label: '矩形', |
| | | icon: 'iconcheckbox-full', // polygonS, |
| | | title: '矩形', |
| | | active: 0, |
| | | iconChoose: polygonSChoose |
| | | }, |
| | | { |
| | |
| | | label: '圆形', |
| | | icon: 'iconyuan', // polygonY, |
| | | title: '圆形', |
| | | active: 0, |
| | | iconChoose: polygonYChoose |
| | | }, |
| | | { |
| | | index: '1-4', |
| | | label: '删除', |
| | | active: -1, |
| | | icon: 'icondelete-fill', // del, |
| | | title: '删除标绘', |
| | | iconChoose: delChoose |
| | |
| | | label: '距离', |
| | | icon: 'iconjuliceliang', // distance, |
| | | title: '距离测量', |
| | | active: 0, |
| | | iconChoose: distanceChoose |
| | | }, |
| | | { |
| | |
| | | label: '面积', |
| | | icon: 'iconmianjiceliang', // mm, |
| | | title: '面积测量', |
| | | active: 0, |
| | | iconChoose: mmChoose |
| | | }, |
| | | { |
| | |
| | | label: '清除', |
| | | icon: 'icondelete-fill', // del, |
| | | title: '清除测量', |
| | | active: -1, |
| | | iconChoose: delChoose |
| | | } |
| | | ] |
| | |
| | | { |
| | | label: '影像图', |
| | | index: '2-1', |
| | | active: 0, |
| | | items: [ |
| | | { |
| | | index: '2-1-1', |
| | |
| | | { |
| | | label: '矢量图', |
| | | index: '2-2', |
| | | active: 0, |
| | | items: [ |
| | | { |
| | | index: '2-2-1', |
| | |
| | | { |
| | | label: '地形图', |
| | | index: '2-3', |
| | | active: 0, |
| | | items: [ |
| | | { |
| | | index: '2-3-1', |
| | |
| | | index: '4-1', |
| | | label: '全屏', |
| | | icon: 'icontianchongxing-', // FullScreen, |
| | | active: 0, |
| | | title: '全屏' |
| | | }, |
| | | { |
| | | index: '4-2', |
| | | label: 'A4横向', |
| | | icon: 'iconsaoma', // cross, |
| | | active: 0, |
| | | title: 'A4横向' |
| | | }, |
| | | { |
| | | index: '4-3', |
| | | label: 'A4纵向', |
| | | icon: 'iconsaoma zongs', // vertical, |
| | | active: 0, |
| | | title: 'A4纵向' |
| | | } |
| | | ] |
| | |
| | | this.drawLayer = this.L.layerGroup().addTo(this.map) |
| | | } |
| | | this.active = index |
| | | this.toolActive = -1 |
| | | // console.log(this.basemapList) |
| | | for (let i = 0; i < this.isShow.length; i++) { |
| | | if (i !== index) { |
| | |
| | | }, |
| | | choiceItem (itemT, indexT) { |
| | | this.Selecd = indexT |
| | | if (itemT.active !== -1) { |
| | | this.toolActive = indexT |
| | | } else { |
| | | this.toolActive = -1 |
| | | } |
| | | if (this.isSelecd === indexT) { |
| | | this.checkedItem = !this.checkedItem |
| | | } else { |
| | |
| | | margin: 0 0.015rem; |
| | | width: 0.2725rem; |
| | | height: 0.2725rem; |
| | | color:#00fff6; |
| | | background: @background-color; |
| | | border: 0.00521rem solid #00fff6; |
| | | vertical-align: middle !important; |
| | | font-size: 20px; |
| | | .base-map-img { |
| | |
| | | z-index: 1; |
| | | |
| | | .tools-panel-choose { |
| | | border: none; |
| | | box-shadow: 0 0 0.03rem @color-shadow; |
| | | |
| | | border: 0.00521rem solid #fff700; |
| | | box-shadow: 0 0 0.03rem #fff700; |
| | | color:#fff700; |
| | | img { |
| | | width: 22px; |
| | | height: 22px; |