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（一键复制功能）
