From 8def26f4743d03740001fbd59a84d0ed38b62635 Mon Sep 17 00:00:00 2001
From: laozt <2721205210@qq.com>
Date: Tue, 28 Nov 2023 17:11:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=A4=E9=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/3.png                      | Bin 0 -> 3355 bytes
 src/assets/styles/leaflet.scss               |  10 +-
 src/utils/lib/leaflet-tilelayer-colorizr.js  | 115 ++++++++++
 src/utils/lib/leaflet.ChineseTmsProviders.js | 229 +++++++++----------
 src/views/bigScreen/map/index.vue            |  96 ++++++--
 vue.config.js                                |   8 +-
 6 files changed, 324 insertions(+), 134 deletions(-)
 create mode 100644 src/assets/images/3.png
 create mode 100644 src/utils/lib/leaflet-tilelayer-colorizr.js

diff --git a/src/assets/images/3.png b/src/assets/images/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a90550100194d39b315afd60a7ca206e5e03dc89
GIT binary patch
literal 3355
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

literal 0
HcmV?d00001

diff --git a/src/assets/styles/leaflet.scss b/src/assets/styles/leaflet.scss
index dc6c6d9..ebc7834 100644
--- a/src/assets/styles/leaflet.scss
+++ b/src/assets/styles/leaflet.scss
@@ -420,8 +420,12 @@
   letter-spacing: 2px;
   white-space: nowrap;
   // filter: drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.75px rgba(0, 0, 0, 0.5));
+}
 
-
-
-
+.leaflet-zoom-animated img {
+  //   -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+  //   -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+  //   -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+  // filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(10deg) sepia(100%) !important;
+  filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(195deg) !important;
 }
