关于百度地图无法单独调用午夜蓝地图图层的替代方案
大家是否发现通过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，以便有错误可以及时修改，若有错漏不足之处，请见谅并且指点，谢谢！！！
