在使用 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 <= pointCount; i++) {
p2 = polygonPoints[i % pointCount];
if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {
if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
if (p1[0] != p2[0]) {
xinters = (checkPoint[0] - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];
if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
counter++;
}
}
}
}
p1 = p2;
}
if (counter % 2 == 0) {
return false;
} else {
return true;
}
} try {
let a = isInPolygon(position, mainLand_array); //大陆
let b = isInPolygon(position, taiWan_array); // 台北
if(a || b ) {
return true;
}else {
return false;
}
}catch(err){
console.log(err);
}
}

参考链接:

1、百度与谷歌地图瓦片组织方式对比

2、leaflet-tileLayer-baidu  作者还提供了一个 在线预览的地址

3、点在多边形内算法,JS判断一个点是否在一个复杂多边形的内部

Leaflet 调用百度瓦片地图服务的更多相关文章

  1. OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)

    开源与成熟商业的瓦片地图服务(TMS  2  WMTS),都有如下共同的特性,基本成为了标准: (1) 坐标系:WGS84 (2) 投影:墨卡托投影(Marcator,正轴等角圆柱投影) ------ ...

  2. [转]OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)

    转自:https://blog.csdn.net/youngkingyj/article/details/23365849 开源与成熟商业的瓦片地图服务(TMS  2  WMTS),都有如下共同的特性 ...

  3. Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...

  4. leaflet:调用arcgis切片地图服务

    var mymap = L.map('mapid').setView([31.59, 120.29], 7); L.tileLayer('http://map.geoq.cn/ArcGIS/rest/ ...

  5. C#调用百度静态地图

    来深圳一年多了,感觉深圳的IT氛围确实比长沙好,工作和生活节奏比较快,适合于学习.来深后一直在现在所在的公司,部门从开始4个人,发展到现在10来人了,感觉还是不错的. 发现自己很少写博客了,倒不是学得 ...

  6. 快速搭建简单的LBS程序——地图服务

    很多时候,我们的程序需要提供需要搭建基于位置的服务(LBS),本文这里简单的介绍一下其涉及的一些基本知识. 墨卡托投影 地图本身是一个三维图像,但在电脑上展示时,往往需要将其转换为二维的平面图形,需要 ...

  7. GIS应用|快速搭建REST地图服务

    SuperMap Online云存储作为您的"在线GIS云盘",除了可以在云端存储GIS数据,还可以将数据直接发布多种REST服务,为您节省购买和部署SuperMap iServe ...

  8. WMS、WFS、WCS、WPS、WMTS、WMSC、TMS等常见地图服务的区别

    WebGIS的开发者经常需要面对各种地图服务规范,例如WMS.WFS.WCS.WPS.WMTS.TMS.WMSC等.因此了解这些服务的内容是相当重要的,这里对常见的服务进行了整理. OGC联盟: 开放 ...

  9. Qt加载百度离线地图

    1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...

随机推荐

  1. VS2015 dlib编译 x64 Debug .lib生成

    VS2015 dlib编译 x64 Debug >------ 已启动生成: 项目: ZERO_CHECK, 配置: Debug x64 ------ > Checking Build S ...

  2. 标量子查询调优SQL

    fxnjbmhkk4pp4 select /*+ leading (wb,sb,qw) */ 'blocker('||wb.holding_session||':'||sb.username||')- ...

  3. 123457123456#3#----com.ppGame.konglongPuzzle78--前拼后广--konglongPT游戏_pp

    com.ppGame.konglongPuzzle78--前拼后广--konglongPT游戏_pp

  4. 一个80后妈妈的邪淫忏悔(转自学佛网:http://www.xuefo.net/nr/article55/551761.html)

    我是一个80后独生女,2012年因为孩子小产后,痛苦难当,悲伤中想起可为孩子超度,因此开始了与佛法的缘分.断断续续几年的学习,才真的知道了邪淫的可怕 我从小面容姣好,气质超群,一直被父母,老师宠爱.想 ...

  5. php环境选择

    第一个    PHPStudy 推荐这个.简单好用. 链接:https://pan.baidu.com/s/1yWRDjfnadkkUE-JX5pqZmg 提取码:4imw 第二个 PHPnow 第三 ...

  6. ng2中 如何使用自定义属性data-id 以及赋值和取值操作

    项目环境:ng4.x 写法说明: [attr.data-nurseKey] <div [attr.data-nurseKey]="k.nurseKey"></di ...

  7. stm32f405xx.h头文件的问题Undefined symbol IS_TIM_BREAK_INSTANCE

    1. 在实际使用过程中发现,编译工程中,出了个错误Undefined symbol IS_TIM_BREAK_INSTANCE 经过查找,发现有两个stm32f405xx.h,其中一个是,安装的器件包 ...

  8. Java基础教程:内部类

    Java基础教程:内部类 内部类 内部类,是指在一个类的内部定义的类.就像下面这样: public class EnclosingClass {   . . .   public class Nest ...

  9. Data - 数据思维 - 中篇

    6 - 模型与框架 利用现有的成熟的理论.模型与框架,结合实际业务情况,搭建分析框架,尽量确保数据分析维度的完整性,结果的有效性及正确性. 营销理论模型:4P.用户使用行为.STP理论.SWOT等. ...

  10. 路由(Routing)

    路由(Routing)  ASP.NET Core MVC 路由是建立在ASP.NET Core 路由的,一项强大的URL映射组件,它可以构建具有理解和搜索网址的应用程序.这使得我们可以自定义应用程序 ...