Leaflet加载百度地图开发示例 - 最新最全最详细

转载请注明出处：Leaflet加载百度地图开发示例 - 最新最全最详细

更多精彩文字，可关注【优吉斯】公众号 yougis或主页 yougis.com.cn

百度地图是国内使用最广泛的互联网地图之一，在web GIS开发中，有广泛的应用。但不同于谷歌、天地图、高德等互联网地图，百度地图的坐标系（百度09）、切片方式自成体系。本文详细介绍如何通过Leaflet加载百度地图，如使用其他JS SDK，参照本文的加载思路，进行相应修改即可。

Leaflet加载百度地图开发示例(/leaflet/load-baidu-map.html)

一、自定义百度坐标系

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;
            re = 18;
            var res = [];
            res[0] = Math.pow(2, re);
            for (var i = 1; i < level; i++) {
              res[i] = Math.pow(2, re - 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
            // });
            layer = L.tileLayer(
              "https://maponline0.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=20230105&from=jsapi2_0",
              {
                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;
          cas