\ No newline at end of file
diff --git a/src/utils/lib/leaflet-tilelayer-colorizr.js b/src/utils/lib/leaflet-tilelayer-colorizr.js
new file mode 100644
index 0000000..0fce0e5
--- /dev/null
+++ b/src/utils/lib/leaflet-tilelayer-colorizr.js
@@ -0,0 +1,115 @@
+/*
+ * L.TileLayer.Colorizr is a regular tilelayer with mapped colors.
+ */
+(function () {
+  // L.TileLayer.Colorizr =
+  var Colorizr = L.TileLayer.extend({
+    initialize: function (url, options) {
+      options = L.extend(
+        {},
+        L.TileLayer.prototype.options,
+        {
+          colorize: function (pixel) {
+            return pixel;
+          },
+          crossOrigin: "Anonymous",
+        },
+        options
+      );
+      L.TileLayer.prototype.initialize.call(this, url, options);
+      L.setOptions(this, options);
+      this.setColorizr(this.options.colorize);
+      this.on("tileload", function (e) {
+        this._colorize(e.tile);
+      });
+    },
+    setColorizr: function (colorizrFactory) {
+      if (!colorizrFactory || typeof colorizrFactory !== "function") {
+        throw (
+          'The colorize option should be a function and return an object with at least one of "r", "g", "b", or "a" properties. Got:' +
+          typeof colorizrFactory
+        );
+      } else {
+        this.options.colorize = colorizrFactory;
+      }
+      this.redraw(false);
+    },
+    _createTile: function () {
+      var tile = L.TileLayer.prototype._createTile.call(this);
+      tile.crossOrigin = "Anonymous";
+      return tile;
+    },
+    _colorize: function (img) {
+      if (img.getAttribute("data-colorized")) {
+        img.hidden = false;
+        return;
+      } else {
+        img.hidden = true;
+      }
+      var _img = img;
+      var img = new Image();
+      img.crossOrigin = "Anonymous";
+      img.src = _img.src;
+      var _this = this;
+      img.onload = function () {
+        var canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        var ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        var pix = imgd.data;
+        for (var i = 0, n = pix.length; i < n; i += 4) {
+          var pixel = _this.options.colorize({
+            r: pix[i],
+            g: pix[i + 1],
+            b: pix[i + 2],
+            a: pix[i + 3],
+          });
+          if (
+            !!!pixel ||
+            pixel !== Object(pixel) ||
+            Object.prototype.toString.call(pixel) === "[object Array]"
+          ) {
+            if (i === 0) {
+              throw 'The colorize option should return an object with at least one of "r", "g", "b", or "a" properties.';
+            }
+          } else {
+            if (pixel.hasOwnProperty("r") && typeof pixel.r === "number") {
+              pix[i] = pixel.r;
+            }
+            if (pixel.hasOwnProperty("g")) {
+              pix[i + 1] = pixel.g;
+            }
+            if (pixel.hasOwnProperty("b")) {
+              pix[i + 2] = pixel.b;
+            }
+            if (pixel.hasOwnProperty("a")) {
+              pix[i + 3] = pixel.a;
+            }
+          }
+        }
+        ctx.putImageData(imgd, 0, 0);
+        _img.setAttribute("data-colorized", true);
+        _img.src = canvas.toDataURL();
+      };
+    },
+  });
+  (function (factory, window) {
+    // define an AMD module that relies on 'leaflet'
+    if (typeof define === "function" && define.amd) {
+      define(["leaflet"], factory);
+      // define a Common JS module that relies on 'leaflet'
+    } else if (typeof exports === "object") {
+      module.exports = factory(require("leaflet"));
+    }
+    // attach your plugin to the global 'L' variable
+    if (typeof window !== "undefined" && window.L) {
+      window.L.tileLayer.colorizr = factory(L);
+    }
+  })(function (L) {
+    return function (url, options) {
+      return new Colorizr(url, options);
+    };
+  }, window);
+})();
diff --git a/src/utils/lib/leaflet.ChineseTmsProviders.js b/src/utils/lib/leaflet.ChineseTmsProviders.js
index 8a535b0..ea5795e 100644
--- a/src/utils/lib/leaflet.ChineseTmsProviders.js
+++ b/src/utils/lib/leaflet.ChineseTmsProviders.js
@@ -3,230 +3,225 @@
 
 if (L.Proj) {
   L.CRS.Baidu = new L.Proj.CRS(
-    'EPSG:900913',
-    '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
+    "EPSG:900913",
+    "+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",
     {
-      resolutions: (function() {
-        const level = 24
-        var res = []
-        res[0] = Math.pow(2, 18)
+      resolutions: (function () {
+        const level = 24;
+        var res = [];
+        res[0] = Math.pow(2, 18);
         for (var i = 1; i < level; i++) {
-          res[i] = Math.pow(2, 18 - i)
+          res[i] = Math.pow(2, 18 - i);
         }
-        return res
+        return res;
       })(),
       origin: [0, 0],
-      bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
+      bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
     }
-  )
+  );
 }
 
-L.tileLayer.baidu = function(option) {
-  option = option || {}
+L.tileLayer.baidu = function (option) {
+  option = option || {};
 
-  var layer
-  var subdomains = '0123456789'
+  var layer;
+  var subdomains = "0123456789";
   switch (option.layer) {
     //单图层
-    case 'vec':
+    case "vec":
     default:
       // http://maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2
       //'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&b=0&limit=60&scaler=1&udt=20170525'
       layer = L.tileLayer(
-        'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=' +
-          (option.bigfont ? 'ph' : 'pl') +
-          '&scaler=2&p=1',
+        "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=" +
+          (option.bigfont ? "ph" : "pl") +
+          "&scaler=2&p=1",
         {
           name: option.name,
           subdomains: subdomains,
-          tms: true
+          tms: true,
         }
-      )
-      break
-    case 'img_d':
+      );
+      break;
+    case "img_d":
       layer = L.tileLayer(
-        'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46&scaler=2&p=1',
+        "http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46&scaler=2&p=1",
         {
           name: option.name,
           subdomains: subdomains,
-          tms: true
+          tms: true,
         }
-      )
-      break
-    case 'img_z':
+      );
+      break;
+    case "img_z":
       layer = L.tileLayer(
-        'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' +
-          (option.bigfont ? 'sh' : 'sl') +
-          '&v=020&scaler=2&p=1',
+        "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=" +
+          (option.bigfont ? "sh" : "sl") +
+          "&v=020&scaler=2&p=1",
         {
           name: option.name,
           subdomains: subdomains,
-          tms: true
+          tms: true,
         }
-      )
-      break
+      );
+      break;
 
-    case 'custom': //Custom 各种自定义样式
+    case "custom": //Custom 各种自定义样式
       //可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
-      option.customid = option.customid || 'midnight'
+      option.customid = option.customid || "midnight";
       layer = L.tileLayer(
-        'http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=' +
+        "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=" +
           option.customid,
         {
           name: option.name,
-          subdomains: '012',
-          tms: true
+          subdomains: "012",
+          tms: true,
         }
-      )
-      break
+      );
+      break;
 
-    case 'time': //实时路况
-      var time = new Date().getTime()
+    case "time": //实时路况
+      var time = new Date().getTime();
       layer = L.tileLayer(
-        'http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' +
+        "http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=" +
           time +
-          '&label=web2D&v=017',
+          "&label=web2D&v=017",
         {
           name: option.name,
           subdomains: subdomains,
-          tms: true
+          tms: true,
         }
-      )
-      break
+      );
+      break;
 
     //合并
