滤镜

.env.development

@@ -1,3 +1,10 @@
+###
+ # @Author: 张涛
+ # @Date: 2023-11-09 18:29:41
+ # @LastEditors: 张涛
+ # @LastEditTime: 2023-11-29 13:55:47
+ # @FilePath: \JiangningUrbanManagePc\.env.development
+### 
 # 页面标题
 VUE_APP_TITLE = 城市精细化管理监测主题
 
@@ -6,7 +13,7 @@ ENV = 'development'
 
 # 若依管理系统/开发环境
 # /dev-api
-VUE_APP_BASE_API = 'http://39.101.188.84:9029'
+VUE_APP_BASE_API = 'http://39.101.188.84:9037'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/assets/styles/leaflet.scss

@@ -422,10 +422,10 @@
   // 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 {
+// .leaflet-zoom-animated img {
-  //   -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
+//   -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;
+//   -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;
+//   -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(10deg) sepia(100%) !important;
-  filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(195deg) !important;
+// filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(195deg) !important;
-}
+// }

src/utils/lib/leaflet.ChineseTmsProviders.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 // this L.CRS.Baidu from https://github.com/muyao1987/leaflet-tileLayer-baidugaode/blob/master/src/tileLayer.baidu.js
 
 if (L.Proj) {
@@ -7,7 +6,7 @@ if (L.Proj) {
     "+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 level = 19;
         var res = [];
         res[0] = Math.pow(2, 18);
         for (var i = 1; i < level; i++) {
@@ -21,98 +20,6 @@ if (L.Proj) {
   );
 }
 
-L.tileLayer.baidu = function (option) {
-  option = option || {};
-
-  var layer;
-  var subdomains = "0123456789";
-  switch (option.layer) {
-    //单图层
-    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",
-        {
-          name: option.name,
-          subdomains: subdomains,
-          tms: true,
-        }
-      );
-      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",
-        {
-          name: option.name,
-          subdomains: subdomains,
-          tms: true,
-        }
-      );
-      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",
-        {
-          name: option.name,
-          subdomains: subdomains,
-          tms: true,
-        }
-      );
-      break;
-
-    case "custom": //Custom 各种自定义样式
-      //可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
-      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=" +
-          option.customid,
-        {
-          name: option.name,
-          subdomains: "012",
-          tms: true,
-        }
-      );
-      break;
-
-    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=" +
-          time +
-          "&label=web2D&v=017",
-        {
-          name: option.name,
-          subdomains: subdomains,
-          tms: true,
-        }
-      );
-      break;
-
-    //合并
-    case "img":
-      layer = L.layerGroup([
-        L.tileLayer.baidu({
-          name: "底图",
-          layer: "img_d",
-          bigfont: option.bigfont,
-        }),
-        L.tileLayer.baidu({
-          name: "注记",
-          layer: "img_z",
-          bigfont: option.bigfont,
-        }),
-      ]);
-      break;
-  }
-  return layer;
-};
-
 L.TileLayer.ChinaProvider = L.TileLayer.extend({
   initialize: function (type, options) {
     // (type, Object)
@@ -136,6 +43,91 @@ L.TileLayer.ChinaProvider = L.TileLayer.extend({
 
     L.TileLayer.prototype.initialize.call(this, url, options);
   },
+
+  getTileUrl: function (coords) {
+    var data = {
+      s: this._getSubdomain(coords),
+      x: coords.x,
+      y: coords.y,
+      z: this._getZoomForUrl(),
+    };
+    if (this._map && !this._map.options.crs.infinite) {
+      var invertedY = this._globalTileRange.max.y - coords.y;
+      if (this.options.tms) {
+        data["y"] = invertedY;
+      }
+      data["-y"] = invertedY;
+    }
+
+    data.sx = data.x >> 4;
+    data.sy = ((1 << data.z) - data.y) >> 4;
+
+    return L.Util.template(this._url, L.Util.extend(data, this.options));
+  },
+
+  createTile: function (coords) {
+    // 创建一个用于绘图的 <canvas> 元素
+    var tile = L.DomUtil.create("canvas", "leaflet-tile");
+
+    // 根据选项设置瓦片的宽度和高度
+    var size = this.getTileSize();
+    tile.width = size.x;
+    tile.height = size.y;
+
+    // 获得一个 canvas 上下文，并使用 coords.x、coords.y 和 coords.z 在上面画东西
+    var ctx = tile.getContext("2d");
+
+    // 使用传入的 URL 模板替换变量
+    var url = this._url
+      .replace("{s}", this._getSubdomain(coords))
+      .replace("{x}", coords.x)
+      .replace("{y}", coords.y)
+      .replace("{z}", this._getZoomForUrl());
+
+    // 创建一个图像对象来加载瓦片
+    var img = new Image();
+
+    img.src = url; // 替换为你的图片路径
+    img.setAttribute("crossOrigin", "anonymous");
+
+    /**获取外部接受的颜色*/
+    var color = this.options.color;
+
+    // 当图片加载完成后，绘制到 Canvas 上
+    img.onload = function () {
+      // 绘制图片到 Canvas 上
+      ctx.drawImage(img, 0, 0, tile.width, tile.height);
+
+      if (color) {
+        // 获取图像的像素数据
+        var imageData = ctx.getImageData(0, 0, tile.width, tile.height);
+        // 获取原来的图片的像素颜色
+        var pixels = imageData.data;
+        for (let i = 0; i < pixels.length; i += 4) {
+          const r = pixels[i],
+            g = pixels[i + 1],
+            b = pixels[i + 2],
+            a = pixels[i + 3];
+          //计算灰度
+          var grayVal = (r + g + b) / 3;
+          //灰度反转--会使图片整体变成灰色--方便上色
+          grayVal = 255 - grayVal;
+          //将灰度替换掉原始的颜色
+          pixels[i] = grayVal + color.r;
+          pixels[i + 1] = grayVal + color.g;
+          pixels[i + 2] = grayVal + color.b;
+          //设置一个前景透明度，以便和背景混合
+          if (color.a) {
+            pixels[i + 3] = a * color.a;
+          }
+        }
+        // 将修改后的像素数据放回 Canvas
+        ctx.putImageData(imageData, 0, 0);
+      }
+    };
+    // 返回瓦片，以便在屏幕上呈现
+    return tile;
+  },
 });
 
 L.TileLayer.ChinaProvider.providers = {
@@ -161,16 +153,12 @@ L.TileLayer.ChinaProvider.providers = {
 
   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: "https://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: "https://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}",
+        "https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
     },
     Subdomains: ["1", "2", "3", "4"],
   },
@@ -188,11 +176,11 @@ L.TileLayer.ChinaProvider.providers = {
 
   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}",
+        "//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}",
+      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}",
+      Warm: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
     },
     Theme: {
       Hydro:
@@ -210,16 +198,29 @@ L.TileLayer.ChinaProvider.providers = {
 
   Baidu: {
     Normal: {
-      Map: "//maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2",
+      Map: "//online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
     },
     Satellite: {
       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",
+        "//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020",
     },
-    Subdomains: ["0", "1", "2"],
+    Subdomains: "0123456789",
     tms: true,
   },
+
+  Tencent: {
+    Normal: {
+      Map: "//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={-y}&type=vector&styleid=3",
+    },
+    Satellite: {
+      Map: "//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg",
+    },
+    Terrain: {
+      Map: "//p{s}.map.gtimg.com/demTiles/{z}/{sx}/{sy}/{x}_{-y}.jpg",
+    },
+    Subdomains: "0123",
+  },
 };
 
 L.tileLayer.chinaProvider = function (type, options) {

src/views/bigScreen/map/index.vue

@@ -288,46 +288,30 @@ export default {
       //   }
       // ).addTo(this.globalMap);
 
-      L.tileLayer
+      //L.tileLayer
-        .colorizr(
+      // .colorizr(
-          "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+      //   "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
-          {
+      //   {
-            maxZoom: 18,
+      //    maxZoom: 18,
-            minZoom: 3,
+      //    minZoom: 3,
-            colorize: function (pixel) {
+      //   colorize: function (pixel) {
-              // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
+      // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
-              pixel.r += 30;
+      //    pixel.r += 30;
-              pixel.g += 30;
+      //     pixel.g += 30;
-              pixel.b += 48;
+      //      pixel.b += 48;
-              return pixel;
+      //     return pixel;
-            },
+      //   },
-          }
+      //   }
-        )
+      //    )
-        .addTo(this.globalMap);
-
-      // L.tileLayer
-      //   .chinaProvider("GaoDe.Normal.Map", {
-      //     maxZoom: 18,
-      //     minZoom: 5,
-      //   })
       //   .addTo(this.globalMap);
 
-      // L.tileLayer
+      L.tileLayer
-      //   .colorizr(
+        .chinaProvider("GaoDe.Normal.Map", {
-      //     "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: 5,
-      //       maxZoom: 18,
+          color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
-      //       minZoom: 3,
+        })
-      //       colorize: function (pixel) {
+        .addTo(this.globalMap);
-      //         // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
-      //         pixel.r += 13;
-      //         pixel.g += 17;
-      //         pixel.b += 90;
-      //         return pixel;
-      //       },
-      //     }
-      //   )
-      //   .addTo(this.globalMap);
 
       // L.tileLayer
       //   .chinaProvider("GaoDe.Satellite.Annotion", {

vue.config.js

@@ -48,13 +48,6 @@ module.exports = {
           ["^" + process.env.VUE_APP_BASE_API]: "",
         },
       },
-      "/appmaptile": {
-        target: "https://wprd03.is.autonavi.com",
-        changeOrigin: true,
-        pathRewrite: {
-          "^/appmaptile": "/appmaptile",
-        },
-      },
     },
     disableHostCheck: true,
   },