| | |
| | | <template> |
| | | <div class="left-top-toolbox-panel"> |
| | | <div class="specific-tools"> |
| | | <el-button class="el-button-choice" @click="changeSelect" v-show="selectGroup"> |
| | | <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt=""> |
| | | <span>工具</span> |
| | | </el-button> |
| | | <el-button class="el-button-choice" @click="changeSelect" v-show="!selectGroup"> |
| | | <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""> |
| | | <a>工具</a> |
| | | <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice" |
| | | @mouseover.enter.native="changeSelectMouse"> |
| | | <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""/> |
| | | <span class="span-default">工具</span> |
| | | </el-button> |
| | | <transition name="animationChange"> |
| | | <el-row v-show="selectGroup" class="specific-tools-group"> |
| | |
| | | > |
| | | <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''" |
| | | @click="changeChoose(index)"> |
| | | <img :src="item.iconSelecd" alt="" v-if="active === index && checked === true"/> |
| | | <img :src="item.iconSelecd" alt="" v-if="active === index && checked"/> |
| | | <img :src="item.icon" alt="" v-else/> |
| | | <span>{{ item.label }}</span> |
| | | <span v-if="active === index && checked">{{ item.label }}</span> |
| | | <span v-else class="default-span">{{ item.label }}</span> |
| | | </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 && checked === true"/> |
| | | <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT"/> |
| | | <img :src="itemT.icon" :title="itemT.title" v-else/> |
| | | </el-button> |
| | | <div class="base-map-inner-panel" v-show="!isShow&&item.index==='2'"> |
| | | <div class="base-map-inner-panel" v-show="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)"/> |
| | |
| | | name: 'ToolBoxPanel', |
| | | data () { |
| | | return { |
| | | checked: false, |
| | | checkbuuton: -1, |
| | | isShow: true, |
| | | currentBaseMapCode: 'tianditu_img', |
| | | basemapList: [], |
| | | selectGroup: false, |
| | | drawLayer: null, |
| | | drawLayerArray: [], |
| | | map: null, |
| | | active: -1, |
| | | Selecd: -1, |
| | | checked: false, |
| | | checkbutton: -1, |
| | | menuList: [ |
| | | { |
| | | icon: plot, |
| | |
| | | } |
| | | ] |
| | | } |
| | | ], |
| | | selectGroup: false, |
| | | drawLayer: null, |
| | | drawLayerArray: [], |
| | | map: null, |
| | | // L: window.L, |
| | | active: -1, |
| | | Selecd: -1 |
| | | ] |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | this.drawLayer = this.L.layerGroup().addTo(this.map) |
| | | } |
| | | this.active = index |
| | | if (this.drawLayer == null) { |
| | | this.drawLayer = this.L.layerGroup().addTo(this.map) |
| | | } |
| | | if (this.checkbuuton === index) { |
| | | if (this.checkbutton === index) { |
| | | this.checked = !this.checked |
| | | } else { |
| | | if (this.checkbuuton === -1) { |
| | | if (this.checkbutton === -1) { |
| | | this.checked = !this.checked |
| | | } else { |
| | | this.checked = true |
| | | } |
| | | } |
| | | this.checkbuuton = index |
| | | this.checkbutton = index |
| | | }, |
| | | choiceItem (itemT, indexT) { |
| | | this.Selecd = indexT |
| | |
| | | }, |
| | | changeSelectMouse () { |
| | | this.selectGroup = true |
| | | this.checked = false |
| | | } |
| | | } |
| | | } |
| | |
| | | display: block; |
| | | color: @color-shadow; |
| | | } |
| | | a { |
| | | .default-span { |
| | | display: block; |
| | | color: @color-over; |
| | | } |