From 95ff3cadc7685f6470a0d6c78429dbfd5b1451d9 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 08 三月 2021 17:53:30 +0800
Subject: [PATCH] 天地图瓦片切换增加淡入淡出效果
---
src/conf/TDT.js | 4 +-
src/main.js | 1
src/components/LayerController/modules/LcBaseMap.vue | 10 ++++
src/conf/MapConfig.js | 1
src/components/plugin/Leaflet.GridLayer.FadeOut.js | 76 ++++++++++++++++++++++++++++++++++++++
src/components/helpers/BasemapHelper.js | 19 +++++++--
6 files changed, 104 insertions(+), 7 deletions(-)
diff --git a/src/components/LayerController/modules/LcBaseMap.vue b/src/components/LayerController/modules/LcBaseMap.vue
index e5af6f2..3afc8d8 100644
--- a/src/components/LayerController/modules/LcBaseMap.vue
+++ b/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) {
- this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
+ 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()
})
diff --git a/src/components/helpers/BasemapHelper.js b/src/components/helpers/BasemapHelper.js
index 9b29e4e..d17a606 100644
--- a/src/components/helpers/BasemapHelper.js
+++ b/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()
}
- this.basemapLayerGroup.addLayer(basemap.layer)
- if (showAnnotation) {
- this.basemapLayerGroup.addLayer(basemap.annotation)
- }
+ 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)
}
/**
diff --git a/src/components/plugin/Leaflet.GridLayer.FadeOut.js b/src/components/plugin/Leaflet.GridLayer.FadeOut.js
new file mode 100644
index 0000000..be038a2
--- /dev/null
+++ b/src/components/plugin/Leaflet.GridLayer.FadeOut.js
@@ -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)
+ }
+
+ })
+})()
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 4512d66..8e502d3 100644
--- a/src/conf/MapConfig.js
+++ b/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 } // 姹￠洦姘村浘灞傞厤缃�
diff --git a/src/conf/TDT.js b/src/conf/TDT.js
index 1c5ad9e..0c5b418 100644
--- a/src/conf/TDT.js
+++ b/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',
diff --git a/src/main.js b/src/main.js
index 95591a3..28cfbd5 100644
--- a/src/main.js
+++ b/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)
--
Gitblit v1.8.0