leafLet使用高德、百度、天地图的方式

清虚桂意

已于 2022-02-17 10:34:37 修改

阅读量1.8k

点赞数 2

分类专栏：地图文章标签：前端

于 2021-12-06 17:28:52 首次发布

本文链接：https://blog.csdn.net/weixin_45031595/article/details/121751742

版权

地图专栏收录该内容

8 篇文章 2 订阅

订阅专栏

参考文档

创建`mapProviders.js`文件

用于leafLet注入天地图等

/* eslint-disable */
L.TileLayer.ChinaProvider = L.TileLayer.extend({

  initialize: function (type, options) {
    var providers = L.TileLayer.ChinaProvider.providers

    var parts = type.split('.')

    var providerName = parts[0]
    var mapName = parts[1]
    var mapType = parts[2]

    var url = providers[providerName][mapName][mapType]
    options.subdomains = providers[providerName].Subdomains
    options.key = options.key || providers[providerName].key
    L.TileLayer.prototype.initialize.call(this, url, options)
  }
})

L.TileLayer.ChinaProvider.providers = {
  TianDiTu: {
    Normal: {
      Map: 'http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}',
      Annotion: 'http://t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}'
    },
    Satellite: {
      Map: 'http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}',
      Annotion: 'http://t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}'
    },
    Terrain: {
      Map: 'http://t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}',
      Annotion: 'http://t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}'
    },
    Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    key: ''
  },

  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: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
    },
    Satellite: {
      Map: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
    },
    Subdomains: []
  },

  Geoq: {
    Normal: {
      Map: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
      PurplishBlue: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
      Gray: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}',
      Warm: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}'
    },
    Theme: {
      Hydro: 'http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}'
    },
    Subdomains: []
  },

  OSM: {
    Normal: {
      Map: 'http://{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);
};

使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #map {
      height: 900px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
  <script src="./mapProviders.js"></script>
  <script>
    // 使用mapProviders.js文件的chinaProvider方法创建图层
    let baseLayer = L.layerGroup([
      // L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      //   key: "a4db2568e9e6387a9617bf06d7060971",
      //   maxZoom: 18
      // }),
      L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
        key: "e33bff145f017205e949052045b56087",
        maxZoom: 18
      }),
      L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
        key: "e33bff145f017205e949052045b56087",
        maxZoom: 18
      })
    ])

    let map = L.map('map', {
      center: [37.147593, 114.34845],
      zoom: 16,
      minZoom: 3,
      maxZoom: 18,
      zoomControl: false,
    })
    map.addLayer(baseLayer)
  </script>
</body>

</html>

清虚桂意

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
leafLet使用高德、百度、天地图的方式

创建mapProviders.js文件用于leafLet注入天地图等/* eslint-disable */L.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function (type, options) { var providers = L.TileLayer.ChinaProvider.providers var parts = type.split('.') var providerNa
复制链接

扫一扫