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

最新推荐文章于 2024-08-23 08:52:21 发布

pjt121382333

最新推荐文章于 2024-08-23 08:52:21 发布

阅读量3.5k

点赞数

分类专栏： leaflet 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_40850482/article/details/106011973

版权

leaflet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 = 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;
};