-    case 'img':
+    case "img":
       layer = L.layerGroup([
         L.tileLayer.baidu({
-          name: '底图',
-          layer: 'img_d',
-          bigfont: option.bigfont
+          name: "底图",
+          layer: "img_d",
+          bigfont: option.bigfont,
         }),
         L.tileLayer.baidu({
-          name: '注记',
-          layer: 'img_z',
-          bigfont: option.bigfont
-        })
-      ])
-      break
+          name: "注记",
+          layer: "img_z",
+          bigfont: option.bigfont,
+        }),
+      ]);
+      break;
   }
-  return layer
-}
+  return layer;
+};
 
 L.TileLayer.ChinaProvider = L.TileLayer.extend({
-  initialize: function(type, options) {
+  initialize: function (type, options) {
     // (type, Object)
-    var providers = L.TileLayer.ChinaProvider.providers
+    var providers = L.TileLayer.ChinaProvider.providers;
 
-    options = options || {}
+    options = options || {};
 
-    var parts = type.split('.')
+    var parts = type.split(".");
 
-    var providerName = parts[0]
-    var mapName = parts[1]
-    var mapType = parts[2]
+    var providerName = parts[0];
+    var mapName = parts[1];
+    var mapType = parts[2];
 
-    var url = providers[providerName][mapName][mapType]
-    options.subdomains = providers[providerName].Subdomains
-    options.key = options.key || providers[providerName].key
+    var url = providers[providerName][mapName][mapType];
+    options.subdomains = providers[providerName].Subdomains;
+    options.key = options.key || providers[providerName].key;
 
-    if ('tms' in providers[providerName]) {
-      options.tms = providers[providerName]['tms']
+    if ("tms" in providers[providerName]) {
+      options.tms = providers[providerName]["tms"];
     }
 
-    L.TileLayer.prototype.initialize.call(this, url, options)
-  }
-})
+    L.TileLayer.prototype.initialize.call(this, url, options);
+  },
+});
 
 L.TileLayer.ChinaProvider.providers = {
   TianDiTu: {
     Normal: {
-      Map:
-        '//t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}',
+      Map: "//t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
       Annotion:
-        '//t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}'
+        "//t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}",
     },
     Satellite: {
-      Map:
-        '//t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}',
+      Map: "//t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
       Annotion:
-        '//t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}'
+        "//t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}",
     },
     Terrain: {
-      Map:
-        '//t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}',
+      Map: "//t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
       Annotion:
-        '//t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}'
+        "//t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}",
     },
-    Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
-    key: '174705aebfe31b79b3587279e211cb9a'
+    Subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
+    key: "174705aebfe31b79b3587279e211cb9a",
   },
 
   GaoDe: {
     Normal: {
-      Map:
-        '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+      Map: "//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+    },
+    // 固定地址
+    Normal2: {
+      Map: "//wprd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
     },
     Satellite: {
-      Map: '//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+      Map: "//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
       Annotion:
-        '//webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
+        "//webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
     },
-    Subdomains: ['1', '2', '3', '4']
+    Subdomains: ["1", "2", "3", "4"],
   },
 
   Google: {
     Normal: {
-      Map: '//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
+      Map: "//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}",
     },
     Satellite: {
-      Map: '//www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
-      Annotion: '//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}'
+      Map: "//www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
+      Annotion: "//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}",
     },
-    Subdomains: []
+    Subdomains: [],
   },
 
   Geoq: {
     Normal: {
-      Map:
-        '//map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
+      Map: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
       PurplishBlue:
-        '//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
-      Gray:
-        '//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}',
-      Warm:
-        '//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}'
+        "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+      Gray: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
+      Warm: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
     },
     Theme: {
       Hydro:
-        '//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}'
+        "//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}",
     },
-    Subdomains: []
+    Subdomains: [],
   },
 
   OSM: {
     Normal: {
-      Map: '//{s}.tile.osm.org/{z}/{x}/{y}.png'
+      Map: "//{s}.tile.osm.org/{z}/{x}/{y}.png",
     },
-    Subdomains: ['a', 'b', 'c']
+    Subdomains: ["a", "b", "c"],
   },
 
   Baidu: {
     Normal: {
-      Map:
-        '//maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2'
+      Map: "//maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2",
     },
     Satellite: {
-      Map:
-        '//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
+      Map: "//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
       Annotion:
-        '//shangetu{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020&scaler=2'
+        "//shangetu{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020&scaler=2",
     },
-    Subdomains: ['0', '1', '2'],
-    tms: true
-  }
-}
+    Subdomains: ["0", "1", "2"],
+    tms: true,
+  },
+};
 
