关于百度地图无法单独调用午夜蓝地图图层的替代方案

        大家是否发现通过leaflet接入的百度地图，如果使用了非默认主题的地图图层，比如午夜蓝风格的地图，现在已经失效了，打开的图层是默认的图层。遥想当初，在2022.8时还一切正常的，却不知什么时候就失效了。一开始还以为是资源出了问题，查证发现并不是。于是去百度地图开发平台寻找答案，得到的答复是：您好，我们不支持单独去请求瓦片图数据的哈。我们对外提供的是浏览器地图服务，请基于浏览器地图产品JavaScript API合理调用地图展示服务。在线瓦片资源是为JavaScript API加载地图做支撑的，并不直接对外开放成服务使用。

        什么意思呢？我理解就是要用百度地图api才能调用，或者通过个性化编辑器去调用，现在不让直接通过链接去获取图层了。如果是通过百度地图api或者通过个性化编辑器去改造，官网文档写的很清晰，这里就不赘述了。因为项目这个地图需求采用的是leaflet接入百度地图开发的，想要以最小的改动代价来解决问题。所以这里说的解决方案也并不是改造，而是更换图层。

        因为整个UI设计是暗色调风格，所以我主要是寻找午夜风格的地图图层，在以为高德地图有类似图层然后发现也是基于api调用，找了多种网络解决方案多次改来改去一筹莫展的情况下，突然发现了一款地图有类似风格而且不需要通过api调用，改动部分如下：  

mounted () {
      this.chinaProviderLayerInit();
      this.mapInit();
},

methods: {
　　chinaProviderLayerInit () { // 接入ChinaProvider
        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', {
            resolutions: function () {
              let level = 19;
              let res = [];
              res[0] = Math.pow(2, 18);
              for (let i = 1; i < level; i++) {
                res[i] = Math.pow(2, (18 - i))
              }
              return res;
            }(),
            origin: [0, 0],
            bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
          });
        }
        L.TileLayer.ChinaProvider = L.TileLayer.extend({
          initialize: function(type, options) {
            let providers = L.TileLayer.ChinaProvider.providers;
            options = options || {}
            let parts = type.split('.');
            let providerName = parts[0];
            let mapName = parts[1];
            let mapType = parts[2];
            let 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']
            }
            L.TileLayer.prototype.initialize.call(this, url, options);
          }
        });
        L.TileLayer.ChinaProvider.providers = {
          TianDiTu: { // 天地图
            Normal: {
              Map: "https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
              Annotion: "https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
            },
            Satellite: {
              Map: "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
              Annotion: "https://t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
            },
            Terrain: {
              Map: "https://t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
              Annotion: "https://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: "xxxxxxxxxxxxxxxxx"
          },
          GaoDe: { // 高德地图
            Normal: {
              Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
            },
            Satellite: {
              Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
              Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
            },
            Subdomains: ["1", "2", "3", "4"]
          },
          Google: { // 谷歌地图
            Normal: {
              Map: "https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
            },
            Satellite: {
              Map: "https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
              Annotion: "https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
            },
            Subdomains: []
          },
          Geoq: { // 智图
            Normal: {
              Map: "https://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: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
              Warm: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
            },
            Theme: {
              Hydro: "https://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
            },
            Subdomains: []
          },
          OSM: { // 开源wiki地图
            Normal: {
              Map: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
            },
            Subdomains: ['a', 'b', 'c']
          },
          Baidu: { // 百度地图
            Normal: {
              Map: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1'
            },
            Satellite: {
              Map: 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
              Annotion: 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020'
            },
            Subdomains: '0123456789',
            tms: true
          }
        };
        L.tileLayer.chinaProvider = function(type, options) {
          return new L.TileLayer.ChinaProvider(type, options);
        };
    },
    mapInit () { // 地图初始化
        let options = {
          center: [37.550339,  104.114129],
          zoom: 4, // initial zoom of map
          minZoom: 4, // initial zoom of map
          zoomControl: false,
          attributionControl: false,
          layers: [new L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
            maxZoom: 18,
            minZoom: 3
          })]
        }
        this.map = L.map('mapdiv', options);
    }
}

        如此就解决了当前的图层问题，在下才疏学浅，没有实现leaflet+百度地图api调用的解决方案，如果有实现了的大神们可以传授一下，非常感谢！

 

      如需转载请注明出处：https://www.cnblogs.com/zishang91/p/17108361.html，以便有错误可以及时修改，若有错漏不足之处，请见谅并且指点，谢谢！！！