天地图瓦片切换增加淡入淡出效果

YANGDL

2021-03-08 95ff3cadc7685f6470a0d6c78429dbfd5b1451d9

天地图瓦片切换增加淡入淡出效果

 src/components/LayerController/modules/LcBaseMap.vue

@@ -16,6 +16,7 @@
  data () {
    return {
      isShow: true,
      currentBaseMapCode: 'tianditu_img',
      basemapList: []
    }
  },
@@ -34,7 +35,14 @@
      const code = itm.code
      this.basemapList.forEach((item) => {
        if (item.code === code) {
          console.log(this.currentBaseMapCode)
          if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
            this.currentBaseMapCode = code
          this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
          } else {
            this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false)
          }

          this.basemapHelper.getBasemapList().forEach((item) => {
            item.layer.bringToBack()
          })

 src/components/helpers/BasemapHelper.js

@@ -11,6 +11,7 @@
    this.basemapList = []
    this.basemapMap = new Map()
    this.basemapLayerGroup = this.L.layerGroup().addTo(options.map)
    this.currentBaseMapCode = null
  }

    /**
@@ -52,13 +53,23 @@
     */
    showBasemap = (code, showAnnotation, isHideOthers = true) => {
      const basemap = this.basemapMap.get(code)

      if (isHideOthers) {
        this.basemapLayerGroup.clearLayers()
      }
      setTimeout(() => {
        // const layer = this.basemapLayerGroup.hasLayer(basemap.layer)
        // if (!layer) {
      this.basemapLayerGroup.addLayer(basemap.layer)
        // }

      if (showAnnotation) {
          // if()
        this.basemapLayerGroup.addLayer(basemap.annotation)
        } else {
          this.basemapLayerGroup.removeLayer(basemap.annotation)
      }
      }, 300)
    }

    /**

 src/components/plugin/Leaflet.GridLayer.FadeOut.js

New file
@@ -0,0 +1,76 @@
/* eslint-disable */
// Adds a fade-out animation to grid layers when they're removed from the map

(function () {
  var gridProto = L.GridLayer.prototype
  var onRemoveProto = gridProto.onRemove
  var onAddProto = gridProto.onAdd
  var fadeDuration = 200

  L.GridLayer.include({

    onAdd: function (map) {
      if (this._fadeOutTime) {
        var now = performance.now() || (+new Date())
        L.Util.cancelAnimFrame(this._fadeOutFrame)
        this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now
        L.Util.requestAnimFrame(this._fadeIn, this)
      } else {
        onAddProto.call(this, map)
      }
    },

    onRemove: function (map) {
      if (this._fadeOutTime) {
        // We're removing this *again* quickly after removing and re-adding
        var now = performance.now() || (+new Date())

        this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now
      }
      this._fadeOutTime = (performance.now() || (+new Date())) + fadeDuration * 2
      this._fadeOutMap = this._map

      L.Util.requestAnimFrame(this._fadeOut, this)
    },

    _fadeOut: function () {
      if (!this._fadeOutTime || !this._container) { return }

      var now = performance.now() || (+new Date())

      var opacity = Math.min((this._fadeOutTime - now) / fadeDuration, 1)
      // console.log('fadeout:', opacity);
      if (opacity < 0) {
        this._fadeOutTime = false

        onRemoveProto.call(this, this._fadeOutMap)

        return
      }

      L.DomUtil.setOpacity(this._container, opacity * this.options.opacity)

      this._fadeOutFrame = L.Util.requestAnimFrame(this._fadeOut, this)
    },

    // Only runs when the gridlayer is quickly re-added while it's being faded out
    _fadeIn: function _fadeIn () {
      if (!this._fadeOutTime || !this._container) { return }

      var now = performance.now() || (+new Date())

      var opacity = (now - this._fadeOutTime) / fadeDuration
      // console.log('fadein:', opacity);

      if (opacity > 1) {
        this._fadeOutTime = false
        return
      }

      L.DomUtil.setOpacity(this._container, opacity * this.options.opacity)

      L.Util.requestAnimFrame(this._fadeIn, this)
    }

  })
})()

 src/conf/MapConfig.js

@@ -34,6 +34,7 @@
const mapConfig = {
  IsLoadMapByToken: true, // 是否通过token加载地图
  showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
  // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: { LayerSewersLine: [LayerSewersLine], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置

 src/conf/TDT.js

@@ -4,7 +4,7 @@
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770
const intranet = [
  {
    code: 'sinopec_img',
    code: 'tianditu_img',
    name: '中石化天地图影像',
    icon_actived: '/assets/images/map-pages/icon/img.png',
    icon_deactived: '/assets/images/map-pages/icon/img.png',
@@ -40,7 +40,7 @@
    }
  },
  {
    code: 'sinopec_vec',
    code: 'tianditu_vec',
    name: '中石化天地图矢量',
    icon_actived: '/assets/images/map-pages/icon/road.png',
    icon_deactived: '/assets/images/map-pages/icon/road.png',

 src/main.js

@@ -12,6 +12,7 @@
import L from 'leaflet'
import 'leaflet.markercluster'
import 'leaflet-canvas-markers'
import './components/plugin/Leaflet.GridLayer.FadeOut'
Vue.config.productionTip = false

Vue.use(ElementUI)