Leaflet 调用百度瓦片地图服务

您所在的位置：网站首页 › leaflet地图加载谷歌瓦片 › Leaflet 调用百度瓦片地图服务

Leaflet 调用百度瓦片地图服务

2024-06-16 03:05| 来源: 网络整理| 查看: 265

在使用 leaflet 调用第三方瓦片地图服务的项目，主要谷歌地图、高德地图、百度地图和 OSM 地图，与其他三种地图对比，百度地图的瓦片组织方式是不同的。百度从中心点经纬度(0,0)度开始计算瓦片，而谷歌地图是从左上角经纬度(-180,90)度开始计算瓦片；如果直接使用百度瓦片地图服务会请求不到瓦片，因此需要转换一下。借助 leaflet-tileLayer-baidu 这个插件：

//需要引入 proj4.js 和 proj4leaflet.js 插件，使用script标签引入的方式 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; };

初始化之后，就可以直接实例化生成调用百度瓦片地图服务的实例；

this.map = L.map('_map',{crs: L.CRS.Baidu, fullscreenControl: true}).setView(this.originPoint, this.originZoom); L.tileLayer.baidu({layer: 'vec'}, {maxZoom: this.maxZoom, minZoom: this.minZoom}).addTo(this.map); /* 这里是VUE项目，使用了 fullscreenControl 全屏插件 */

需要注意：

1、地图切换：

如果只是实现高德、谷歌地图、天地图的Leaflet 切换，可以使用 leaflet插件 Leaflet.ChineseTmsProviders；

2、坐标系系统：

国内使用的地图坐标都是经过设备返回的坐标（WGS84）加密的，一般是GCJ02（高德地图、谷歌地图中国区服务都是用这一标准）；百度地图则在GCJ02的基础上又进行了二次加密，使用的BD09坐标；因此直接在地图显示原始点的位置信息会有几十米到几百米的误差。地图官方都提供了在线的坐标转换接口以及web服务api接口：以百度地图为例：

//百度地图坐标转换api var points = [ new BMap.Point(116.3786889372559,39.90762965106183), new BMap.Point(116.38632786853032,39.90795884517671), new BMap.Point(116.39534009082035,39.907432133833574), new BMap.Point(116.40624058825688,39.90789300648029), new BMap.Point(116.41413701159672,39.90795884517671) ] var convertor = new BMap.Convertor(); convertor.translate(points, 1, 5, translateCallback) //translateCallback 回调 // 百度地图在线转换接口地址 http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=你的密钥 //GET请求

百度地图支持单个点转换和批量点转换，同时支持 WGS84转BD09，和GCJ02转BD09坐标；

但是存在以下问题：

①、百度地图在线api 最多一次支持10个点，web服务api单次请求可批量解析100个坐标，对于海量点（几千到几万）来说，这样的处理速度显然是不够的；高德地图同样满足不了业务需求；

②、不支持逆向解析，例如BD09 没有对应的接口转GCJ02和WGS84；因此在地图切换的时候，使用百度地图拾取的点就无法在其他地图上准确显示（高德地图提供BD09到GCJ02的坐标转换，但业务使用的只是高德的瓦片服务）；

可以使用 gcoord 插件解决上述问题，支持上述三种坐标系互转，且是同步的接口，海量数据无性能瓶颈。（因为逆向解析没有公开的算法，原始坐标只是无限接近，基本满足地图使用要求。）

3、海量点性能问题

使用百度地图点的数量在2000左右时候，无论是打点、还是缩放、平移都会影响用户体验了，海量点接口虽可以支持万级别的数据，但是不能自定义图标、不能显示label；这是要是DOM操作严重影响了性能，可以使用Leaflet.Canvas-Markers解决海量点性能问题。

4、国外坐标识别

百度在线的api转换接口，会智能判断点的坐标是否在国内还是在国外，如果判断在国外就直接返回数据；但如果使用 gcoord 就无法智能识别；需要手动写一个坐标判断识别库，并且需要国界线经纬度数据。由于精确显示国界线的经纬度数据十分庞大，因此随着点精度的提高，需要牺牲浏览器性能，（在线转会有点的限制，估计也是性能考究）。

判断一个点是否在国内，可以参考判断一个点是否在多边形内部 - 射线法思路，结合国界线的经纬度数据，就可以判断点的坐标是否在国内。射线法判断算法：

function pointInChina(position = [31.172800343248,121.406021546488]) { if(position.length !== 2) { console.error('The argument is an array of longitude and latitude, with longitude first and latitude last') return; }; if((position[0] < 3.85 || position[0] > 53.55) || (position[1] < 73.55) || position[1] > 135.08) { console.log('Must be abroad') return false; }function isInPolygon(checkPoint, polygonPoints) { var counter = 0; var i; var xinters; var p1, p2; var pointCount = polygonPoints.length; p1 = polygonPoints[0]; for (i = 1; i Math.min(p1[0], p2[0]) && checkPoint[0]

【本文地址】

Leaflet 调用百度瓦片地图服务

Leaflet 调用百度瓦片地图服务

今日新闻

推荐新闻