上节实现了leaflet的小例子,节集成百度地图 1.由于所有地图的经纬度计算的规则不统一,所以需要引如两个js实现坐标转换 <script src="proj4-compressed.js"></script> <script src="proj4leaflet.js"></script> <script src="proj4.js"></script> 2.初始化地图 //初始化地图 $(document).ready(function () { var map = L.map('map', { crs: L.CRS.Baidu, minZoom: 3, maxZoom: 18, attributionControl: false, center: [31.834912, 117.220102], zoom: 12 }); 3.引入proj后对百度地图经纬度进行调整 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 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]) }); 4.你可以按照自己的意愿进行分层 实际上是通过tab页进行数据的隐藏和显示 var groups = { cities: new L.LayerGroup(), restaurants: new L.LayerGroup(), dogs: new L.LayerGroup(), cats: new L.LayerGroup() }; 新建数组,里面分别是希望分层的数据. 例 L.marker([44.75185, 123.47533]).bindPopup('Golden, CO.').addTo(groups.cities); var polygon = L.polygon([ [42.43967, 123.81592], [43.86622, 126.60645], [42.04929, 124.93652] ]).addTo(groups.restaurants); 将点和多边形放进两个分别不同的区域里 5.页面初始化实体 window.ExampleData = { LayerGroups: groups }; 6.如果单层地图跳过这部,多层地图进行如下操作进行地图合并以及切换. 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 }); 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; case "img_z": layer = L.tileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'sh' : 'sl') + '&v=020', { name: option.name, subdomains: subdomains, tms: true }); break; case "custom"://Custom 各种自定义样式 //可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish option.customid = option.customid || 'midnight'; layer = L.tileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=' + option.customid, { name: option.name, subdomains: "012", tms: true }); break; case "time"://实时路况 var time = new Date().getTime(); layer = L.tileLayer('http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' + time + '&label=web2D&v=017', { name: option.name, subdomains: subdomains, tms: true }); break; //合并 case "img": layer = L.layerGroup([ L.tileLayer.baidu({ name: "底图", layer: 'img_d', bigfont: option.bigfont }), L.tileLayer.baidu({ name: "注记", layer: 'img_z', bigfont: option.bigfont }) ]); break; } return layer; }; 7.控制底层地图以及对切换的控制,(最多显示3行) L.control.layers( { "百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map), "百度卫星": L.tileLayer.baidu({ layer: 'img' }) // "百度地图-大字体": L.tileLayer.baidu({ layer: 'vec',bigfont:true }), // "百度卫星-大字体": L.tileLayer.baidu({ layer: 'img', bigfont: true }), // "自定义样式-黑色地图": L.tileLayer.baidu({ layer: 'custom', customid:'dark' }), // "自定义样式-蓝色地图": L.tileLayer.baidu({ layer: 'custom', customid:'midnight' }) }, { "实时交通信息": L.tileLayer.baidu({ layer: 'time' }), "ct": ExampleData.LayerGroups.dogs, "restaurants" : ExampleData.LayerGroups.restaurants, "cities" : ExampleData.LayerGroups.cities, "dogs" : ExampleData.LayerGroups.dogs, }, { "cities" : ExampleData.LayerGroups.cities }, { position: "topright" }).addTo(map);文章来源: leaflet 集成百度地图小例子二