地图技术知识:leafLet使用高德、百度、天地图的方式
2026/7/22 15:41:00 网站建设 项目流程

参考文档

创建mapProviders.js文件

用于leafLet注入天地图等

/* eslint-disable */L.TileLayer.ChinaProvider=L.TileLayer.extend({initialize:function(type,options){varproviders=L.TileLayer.ChinaProvider.providersvarparts=type.split('.')varproviderName=parts[0]varmapName=parts[1]varmapType=parts[2]varurl=providers[providerName][mapName][mapType]options.subdomains=providers[providerName].Subdomains options.key=options.key||providers[providerName].keyL.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){returnnewL.TileLayer.ChinaProvider(type,options);};

使用

<!DOCTYPEhtml><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方法创建图层letbaseLayer=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})])letmap=L.map('map',{center:[37.147593,114.34845],zoom:16,minZoom:3,maxZoom:18,zoomControl:false,})map.addLayer(baseLayer)</script></body></html>

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询