修改了leaflet L加载模式 修改了使用less加载方式

YANGDL

2021-02-08 b27e031827eae0f535d17bb20ff4809699151a17

修改了leaflet L加载模式 修改了使用less加载方式

 public/assets/images/map/marker-icon.png

 public/assets/images/map/marker-shadow.png

 src/Sgis.js

@@ -1,4 +1,3 @@
import * as L from 'leaflet'
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
import ServiceLayerHelper from '@components/helpers/ServiceLayerHelper'
@@ -8,12 +7,11 @@
import CanvasIcon from '@components/plugin/CanvasMarkers'
import MagicMarker from '@components/plugin/MagicMarker'
import WmtsSupport from '@components/plugin/wmts_plugins'
import 'leaflet.markercluster'

import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
let map = null
// let baseMapGroup = null
const L = window.L
const initMap = (div) => {
  if (map != null) {
    map.remove()
@@ -36,9 +34,8 @@
  })

  window.map = map
  window.L = L

  return { map: map, L: L }
  return map
}

/**
@@ -46,17 +43,17 @@
 * @param map
 * @param L
 */
const initBasemapsHelper = (map, L) => {
const initBasemapsHelper = (map) => {
  // todo 这里进行底图地图的初始化
  return new BasemapHelper({ map, L })
  return new BasemapHelper({ map })
}
/**
 * 业务底图初始化
 * @param map
 * @param L
 */
const initTileLayersHelper = (map, L) => {
  return new ServiceLayerHelper({ map, L })
const initTileLayersHelper = (map) => {
  return new ServiceLayerHelper({ map })
}

/**
@@ -64,9 +61,9 @@
 * @param map
 * @param L
 */
const initVectorLayersHelper = (map, L) => {
const initVectorLayersHelper = (map) => {
  // todo 这里进行地图的初始化
  window.vectorLayerHelper = new VectorLayerHelper({ map, L })
  window.vectorLayerHelper = new VectorLayerHelper({ map })
  return window.vectorLayerHelper
}


 src/assets/css/map/_map-variable.less

New file
@@ -0,0 +1,2 @@
@color:#00fff6;
@background-color:rgba(0,16,30,.9);

 src/assets/css/map/map-elem-ui.less

New file
@@ -0,0 +1,6 @@
@import "_map-variable";
.el-button--primary{
    color: @color;
    background-color: @background-color;
    border-color: @color;
}

 src/assets/css/map/map-popup.less

New file
@@ -0,0 +1,44 @@
@import "_map-variable";

.s-map-popup {
    position: relative;
    .leaflet-popup-content-wrapper, .leaflet-popup-tip {
        background-color: @background-color;
        /*background-color: transparent;*/
        border: .00521rem solid @color;
        padding: .10417rem;
        -webkit-box-shadow: 0 0 0.03125rem 0 @color;
        box-shadow: 0 0 0.03125rem 0 @color;
        border-radius: 1rem;
    }

    .leaflet-popup-tip-container {
        display: none;
    }

    .leaflet-popup-content-wrapper:before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -.3rem;
        -webkit-transform: translateX(-50%) rotate(
                        45deg
        );
        transform: translateX(-50%) rotate(
                        45deg
        );
        width: .6rem;
        height: .6rem;
        background-color: @background-color;
        border-right: .00521rem solid @color;
        border-bottom: .00521rem solid @color;
    }

}

.s-map-popup-panel {
    color: @color;
}




 src/base/BaseVectorLayer.js

@@ -1,4 +1,4 @@
import L from 'leaflet'


/**
 * 基础图层类， 包含图层的创建，加载和清除等基础功能。

 src/components/helpers/BasemapHelper.js

@@ -7,10 +7,10 @@
class BasemapHelper {
  constructor (options) {
    this.map = options.map
    this.L = options.L
    this.L = window.L
    this.basemapList = []
    this.basemapMap = new Map()
    this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
    this.basemapLayerGroup = this.L.layerGroup().addTo(options.map)
  }

    /**

 src/components/helpers/ServiceLayerHelper.js

@@ -2,15 +2,14 @@
/**
 * 创建图层相关的类
 */
import L from 'leaflet'

class ServiceLayerHelper {
  constructor (options) {
    this.map = options.map
    this.L = options.L
    this.L = window.L
    this.tileLayersMap = new Map()
    this.tileLayersWMSArray = []
    this.tileLayerWmslayerGroup = L.layerGroup().addTo(this.map)
    this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
    this.tileLayersWMTSArray = []
    this.tileLayersTileArray = []
    this.mapConfig = {}
@@ -89,7 +88,7 @@
      layers: options.layers || 'all', // country
      format: options.format || 'image/png',
      transparent: options.true || true,
      crs: options.crs || L.CRS.EPSG4326,
      crs: options.crs || this.L.CRS.EPSG4326,
      maxZoom: options.maxZoom || 21,
      minZoom: options.minZoom || 1,
      zoomOffset: options.zoomOffset || 0

 src/components/helpers/VectorLayerHelper.js

@@ -3,7 +3,7 @@
 */
function VectorLayerHelper (options) {
  this.map = options.map
  this.L = options.L
  this.L = window.L
  this.vectorLayerMap = new Map()
  this.vectorLayerList = []
  this.vectorLayerGroup = null
@@ -14,7 +14,7 @@
     * @param map
     */
  this.initVectorLayers = (vueState) => {
    this.vectorLayerGroup = options.L.layerGroup().addTo(options.map)
    this.vectorLayerGroup = this.L.layerGroup().addTo(options.map)
    this.vueState = vueState
  }


 src/main.js

@@ -8,11 +8,14 @@
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import 'leaflet.markercluster'
Vue.config.productionTip = false

Vue.use(ElementUI, { size: 'small' })
Vue.prototype.$cancels = []
Vue.prototype.L = L
// 注册指令
// registerDirectives(Vue)


 src/store/modules/map.js

@@ -3,7 +3,6 @@
const state = {
  currentCorp: null,
  currentCorpType: null,
  L: null,
  map: null, // 实例化的map
  basemapHelper: {}, // 影像地图图层控制器实现助手程序
  serviceLayerHelper: {}, // 服务图层控制器实现助手程序
@@ -17,9 +16,8 @@
  mapConfig: mapConfig
}
const mutations = {
  setMapObj (state, mObject) {
    state.L = mObject.L
    state.map = mObject.map
  setMapObj (state, map) {
    state.map = map
  },
  setBasemapHelper (state, layerHelper) {
    state.basemapHelper = layerHelper

 src/views/MapTemplate.vue

@@ -1,6 +1,8 @@
<template>
  <div class="full-screen">
    <div id="map" ref="rootmap"></div>
    <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>-->
@@ -24,7 +26,7 @@
import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'

import Popup from '@views/popup/Popup'
export default {
  name: 'MapTemplate',
  components: {
@@ -34,10 +36,12 @@
    MonitorPanel,
    LcBasemap,
    LcServiceLayer,
    LcServiceLayerFilter
    LcServiceLayerFilter,
    Popup
  },
  data () {
    return {
      map: null,
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
@@ -58,22 +62,22 @@
  },
  methods: {
    saveMapStatus () {
      this.$store.commit('setMapObj', this.mapObj)
      this.$store.commit('setMapObj', this.map)
      this.$store.commit('setBasemapHelper', this.basemapHelper)
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)
    },
    init () {
      const mapcontainer = this.$refs.rootmap
      this.mapObj = Sgis.initMap(mapcontainer)
      this.map = Sgis.initMap(mapcontainer)

      this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.mapConfig, false) // 第二个参数，表示是否内网底图

      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
      this.serviceLayerHelper.initServiceLayers(this.mapConfig)

      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.mapConfig)

      this.saveMapStatus()
@@ -81,6 +85,37 @@
      // this.setBasemapHelper(this.basemapHelper)
      // this.setServiceLayerHelper(this.serviceLayerHelper)
      // this.setVectorLayerHelper(this.vectorLayerHelper)
      this.addMarker()
    },
    addMarker () {
      const L = this.L
      var icon = new L.Icon({
        iconUrl: 'assets/images/map/marker-icon.png',
        shadowUrl: 'assets/images/map/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
      })
      var marker = L.marker([32.2221, 118.7843], {
        icon: icon
      }).addTo(this.map)
        .bindPopup(() => this.$refs.popup.$el, { className: 's-map-popup', minWidth: 300, closeButton: false, autoClose: false })
        .bindTooltip('字体光晕效果t.', {
          // permanent : true,
          offset: [0, 0], // 偏移
          direction: 'right', // 放置位置
          // sticky:true,//是否标记在点上面
          className: 'anim-tooltip'// CSS控制
        })

      marker.on('popupopen', this.onLayerClick)
    },
    onLayerClick () {
      this.$refs.popup.setShow()
    },
    callPopup (val) {
      console.log(val)
    }
  }
}

 src/views/popup/Popup.vue

New file
@@ -0,0 +1,53 @@
<template>
  <div v-if="isShow" class="s-map-popup-panel" >

    <div>
      {{ data }}
    </div>
    <div>
      {{ data }}
    </div>
    <br>
    <br>
    <div>
      {{ data }}
    </div>
    <br>
    <br>

    <div>
      {{ data }}
    </div>
    <el-button type="primary" @click="onClick">主要按钮</el-button>
  </div>
</template>

<script>
// import '@/assets/css/map/map-popup.scss'
export default {
  name: 'Popup',
  data () {
    return {

      isShow: false,
      data: ''
    }
  },

  methods: {
    setShow () {
      // this.style.display='auto'
      this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa'
      this.isShow = true
    },
    onClick () {
      const param = 1111
      this.$emit('callPopup', param)
    }
  }
}
</script>

<style lang="less">
@import '../../assets/css/map/map-popup.less';
</style>