leaflet调用高德地图和百度地图的实时路况瓦片图层

1.leaflet调用高德地图实时路况

<html><head><meta charset="utf-8"><title>实时路况</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script><script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script><script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>><script src="https://unpkg.com/leaflet.chinatmsproviders@3.0.2/src/leaflet.ChineseTmsProviders.js"></script><style>html,body,#map {margin: 0;padding: 0;width: 100%;height: 100%;}</style></head><body><div id="map"></div><script>//获取当前时间var time = new Date().getTime();//道路地图var gaodeNormal = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {maxZoom: 18,minZoom: 1});//卫星影像地图var SatelliteMap = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {}), //卫星影像纯净地图不带注记和道路SatelliteAnnotion = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {}); //卫星影像地图注记和道路var gaodeSatellite = L.layerGroup([SatelliteMap, SatelliteAnnotion]);//实时路况图层var traffic = L.tileLayer('http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t='+time, {maxZoom: 18,minZoom: 1});var map = L.map('map', {layers: [gaodeNormal, traffic],minZoom: 1,maxZoom: 18,attributionControl: false,center: [31.834912, 117.220102],zoom: 12});//控制地图底图L.control.layers({"基础底图": gaodeNormal,"卫星影像": gaodeSatellite}, {"路况图层": traffic,}).addTo(map);</script></body>
</html>

2.leaflet调用百度地图实时路况

<html><head><meta charset="utf-8"><title>实时路况</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script><script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script><script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script><script src="tileLayer.baidu.js"></script><style>html,body,#map {margin: 0;padding: 0;width: 100%;height: 100%;}</style></head><body><div id="map"></div><script>//注意将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 }),//自定义样式地图，customid可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish"自定义样式-黑色地图": L.tileLayer.baidu({ layer: 'custom', customid: 'dark' }),"自定义样式-蓝色地图": L.tileLayer.baidu({ layer: 'custom', customid: 'midnight' }) }, {"实时交通信息": L.tileLayer.baidu({ layer: 'time' }).addTo(map)}, { position: "topright" }).addTo(map);</script></body>
</html>

tileLayer.baidu.js

/** * 百度地图底图调用插件* @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 = 19var 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,bluishoption.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调用高德地图和百度地图的实时路况瓦片图层相关推荐

webapp通过点击调用高德地图或百度地图导航
webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+ ...
调用苹果地图、百度地图、高德地图导航（不需要集成sdk）
最近在研究地图,所以就简单写了一个小 demo,给大家分享一下如何不集成SDK就能调用第三方地图app,这里只介绍苹果自带地图.百度地图和高德地图的调用!其中还简单介绍了app定位功能,希望能给初学的 ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
高德地图和百度地图接口封装遇到的问题（三）：参数集中插入参数以及引用未定义参数
1.向参数集中插入新参数: 由于要将高德地图和百度地图提供的方法封装成一个统一的方法,而对于某些功能来说可能传进来的参数个数不一样,比如下面的绘制折线功能: //高德地图// 折线的节点坐标数组,每个 ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
高德地图只显示一个省_浅谈当下各种导航软件：高德地图、百度地图、腾讯地图...
浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...
百度地图离线_“高德地图”和“百度地图”有什么差别? 专家: 细节决定成败!...
高德地图和百度地图是两款人气很高的导航软件,很多人想知道,高德地图和百度地图有什么不一样的.除了开发商的差异之外,在数据和功能上,它们也有很大不同.高德的导航功能非常强大,而百度的生活功能比较强悍. ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
百度地图infowindow的close事件_高德地图，百度地图，腾讯地图哪个更准？
先说结论高德第一,百度第二,腾讯第三这些地图商,他们是怎么知道"我家门口新开了一家咖啡店"这一事件的,并且标注上去还拍了照片呢?有些店新开了,有些店倒闭了,10年以前这条街上的 ...

leaflet调用高德地图和百度地图的实时路况瓦片图层

1.leaflet调用高德地图实时路况

2.leaflet调用百度地图实时路况

leaflet调用高德地图和百度地图的实时路况瓦片图层相关推荐

最新文章

热门文章