添加工具栏功能

chenzeping

2021-03-08 17e7836b1d0a7bd1a51d44ae071a88423a9f9370

添加工具栏功能

 package.json

@@ -18,6 +18,7 @@
    "dayjs": "^1.9.6",
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "fullscreen": "^1.1.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",
    "leaflet": "^1.6.0",
@@ -26,10 +27,11 @@
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.2",
    "screenfull": "^3.3.3",
    "vue": "^2.6.11",
    "vue-count-to": "^1.0.13",
    "vue-focus": "^2.1.0",
    "vue-fullscreen": "^2.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

 src/Sgis.js

@@ -10,6 +10,8 @@
import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
import FullScreen from '@components/plugin/FullScreen'

let map = null
const L = window.L
const initMap = (div) => {
@@ -26,6 +28,8 @@
  DashFlow.DashFlow(L) // 流动线图
  CanvasMarkers.init(L)// 画布图层
  // Leaflet扩展代码
  // 全屏
  FullScreen.init(L)

  map = L.map(div, MapConfig.mapOptions)


 src/components/panel/LegendPanel.vue

@@ -4,7 +4,7 @@
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>
    <transition name="fade">
    <`transition` name="fade">
      <div class="legend-content" v-show="legendControl">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
@@ -258,8 +258,8 @@
  }

  .fade-leave-active {
    transform-origin: right;
    animation: bounce-in 1s reverse;
    //transform-origin: right;
    //animation: bounce-in 1s reverse;
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
  }

 src/components/panel/ToolBoxPanel.vue

