700字范文 > leaflet调用高德地图和百度地图的实时路况瓦片图层

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

时间：2019-04-21 18:10:48

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

<html><head><meta charset="utf-8"><title>实时路况</title><link rel="stylesheet" href="/leaflet@1.6.0/dist/leaflet.css" /><script src="/leaflet@1.6.0/dist/leaflet.js"></script><script src="/proj4js/2.4.3/proj4.js"></script><script src="/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>><script src="/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('/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.22],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="/leaflet@1.6.0/dist/leaflet.css" /><script src="/leaflet@1.6.0/dist/leaflet.js"></script><script src="/proj4js/2.4.3/proj4.js"></script><script src="/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.22],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.jsL.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([7508.342789244, 0], [0, 7508.342789244])});L.tileLayer.baidu = function (option) {option = option || {};var layer;var subdomains = '0123456789';switch (option.layer) {//单图层case "vec":default://'http://online{s}./tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&b=0&limit=60&scaler=1&udt=0525'layer = L.tileLayer('http://online{s}./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}./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}./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}./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.: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;};

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。