-L.tileLayer.chinaProvider = function(type, options) {
-  return new L.TileLayer.ChinaProvider(type, options)
-}
+L.tileLayer.chinaProvider = function (type, options) {
+  return new L.TileLayer.ChinaProvider(type, options);
+};
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index 3dee8ba..172ba69 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -162,12 +162,13 @@
 <script>
 import L from "leaflet";
 //引入坐标系转换插件
-// import 'proj4'
-// import 'proj4leaflet'
+// import "proj4";
+// import "proj4leaflet";
 //引入中国底图插件
-// import '@/utils/lib/leaflet.ChineseTmsProviders.js'
+import "@/utils/lib/leaflet.ChineseTmsProviders.js";
 //引入坐标系偏移插件
-// import '@/utils/lib/leaflet.mapCorrection.min.js'
+// import "@/utils/lib/leaflet.mapCorrection.min.js";//
+import "@/utils/lib/leaflet-tilelayer-colorizr.js";
 // import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
 // import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
 // import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
@@ -265,18 +266,75 @@ export default {
         doubleClickZoom: false, // 双击放大
         scrollWheelZoom: true, // 滚轮放大
         dragging: true,
+        renderer: L.svg(),
       });
 
       // 电子底图/百度
-      this.basemap = L.tileLayer(
-        "https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
-        {
-          maxZoom: 18,
-          minZoom: 9,
-          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
-        }
-      );
-      this.globalMap.addLayer(this.basemap);
+      // this.basemap = L.tileLayer(
+      //   "https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
+      //   {
+      //     maxZoom: 18,
+      //     minZoom: 9,
+      //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
+      //   }
+      // ).addTo(this.globalMap);
+
+      // this.basemap = L.tileLayer(
+      //   "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+      //   {
+      //     maxZoom: 18,
+      //     minZoom: 9,
+      //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
+      //   }
+      // ).addTo(this.globalMap);
+
+      L.tileLayer
+        .colorizr(
+          "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+          {
+            maxZoom: 18,
+            minZoom: 3,
+            colorize: function (pixel) {
+              // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
+              pixel.r += 30;
+              pixel.g += 30;
+              pixel.b += 48;
+              return pixel;
+            },
+          }
+        )
+        .addTo(this.globalMap);
+
+      // L.tileLayer
+      //   .chinaProvider("GaoDe.Normal.Map", {
+      //     maxZoom: 18,
+      //     minZoom: 5,
+      //   })
+      //   .addTo(this.globalMap);
+
+      // L.tileLayer
+      //   .colorizr(
+      //     "https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=40a9f830e2cba324771cd6bca2489434",
+      //     {
+      //       maxZoom: 18,
+      //       minZoom: 3,
+      //       colorize: function (pixel) {
+      //         // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
+      //         pixel.r += 13;
+      //         pixel.g += 17;
+      //         pixel.b += 90;
+      //         return pixel;
+      //       },
+      //     }
+      //   )
+      //   .addTo(this.globalMap);
+
+      // L.tileLayer
+      //   .chinaProvider("GaoDe.Satellite.Annotion", {
+      //     maxZoom: 18,
+      //     minZoom: 5,
+      //   })
+      //   .addTo(this.globalMap);
 
       this.globalMap.createPane("mapLayer1");
       this.globalMap.getPane("mapLayer1").style.zIndex = 501;
@@ -325,6 +383,9 @@ export default {
         let zoom = this.globalMap.getZoom();
         console.log("层级：", zoom);
       });
+      this.globalMap.on("click", (e) => {
+        console.log("click：", e);
+      });
       // this.addLayer2();
       this.addLayer1();
       this.addMark("执法人员");
@@ -336,6 +397,15 @@ export default {
       this.addLayer7();
 
       this.addLayer8();
+
+      // 定位点 118.797442,32.087219 南京站
+      L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
+        icon: L.icon({
+          iconUrl: require("../../../assets/images/3.png"),
+          iconSize: [38, 38],
+          iconAnchor: [22, 38],
+        }),
+      }).addTo(this.globalMap);
     },
     addLayer8() {
       // 加载geojson
diff --git a/vue.config.js b/vue.config.js
index c89ba36..f8c101e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,7 +18,6 @@ const postcss = px2rem({
   remUnit: 16,
 });
 
-
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
@@ -49,6 +48,13 @@ module.exports = {
           ["^" + process.env.VUE_APP_BASE_API]: "",
         },
       },
+      "/appmaptile": {
+        target: "https://wprd03.is.autonavi.com",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/appmaptile": "/appmaptile",
+        },
+      },
     },
     disableHostCheck: true,
   },