main.js中的库

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import mapConfig from '@/config/mapConfig'
import { VueAxios } from './utils/request'
import { percentPond } from '@jiaminghi/data-view'
Vue.use(percentPond)
// 引入leaflet开源库 暂时就全部引入
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.chinatmsproviders'
// import './mock'
import '@/views/webgis/utils/global.css'
import './assets/reset/reset.css' // 公共样式的引入
import './assets/js/rem.js' // 公共样式的引入
import bootstrap from './core/bootstrap'
import './core/use'
import './permission' // permission control
import './utils/filter' // global filter
import './utils/directive' // global filter
import GeminiScrollbar from 'vue-gemini-scrollbar' // 滚动条插件
import JsonExcel from 'vue-json-excel'
import markerIcon from 'leaflet/dist/images/marker-icon.png'
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
import markerShadow from 'leaflet/dist/images/marker-shadow.png'
Vue.component('downloadExcel', JsonExcel)
// echarts
import echarts from 'echarts'
export const eventBus = new Vue()
Vue.config.productionTip = false
//icon-svg
import '@/assets/icons'
// import '@geoman-io_leaflet-geoman-free@2.9.0@@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
import '@geoman-io/leaflet-geoman-free'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
Vue.use(L)
// 拖拽指令
Vue.directive('drag', {
  inserted: function (el) {
    var mainDiv = el.parentNode
    var isDwon = false
    el.onmousedown = function (ev) {
      ev = ev ? ev : window.event
      isDwon = true
      console.log(ev)
      var disX = ev.clientX - mainDiv.offsetLeft
      var disY = ev.clientY - mainDiv.offsetTop
      console.log('disX,disY', disX, disY)
      el.onmousemove = function (ev) {
        ev = ev ? ev : window.event
        if (isDwon) {
          var l = ev.clientX - disX
          var t = ev.clientY - disY
          console.log('l,t', l, t)
          // 解决弹框拖拽文字选中问题
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
          if (l <= 0) {
            l = 0
          } else if (l >= document.documentElement.clientWidth - el.clientWidth) {
            // document.documentElement.clientWidth 屏幕的可视宽度
            l = document.documentElement.clientWidth - el.clientWidth
            console.log('l', document.documentElement.clientWidth, el.clientWidth)
          }
          if (t <= 0) {
            t = 0
          } else if (t >= document.documentElement.clientHeight - el.clientHeight) {
            // document.documentElement.clientHeight 屏幕的可视高度
            t = document.documentElement.clientHeight - el.clientHeight
            console.log('t', document.documentElement.clientHeight, el.clientHeight)
          }
          mainDiv.style.left = l + 'px'
          mainDiv.style.top = t + 'px'
        }
      }
      el.onmouseup = function () {
        isDwon = false
        el.onmousemove = null
        el.onmouseup = null
      }
    }
  },
})
Vue.prototype.$bus = new Vue()
function patchLeafletMarker(L) {
  const Icon = L.Icon
  const IconDefault = Icon.Default

  function getStyle(el, style) {
    var value = el.style[style] || (el.currentStyle && el.currentStyle[style])

    if ((!value || value === 'auto') && document.defaultView) {
      var css = document.defaultView.getComputedStyle(el, null)
      value = css ? css[style] : null
    }
    return value === 'auto' ? null : value
  }

  function create$1(tagName, className, container) {
    var el = document.createElement(tagName)
    el.className = className || ''

    if (container) {
      container.appendChild(el)
    }
    return el
  }

  IconDefault.prototype._getIconUrl = function (name) {
    if (!IconDefault.imagePath) {
      // Deprecated, backwards-compatibility only
      var path = this._detectIconPath(name)
      // Compatible with webpack
      // Don't attach data url onto IconDefault.imagePath
      if (path.indexOf('data:image/') === 0) {
        return path
      }
      IconDefault.imagePath = path
    }

    // @option imagePath: String
    // `Icon.Default` will try to auto-detect the location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right path.
    return (this.options.imagePath || IconDefault.imagePath) + Icon.prototype._getIconUrl.call(this, name)
  }

  IconDefault.prototype._detectIconPath = function (name) {
    const el = create$1('div', 'leaflet-default-marker-' + name, document.body)
    let path = getStyle(el, 'background-image') || getStyle(el, 'backgroundImage') // IE8

    document.body.removeChild(el)

    if (path === null || path.indexOf('url') !== 0) {
      path = ''
    } else {
      // Compatible with webpack
      path = path.replace(/^url\((["']?)(.+?)(marker-(icon|shadow)\.png)?\1\)/, '$2')
    }
    return path
  }

  // CSS
  const css = [
    `.leaflet-default-marker-icon {background-image: url(${markerIcon});}`,
    `.leaflet-default-marker-icon-2x {background-image: url(${markerIcon2x});}`,
    `.leaflet-default-marker-shadow {background-image: url(${markerShadow});}`,
  ].join('\n')
  const style = create$1('style', null, document.head)
  style.setAttribute('data-type', 'leaflet-marker-patch')
  style.appendChild(document.createTextNode(css))
}
patchLeafletMarker(L)
const esri = require('esri-leaflet')
Vue.prototype.$esri = esri
// 引入lodash
import _ from 'lodash'
Vue.prototype._ = _
// 设置全局获取数据字典方法
Vue.prototype.$echarts = echarts // 将echarts存到Vue原型中
Vue.prototype.mapConfig = mapConfig
// mount axios Vue.$http and this.$http
Vue.use(VueAxios).use(GeminiScrollbar)
Vue.prototype.$echarts = echarts // 将echarts存到Vue原型中
new Vue({
  router,
  store,
  created: bootstrap,
  render: (h) => h(App),
}).$mount('#app')

percentPond ：介绍 | DataV   （大屏可视化数据）

leaflet.chinatmsproviders ： leaflet.chinatmsproviders - npm（加载网络地图插件）

GeminiScrollbar： vue-gemini-scrollbar - npm（自定义滚动条样式）

vue-json-excel： vue-json-excel - npm（将json数据转为excel表格，以便下载输出）

leaflet-geoman： @geoman-io/leaflet-geoman-free - npm（leaflet 地图工具条插件）

Antd：https://www.antdv.com/components/overview（组件库）

Antv（蚂蚁数据可视化）：AntV | 蚂蚁数据可视化（图表库）

viser-vue：viser-vue - npm    Viser    适合数据可视化工程师的工具包（vue 版本）

                        antv G2 的vue扩展（viser是基于G2开发的） Viser    viser(可视化图表)   viser-graph（思维导图、树图）

vue-cropper：vue-cropper - npm（截图工具）

vue-clipboard2： vue-clipboard2 - npm（一键复制功能）