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

最新推荐文章于 2024-05-24 09:36:25 发布

雨街空巷

最新推荐文章于 2024-05-24 09:36:25 发布

阅读量2.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_42751928/article/details/105972961

版权

leaflet 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

加载百度地图实时路况

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>地图</title>
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <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>
</head>
<body>
    <div id="map" class="map">
    </div>
    <script type="text/javascript">

            //注意将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);
       </script>

</body>

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

加载高德地图实时路况

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>地图</title>
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <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="./leaflet.ChineseTmsProviders.js"></script>
</head>
<body>
    <div id="map" class="map">
    </div>
    <script type="text/javascript">
				//获取当前时间
				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);

    </script>

</body>

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

雨街空巷

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
leaflet加载实时路况图层（高德、百度）

加载百度地图实时路况加载百度地图需要使用到的插件如下：proj4、proj4leaflet、tileLayer.baidu。其中tileLayer.baidu来自大佬——火星科技木遥。<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <me...
复制链接

扫一扫