@@ -1,11 +1,25 @@
<template>
  <div class="lefttop-toolbox-panel">
    <ul>
      <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"
          :class="{'active':activeTools[i]}">
        <img :src="item"/>
      </li>
    </ul>
    <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">
          <img :src="item.title" :title="item.alt"/>
        </transition>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'>
            <span @click='toggleActive(ite)'>{{ ite.headings }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

@@ -20,35 +34,98 @@
export default {
  name: 'ToolBoxPanel',
  components: {},
  props: ['map'],
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      activeTools: {},
      imgList: {
        circle: circle,
        square: square,
        polygon: polygon,
        legend: legend,
        location: location,
        fullscreen: fullscreen
      },
      imgLists: [
        {
          title: circle,
          alt: '标绘',
          items: [
            { headings: '线标绘' },
            { headings: '面标绘' },
            { headings: '箭头标绘' }
          ]
        },
        {
          title: square,
          alt: '标注',
          items: [
            { headings: '点标注' },
            { headings: '线标注' },
            { headings: '面标注' },
            { headings: '文字标注' },
            { headings: '图标标注' }
          ]
        },
        {
          title: legend,
          alt: '测量',
          items: [
            { headings: '距离测量' },
            { headings: '面积测量' }
          ]
        },
        {
          title: location,
          alt: '切换底图',
          items: [
            { headings: '影像图' },
            { headings: '矢量图' },
            { headings: '地形图' }
          ]
        },
        {
          title: polygon,
          alt: '管网',
          items: [
            { headings: '连通性分析' },
            { headings: '爆管分析' },
            { headings: '流向分析' },
            { headings: '横断面分析' }
          ]
        },
        {
          title: fullscreen,
          alt: '下载',
          items: [
            { headings: '全屏' },
            { headings: 'A4横向' },
            { headings: 'A4纵向' }
          ]
        }
      ],
      form: {
        regionType: '',
        enterprise: ''
      }
      },
      selectGroup: false,
      selectGroupOne: false
    }
  },
  methods: {
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleCommand (command) {
      console.log(command)
      if (command === '全屏') {
        this.map.toggleFullscreen()
      }
    },
    toggleActive (k) {
      this.total++
      this.activeTools[k] = !this.activeTools[k]
      if (k === 'fullscreen') {
        this.map.toggleFullscreen()
      }
    },
    loadData () {

@@ -58,6 +135,7 @@
    this.loadData()
  },
  created () {

  }
}
</script>
@@ -67,31 +145,74 @@
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1000;
  width: 175px;
  height: 35px;
  line-height: 30px;
  background: #07325b;
  border: 1px solid #5EF2FF;
  border-radius: 3px;
  text-align: center;
  z-index: 999;
  display: flex;

  ul {
    list-style: none;
    margin: 0;
    padding: 5px;
  .init-choose {
    //margin: 15px 5px;
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px skyblue solid;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

    li {
      float: left;
      width: 23px;
      height: 23px;
      margin: 0 1px;
      border: 1px solid #073C4F;
  .el-select-dropdown {
    position: absolute;
    z-index: 1;
    width: 250px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #305B62;
    border-radius: 15px;
    padding-inline: 10px;
    padding-inline-start: 30px;

    .el-dropdow {
      width: 20%;
    }

    @keyframes bounce-in {
      0% {
        transform: scale(0);
        opacity: 0.3;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .fade-enter-active {
      transform-origin: left center;
      animation: bounce-in .2s;
    }

    .fade-leave-active {
      transform-origin: left;
      animation: bounce-in .2s reverse;
    }
  }

  .active {
    border: 1px solid #5EF2FF;
  .el-select-dropdown:last-child {
    margin-left: 10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

}
</style>

 src/components/plugin/FullScreen.js

New file
@@ -0,0 +1,174 @@
/* eslint-disable */

const init = (L) => {

  (function (factory) {

    if (typeof define === 'function' && define.amd) {

      // AMD

      define(['leaflet'], factory)

    } else if (typeof module !== 'undefined') {

      // Node/CommonJS

      // module.exports = factory(require('leaflet'))

      factory(L)

    } else {

      // Browser globals

      if (typeof window.L === 'undefined') {

        throw new Error('Leaflet must be loaded first')

      }

      factory(window.L)

    }

  }(function (L) {

    L.Control.Fullscreen = L.Control.extend({

      options: {

        position: 'topleft',

        title: {

          false: 'View Fullscreen',

          true: 'Exit Fullscreen'

        }

      },



      onAdd: function (map) {

        var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control')



        this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container)

        this.link.href = '#'



        this._map = map

        this._map.on('fullscreenchange', this._toggleTitle, this)

        this._toggleTitle()



        L.DomEvent.on(this.link, 'click', this._click, this)



        return container

      },



      _click: function (e) {

        L.DomEvent.stopPropagation(e)

        L.DomEvent.preventDefault(e)

        this._map.toggleFullscreen(this.options)

      },



      _toggleTitle: function () {

        this.link.title = this.options.title[this._map.isFullscreen()]

      }

    })



    L.Map.include({

      isFullscreen: function () {

        return this._isFullscreen || false

      },



      toggleFullscreen: function (options) {

        var container = this.getContainer()

        if (this.isFullscreen()) {

          if (options && options.pseudoFullscreen) {

            this._disablePseudoFullscreen(container)

          } else if (document.exitFullscreen) {

            document.exitFullscreen()

          } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen()

          } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen()

          } else if (document.msExitFullscreen) {

            document.msExitFullscreen()

          } else {

            this._disablePseudoFullscreen(container)

          }

        } else {

          if (options && options.pseudoFullscreen) {

            this._enablePseudoFullscreen(container)

          } else if (container.requestFullscreen) {

            container.requestFullscreen()

          } else if (container.mozRequestFullScreen) {

            container.mozRequestFullScreen()

          } else if (container.webkitRequestFullscreen) {

            container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)

          } else if (container.msRequestFullscreen) {

            container.msRequestFullscreen()

          } else {

            this._enablePseudoFullscreen(container)

          }

        }

      },



      _enablePseudoFullscreen: function (container) {

        L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen')

        this._setFullscreen(true)

        this.fire('fullscreenchange')

      },



      _disablePseudoFullscreen: function (container) {

        L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen')

        this._setFullscreen(false)

        this.fire('fullscreenchange')

      },



      _setFullscreen: function (fullscreen) {

        this._isFullscreen = fullscreen

        var container = this.getContainer()

        if (fullscreen) {

          L.DomUtil.addClass(container, 'leaflet-fullscreen-on')

        } else {

          L.DomUtil.removeClass(container, 'leaflet-fullscreen-on')

        }

        this.invalidateSize()

      },



      _onFullscreenChange: function (e) {

        var fullscreenElement =

          document.fullscreenElement ||

          document.mozFullScreenElement ||

          document.webkitFullscreenElement ||

          document.msFullscreenElement



        if (fullscreenElement === this.getContainer() && !this._isFullscreen) {

          this._setFullscreen(true)

          this.fire('fullscreenchange')

        } else if (fullscreenElement !== this.getContainer() && this._isFullscreen) {

          this._setFullscreen(false)

          this.fire('fullscreenchange')

        }

      }

    })



    L.Map.mergeOptions({

      fullscreenControl: false

    })



    L.Map.addInitHook(function () {

      if (this.options.fullscreenControl) {

        this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl)

        this.addControl(this.fullscreenControl)

      }



      var fullscreenchange



      if ('onfullscreenchange' in document) {

        fullscreenchange = 'fullscreenchange'

      } else if ('onmozfullscreenchange' in document) {

        fullscreenchange = 'mozfullscreenchange'

      } else if ('onwebkitfullscreenchange' in document) {

        fullscreenchange = 'webkitfullscreenchange'

      } else if ('onmsfullscreenchange' in document) {

        fullscreenchange = 'MSFullscreenChange'

      }



      if (fullscreenchange) {

        var onFullscreenChange = L.bind(this._onFullscreenChange, this)



        this.whenReady(function () {

          L.DomEvent.on(document, fullscreenchange, onFullscreenChange)

        })



        this.on('unload', function () {

          L.DomEvent.off(document, fullscreenchange, onFullscreenChange)

        })

      }

    })



    L.control.fullscreen = function (options) {

      return new L.Control.Fullscreen(options)

    }

  }))

}

export default {

  init

}


 src/views/MapTemplate.vue

@@ -1,19 +1,19 @@
<template>
    <div class="full-screen">
        <popup ref="popup" @callPopup="callPopup"></popup>
        <div id="map" ref="rootmap">
        </div>
        <sgis-layer-controller :preset="'warningPreset'">
            <lc-basemap></lc-basemap>
            <!--            <div class="barline"></div>-->
            <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
        </sgis-layer-controller>
        <monitor-panel></monitor-panel>
<!--        <top-enterprise-panel></top-enterprise-panel>-->
        <tool-box-panel></tool-box-panel>
      <menu-special></menu-special>
      <legend-panel></legend-panel>
  <div class="full-screen">
    <popup ref="popup" @callPopup="callPopup"></popup>
    <div id="map" ref="rootmap">
    </div>
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <!--            <div class="barline"></div>-->
      <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
    </sgis-layer-controller>
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel :map="this.map"></tool-box-panel>
    <menu-special></menu-special>
    <legend-panel></legend-panel>
  </div>
</template>

<script>
@@ -134,23 +134,23 @@

<style lang="less">

    .full-screen {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;

        #map {
            height: 100%;
            width: 100%;
        }
  #map {
    height: 100%;
    width: 100%;
  }

        .barline {
            //width: 100%;
            //height: 1px;
            //background-color: #0661AE;
            border-top: 1px solid #0661AE;
        }
    }
</style>>
  .barline {
    //width: 100%;
    //height: 1px;
    //background-color: #0661AE;
    border-top: 1px solid #0661AE;
  }
}
</style>