地图技术知识：leafLet使用高德、百度、天地图的方式

参考文档创建mapProviders.js文件用于leafLet注入天地图等/* eslint-disable */L.TileLayer.ChinaProviderL.TileLayer.extend({initialize:function(type,options){varprovidersL.TileLayer.ChinaProvider.providersvarpartstype.split(.)varproviderNameparts[0]varmapNameparts[1]varmapTypeparts[2]varurlproviders[providerName][mapName][mapType]options.subdomainsproviders[providerName].Subdomains options.keyoptions.key||providers[providerName].keyL.TileLayer.prototype.initialize.call(this,url,options)}})L.TileLayer.ChinaProvider.providers{TianDiTu:{Normal:{Map:http://t{s}.tianditu.com/DataServer?Tvec_wX{x}Y{y}L{z}tk{key},Annotion:http://t{s}.tianditu.com/DataServer?Tcva_wX{x}Y{y}L{z}tk{key}},Satellite:{Map:http://t{s}.tianditu.com/DataServer?Timg_wX{x}Y{y}L{z}tk{key},Annotion:http://t{s}.tianditu.com/DataServer?Tcia_wX{x}Y{y}L{z}tk{key}},Terrain:{Map:http://t{s}.tianditu.com/DataServer?Tter_wX{x}Y{y}L{z}tk{key},Annotion:http://t{s}.tianditu.com/DataServer?Tcta_wX{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?langzh_cnsize1scale1style8x{x}y{y}z{z}},Satellite:{Map:http://webst0{s}.is.autonavi.com/appmaptile?style6x{x}y{y}z{z},Annotion:http://webst0{s}.is.autonavi.com/appmaptile?style8x{x}y{y}z{z}},Subdomains:[1,2,3,4]},Google:{Normal:{Map:http://www.google.cn/maps/vt?lyrsm189glcnx{x}y{y}z{z}},Satellite:{Map:http://www.google.cn/maps/vt?lyrss189glcnx{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/?qttilex{x}y{y}z{z}stylesplscaler1p1},Satellite:{Map:http://shangetu{s}.map.bdimg.com/it/ux{x};y{y};z{z};v009;typesatefm46,Annotion:http://online{s}.map.bdimg.com/tile/?qttilex{x}y{y}z{z}stylesslv020},Subdomains:0123456789,tms:true}}L.tileLayer.chinaProviderfunction(type,options){returnnewL.TileLayer.ChinaProvider(type,options);};使用!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheethrefhttps://unpkg.com/leaflet1.0.1/dist/leaflet.css/style*{margin:0;padding:0;}#map{height:900px;}/style/headbodydiv idmap/divscript srchttps://unpkg.com/leaflet1.0.1/dist/leaflet.js/scriptscript src./mapProviders.js/scriptscript// 使用mapProviders.js文件的chinaProvider方法创建图层letbaseLayerL.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})])letmapL.map(map,{center:[37.147593,114.34845],zoom:16,minZoom:3,maxZoom:18,zoomControl:false,})map.addLayer(baseLayer)/script/body/html