滤镜

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;
 }

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);
+})();

src/utils/lib/leaflet.ChineseTmsProviders.js

@@ -3,230 +3,225 @@
 
 if (L.Proj) {
   L.CRS.Baidu = new L.Proj.CRS(
-    'EPSG:900913',
+    "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',
+    "+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() {
+      resolutions: (function () {
-        const level = 24
+        const level = 24;
-        var res = []
+        var res = [];
-        res[0] = Math.pow(2, 18)
+        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) {
+L.tileLayer.baidu = function (option) {
-  option = option || {}
+  option = option || {};
 
-  var layer
+  var layer;
-  var subdomains = '0123456789'
+  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=' +
+        "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=" +
-          (option.bigfont ? 'ph' : 'pl') +
+          (option.bigfont ? "ph" : "pl") +
-          '&scaler=2&p=1',
+          "&scaler=2&p=1",
         {
           name: option.name,
           subdomains: subdomains,
-          tms: true
+          tms: true,
         }
-      )
+      );
-      break
+      break;
-    case 'img_d':
+    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
+      break;
-    case 'img_z':
+    case "img_z":
       layer = L.tileLayer(
-        'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' +
+        "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=" +
-          (option.bigfont ? 'sh' : 'sl') +
+          (option.bigfont ? "sh" : "sl") +
-          '&v=020&scaler=2&p=1',
+          "&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',
+          subdomains: "012",
-          tms: true
+          tms: true,
         }
-      )
+      );
-      break
+      break;
 
-    case 'time': //实时路况
+    case "time": //实时路况
-      var time = new Date().getTime()
+      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: '底图',
+          name: "底图",
-          layer: 'img_d',
+          layer: "img_d",
-          bigfont: option.bigfont
+          bigfont: option.bigfont,
         }),
         L.tileLayer.baidu({
-          name: '注记',
+          name: "注记",
-          layer: 'img_z',
+          layer: "img_z",
-          bigfont: option.bigfont
+          bigfont: option.bigfont,
-        })
+        }),
-      ])
+      ]);
-      break
+      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 providerName = parts[0];
-    var mapName = parts[1]
+    var mapName = parts[1];
-    var mapType = parts[2]
+    var mapType = parts[2];
 
-    var url = providers[providerName][mapName][mapType]
+    var url = providers[providerName][mapName][mapType];
-    options.subdomains = providers[providerName].Subdomains
+    options.subdomains = providers[providerName].Subdomains;
-    options.key = options.key || providers[providerName].key
+    options.key = options.key || providers[providerName].key;
 
-    if ('tms' in providers[providerName]) {
+    if ("tms" in providers[providerName]) {
-      options.tms = providers[providerName]['tms']
+      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:
+      Map: "//t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
-        '//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:
+      Map: "//t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
-        '//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:
+      Map: "//t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
-        '//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'],
+    Subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
-    key: '174705aebfe31b79b3587279e211cb9a'
+    key: "174705aebfe31b79b3587279e211cb9a",
   },
 
   GaoDe: {
     Normal: {
-      Map:
+      Map: "//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
-        '//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}',
+      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}'
+      Annotion: "//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}",
     },
-    Subdomains: []
+    Subdomains: [],
   },
 
   Geoq: {
     Normal: {
-      Map:
+      Map: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
-        '//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}',
+        "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
-      Gray:
+      Gray: "//map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
-        '//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}",
-      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:
+      Map: "//maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2",
-        '//maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2'
     },
     Satellite: {
-      Map:
+      Map: "//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
-        '//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'],
+    Subdomains: ["0", "1", "2"],
-    tms: true
+    tms: true,
-  }
+  },
-}
+};
 
-L.tileLayer.chinaProvider = function(type, options) {
+L.tileLayer.chinaProvider = function (type, options) {
-  return new L.TileLayer.ChinaProvider(type, options)
+  return new L.TileLayer.ChinaProvider(type, options);
-}
+};

src/views/bigScreen/map/index.vue

@@ -162,12 +162,13 @@
 <script>
 import L from "leaflet";
 //引入坐标系转换插件
-// import 'proj4'
+// import "proj4";
-// import 'proj4leaflet'
+// 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(
+      // this.basemap = L.tileLayer(
-        "https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
+      //   "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: 9,
+            minZoom: 3,
-          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
+            colorize: function (pixel) {
+              // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
+              pixel.r += 30;
+              pixel.g += 30;
+              pixel.b += 48;
+              return pixel;
+            },
           }
-      );
+        )
-      this.globalMap.addLayer(this.basemap);
+        .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

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,
   },