leaflet加载实时路况图层（高德、百度）

您所在的位置：网站首页 › 实时路况地图高德 › leaflet加载实时路况图层（高德、百度）

leaflet加载实时路况图层（高德、百度）

2024-07-13 07:56| 来源: 网络整理| 查看: 265

加载百度地图实时路况

加载百度地图需要使用到的插件如下：proj4、proj4leaflet、tileLayer.baidu。其中tileLayer.baidu来自大佬——火星科技木遥。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 地图 html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; } //注意将map的crs赋值 crs: L.CRS.Baidu 详情请阅读示例页面 var map = L.map('map', { crs: L.CRS.Baidu, minZoom: 3, maxZoom: 18, attributionControl: false, center: [31.834912, 117.220102], zoom: 12 }); //控制地图底图 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' }) //自定义样式地图，customid可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish }, { "实时交通信息": L.tileLayer.baidu({ layer: 'time' }) }, { position: "topright" }).addTo(map);

tileLayer.baidu插件如下，如果不知道在哪找到话，直接复制粘贴保存为js文件即可。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869/** * 百度地图底图调用插件 * @author 火星科技木遥原创(qq:346819890) */ //请引入 proj4.js 和 proj4leaflet.js 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]) }); 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; }; 加载高德地图实时路况

加载高德地图使用“leaflet.ChineseTmsProviders”插件，需要使用Script引入js文件

123456789101112131415161718192021222324252627282930313233343536373839404142 地图 html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; } //获取当前时间 var time = new Date().getDate(); var Gaode=new L.tileLayer.chinaProvider('GaoDe.Normal.Map', { maxZoom: 18, minZoom: 5 }); var map = L.map("map", { center: [38,114.51], zoom: 12, layers: [Gaode] }); L.control.layers(null,{ "高德路况":L.tileLayer('http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t='+time) }).addTo(map);

后记：在leaflet中挺好用的一个小功能L.control.layers(option1,option2)。功能为，为地图添加小控件，可以用来进行多图层的切换或者添加图层，其中option1中的均为单选按钮，option2中则为多选按钮，需要按情况选择放在哪里，如果不需要的话直接赋值null即可。

【本文地址】

leaflet加载实时路况图层（高德、百度）

leaflet加载实时路况图层（高德、百度）

今日新闻

推荐新闻