关于使用openlayers6和leaflet同时加载高德和百度的问题记录（leaflet篇）
先说leaflet,
leaflet 默认使用的坐标系是 EPSG:3857，百度地图：使用百度坐标系
高德地图：火星坐标系（GcJ02）
leaflet是默认支持GcJ02的，而且leaflet提供了这个插件L.tileLayer.chinaProvider ，可以引入高德、谷歌、天地图，不用经过转化。但是百度坐标就需要进行额外的转化:代码如下（本人只是个代码搬运工~~）
/**
* 百度地图底图调用插件
* @author 火星科技 木遥原创(qq:346819890)
*/
//请引入 proj4.js 和 proj4leaflet.js
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() {
level = 19;
var res = [];
res[0] = Math.pow(2, 18);
for (var 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.baidu = function(option) {
option = option || {};
var layer;
var subdomains = "0123456789";
switch (option.layer) {
//单图层
case "vec":
default:
//'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=1&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",
{
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",
{
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;
};
html中使用
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>地图</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- 加载百度地图使用插件 -->
<script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
<script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
<script src="./tileLayer.baidu.js"></script>
</head>
<body>
<div id="map" class="map">
</div>
<script type="text/javascript">
//注意将map的crs赋值 crs: L.CRS.Baidu 详情请阅读示例页面
var map = L.map('map', {
crs: L.CRS.Baidu,
minZoom: 3,
maxZoom: 18,
attributionControl: false,
center: [31.834912, 117.220102],
zoom: 12
});
//控制地图底图
L.control.layers({
"百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map),
"百度卫星": L.tileLayer.baidu({ layer: 'img' }),
"百度地图-大字体": L.tileLayer.baidu({ layer: 'vec', bigfont: true }),
"百度卫星-大字体": L.tileLayer.baidu({ layer: 'img', bigfont: true }),
"自定义样式-黑色地图": L.tileLayer.baidu({ layer: 'custom', customid: 'dark' }),
"自定义样式-蓝色地图": L.tileLayer.baidu({ layer: 'custom', customid: 'midnight' }) //自定义样式地图，customid可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
}, {
"实时交通信息": L.tileLayer.baidu({ layer: 'time' })
}, { position: "topright" }).addTo(map);
</script>
</body>
这样就实现了百度地图的加载
高德加载如下：
var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var map = L.map("map", {
crs: L.CRS.EPSG3857,//这里坐标系一定要改成3857的！！！
center: [31.59, 120.29],
zoom: 12,
layers: [Gaode],
zoomControl: false
});
总结一下：我本来是想在一个地图里面通过切换图层的方式切换高德和百度，但是由于坐标系的原因，我想到的方法是在进行图层切换的时候修改一下地图的坐标系，但是我翻阅了leaflet的文档没有找到动态修改CRS的方法，如果有哪位大神看到了这个帖子，如果可以实现同时切换高德和百度，请告知方法，感谢感谢。
下篇再更新openlayers加载百度图层的过程