diff --git a/.env.development b/.env.development index 32b64ea..93f56fd 100644 --- a/.env.development +++ b/.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 diff --git a/src/assets/styles/leaflet.scss b/src/assets/styles/leaflet.scss index ebc7834..049da04 100644 --- a/src/assets/styles/leaflet.scss +++ b/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 { - // -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 +// .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.ChineseTmsProviders.js b/src/utils/lib/leaflet.ChineseTmsProviders.js index ea5795e..8d34838 100644 --- a/src/utils/lib/leaflet.ChineseTmsProviders.js +++ b/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) { + // 创建一个用于绘图的 元素 + 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}", - }, - // 固定地址 - Normal2: { - Map: "//wprd03.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}", }, 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}", - 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: @@ -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) { diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue index 172ba69..030fcf9 100644 --- a/src/views/bigScreen/map/index.vue +++ b/src/views/bigScreen/map/index.vue @@ -288,46 +288,30 @@ export default { // } // ).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, - // }) + //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 - // .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.Normal.Map", { + maxZoom: 18, + minZoom: 5, + color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜 + }) + .addTo(this.globalMap); // L.tileLayer // .chinaProvider("GaoDe.Satellite.Annotion", { diff --git a/vue.config.js b/vue.config.js index f8c101e..be440ea 100644 --- a/vue.config.js +++ b/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, },