| | |
| | | <div class="init-choose" @click="changeSelect()"> |
| | | <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""> |
| | | </div> |
| | | <!-- <transition name="fade">--> |
| | | <!-- <ul v-show='selectGroup'>--> |
| | | <!-- <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"><img :src="item"/></li>--> |
| | | <!-- </ul>--> |
| | | <!-- </transition>--> |
| | | <div class="el-select-dropdown" v-show='selectGroup'> |
| | | <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total"> |
| | | <transition name="fade"> |
| | |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | </div> |
| | | <!-- // 弹框--> |
| | | <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png' |
| | | import square from '@/assets/images/map-pages/icon/toolbox/square.png' |
| | | |
| | | // 测量的方法 |
| | | import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css' |
| | | import Measure from '@/components/plugin/MeaSure' |
| | | |
| | | // 标注的方法 |
| | | import MakeTation from '@components/plugin/MakeTation' |
| | | |
| | | // 封装的选择弹框 |
| | | import TextBounced from '@components/panel/bounced/TextBounced' |
| | | |
| | | export default { |
| | | name: 'ToolBoxPanel', |
| | | components: {}, |
| | | components: { TextBounced }, |
| | | data () { |
| | | return { |
| | | isPanelVisible: false, |
| | |
| | | }, |
| | | selectGroup: false, |
| | | drawLayer: null, |
| | | map: null, |
| | | L: window.L, |
| | | map: null |
| | | // 控制工具栏 文字标注 的弹框是否显示 |
| | | bouncedText: false |
| | | } |
| | | }, |
| | | methods: { |
| | | gitBounced (params) { |
| | | this.bouncedText = params |
| | | }, |
| | | changeSelect () { |
| | | this.selectGroup = !this.selectGroup |
| | | }, |
| | |
| | | this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) |
| | | break |
| | | case '箭头标绘': |
| | | this.drawLayer = this.map.editTools.startPolyline() |
| | | this.drawLayer = this.map.editTools.startPolylineArrow() |
| | | this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) |
| | | break |
| | | case '点标注': |
| | | this.drawLayer = this.map.editTools.startMarker() |
| | | this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) |
| | | MakeTation.StartCircleAnnotation(this.map, this.L) |
| | | break |
| | | case '图标标注': |
| | | this.drawLayer = this.map.editTools.startIcon() |
| | | this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) |
| | | break |
| | | case '文字标注': |
| | | this.drawLayer = this.map.editTools.startText() |
| | | this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit) |
| | | this.bouncedText = true |
| | | MakeTation.startMakeText(this.map, this.L) |
| | | break |
| | | case '距离测量': |
| | | Measure.startMeasureLen(this.map, this.L) |
| | | break |
| | | case '面积测量': |
| | | Measure.startMeasureArea(this.map, this.L) |
| | | break |
| | | } |
| | | }, |