leaflet 底图

目前国内用的比较广泛的地图有：高德，百度，腾讯，天地图等，其他的还有一些，这里就不过多介绍了，今天只提供以上几种地图在leaflet中显示的方法。

目录

 一、天地图

二、高德地囤

 三、百度地图

 四、腾讯地图

leaflet 详解总目录：传送

 一、天地图

天地图常用的有3套底图：矢量底图，影像底图，地形底图。

// ter:地形底图标识 cta:地形标注标识;
// img:卫星底图标识 cia:卫星标注标识;
// vec:矢量底图标识 cva:矢量标注标识;
let layerType = '';//底图标识
let labelType = '';//标注标识
let tdtMapKey = '';//在天地图官网申请的key

var wMap = L.tileLayer(
        `https://t{s}.tianditu.gov.cn/DataServer?T=${layerType}_c&x={x}&y={y}&l={z}&tk=${tdtMapKey}`,
        {
          minZoom: 5,
          maxZoom: 21,
          maxNativeZoom: 17,
          minNativeZoom: 5,
          subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
          zoomOffset: 1,
          tileSize: 256,
        }
      )
      var lMap = L.tileLayer(
        `https://t{s}.tianditu.gov.cn/DataServer?T=${labelType}_c&x={x}&y={y}&l={z}&tk=${tdtMapKey}`,
        {
          subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
          transparent: true,
          zIndex: 3,
          zoomOffset: 1,
          minZoom: 5,
          maxZoom: 21,
          tileSize: 256,
        }
      )

天地图的矢量底图可以修改css改成夜间模式，给地图实例添加该css即可

filter: invert(100%) hue-rotate(180deg);
-webkit-filter: invert(100%) hue-rotate(180deg);

 注：天地图坐标系是4326的，在创建地图时要修改属性：crs为 L.CRS.EPSG4326

效果如下：1.矢量底图，2.矢量底图-暗黑模式，3.卫星影像底图，4.地形底图

二、高德地囤

 高德地图有2套底图：矢量底图，卫星底图

let wMap = L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=10&x={x}&y={y}&z={z}',{
        subdomains: [1, 2, 3, 4]
      })
      let lMap = L.tileLayer(
        `https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&size=1&scale=1&style=8&lang=zh_cn`,
        {
          subdomains: [1, 2, 3, 4],
          zIndex: 3,
        }
      );

高德底图在使用卫星底图时要添加标注底图，各底图之间是根据URL中的style这个字段来区分的：6：卫星底图，7：基础底图，8：标识，线路底图，9：比8多了生态水系等标识的底图，10：比9少了部分标识，但是比8多，具体的大家根据自己需求再去好好研究一下。

效果如下：

 注：高德地图是L.CRS.EPSG3857，leaflet默认值无需修改

 三、百度地图

百度地图提供多套底图：矢量底图，卫星底图，实时路况等

自定义百度地图坐标系

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 () {
            var 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]),
        }
      );

注：自定义百度坐标系需要用到：proj4 和 proj4leaflet 这两个插件

安装：

npm install proj4
npm install proj4leaflet

 或者在html中引入

<script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.8.0/proj4.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>

 不管是安装或者引入，这两个插件引入时机一定要在leaflet之后

 添加方法和天地图，高德等一样

//矢量图层
let wMap = L.tileLayer(
        "https://maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2",
        {
          subdomains: [0, 1, 2, 3],
          tms:true
        }
      );
//卫星影像图层
      let wxMap = L.tileLayer(
        "http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
        {
          subdomains: [0, 1, 2, 3,4,5,6,7,8,9],
          tms:true
        }
      );
//标注，路网图层
      let dMap = L.tileLayer(
        "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020",
        {
          subdomains: [0, 1, 2, 3,4,5,6,7,8,9],
          tms:true
        }
      );
//实时路况图层
      let time = new Date().getTime()
      let sMap = L.tileLayer(
        `http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=${time}&label=web2D&v=017`,
        {
          tms:true
        }
      );

 效果如下：1：矢量图层，2：卫星和标注结合图层，3：实时路况图层，4：实时路况和矢量结合图层

 四、腾讯地图

因腾讯地图采用火星坐标系GCJ02，所以在leaflet中叠加使用要进行纠偏。

腾讯地图有多套底图：矢量底图，地形底图，卫星底图，暗黑矢量底图等等

//这里重写一个加载腾讯地图的方法
L.TileLayer.TencentTileLayer = L.TileLayer.extend({
        getTileUrl: function (tilePoint) {
          let urlArgs,
            getUrlArgs = this.options.getUrlArgs;
          if (getUrlArgs) {
            urlArgs = getUrlArgs(tilePoint);
          } else {
            urlArgs = {
              z: tilePoint.z,
              x: tilePoint.x,
              y: tilePoint.y,
            };
          }
          return L.Util.template(this._url,L.extend(urlArgs,this.options,{s: this._getSubdomain(tilePoint)}))
        },
      });
      L.tileLayer.tencentTileLayer = function(url,options){
        return new L.TileLayer.TencentTileLayer(url,options)
      }

使用以上添加图层的方法添加在线瓦片地址和参数即可：

//电子底图
let wMap = L.tileLayer.tencentTileLayer(
        "https://rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={ry}&type=vector&styleid=1",
        {
          subdomains: [1, 2, 3, 0],
          getUrlArgs: (o) => {
            return {
              x: o.x,
              ry: (1 << o.z) - o.y - 1,
              z: o.z,
            };
          },
        }
      );
//卫星底图
      let wxMap = L.tileLayer.tencentTileLayer(
        "https://p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{ry}.jpg",
        {
          getUrlArgs: (o) => {
            return {
              x: o.x,
              ry: (1 << o.z) - o.y - 1,
              z: o.z,
              sx: o.x >> 4,
              sy: ((1 << o.z) - o.y - 1) >> 4,
            };
          },
          subdomains: [1, 2, 3, 0],
        }
      );
//地形底图
      let dxMap = L.tileLayer.tencentTileLayer(
        "https://p{s}.map.gtimg.com/demTiles/{z}/{sx}/{sy}/{x}_{ry}.jpg",
        {
          subdomains: [1, 2, 3, 0],
          getUrlArgs: (o) => {
            return {
              x: o.x,
              ry: (1 << o.z) - o.y - 1,
              z: o.z,
              sx: o.x >> 4,
              sy: ((1 << o.z) - o.y - 1) >> 4,
            };
          },
        }
      );

卫星底图和地形底图没什么好说的，主要说一下电子地图：

styleid：地图类型参数：1.电子地图；2：路网和标注（此时图层最大级别为15，要修改maxNativeZoom）；3：电子地图 + 路网+标注等；4：暗黑电子地图；还有其他值，有需要的时候可以自行尝试。

效果如下：

leaflet添加地图作为底图，目前就写这4种了，其他小众地图大家可以自行研究！