Leaflet加载百度瓦片到WGS84坐标系下

百度技术真的很好，但还是忍不住吐槽，bd09坐标系、bd09mc投影、百度地图瓦片，真是诡异的存在。

下面的代码能实现，将leaflet中加载的百度地图瓦片纠正到WGS84坐标系下。

<!DOCTYPE html><html><head><title>加载百度地图-WGS84坐标系</title><meta charset="utf-8"><style type="text/css">body {padding: 0;margin: 0;}html,body,#map {height: 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></head><body><div id='map'></div></body><script type="text/javascript">var baiduCRS = 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 () {var level = 21var 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])});var normalMapUrl = 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',satelliteMapUrl = 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',annotionMapUrl = 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl';var normalMap = L.tileLayer(normalMapUrl, {subdomains: '0123456789',maxZoom: 21,minZoom: 3,coordType: 'bd09',tms: true}),normalMapOp = L.tileLayer(normalMapUrl, {subdomains: '0123456789',maxZoom: 21,minZoom: 3,coordType: 'bd09',opacity: 0.6,tms: true}),satelliteMap = L.tileLayer(satelliteMapUrl, {subdomains: '0123456789',maxZoom: 21,minZoom: 3,coordType: 'bd09',tms: true}),annotionMap = L.tileLayer(annotionMapUrl, {subdomains: '0123456789',maxZoom: 21,minZoom: 3,coordType: 'bd09',tms: true});var baseLayers = {"地图": normalMap,"影像": satelliteMap}var overlayLayers = {"标注": annotionMap,"半透明": normalMapOp}var map = L.map("map", {crs: baiduCRS,center: [39.9, 116.4],zoom: 12,layers: [normalMap],zoomControl: false});L.control.layers(baseLayers, overlayLayers).addTo(map);L.control.zoom({zoomInTitle: '放大',zoomOutTitle: '缩小'}).addTo(map);// leaflet的加载网格图层方法，它是L.TileLayer的基类，更新_setZoomTransform、_getTiledPixelBounds方法L.GridLayer.include({_setZoomTransform: function (level, center, zoom) {if (center != undefined && this.options) {// 把鼠标坐标由WGS84坐标系转为DB09或GCJ02坐标系，leaflet从图面上获取的坐标是WGS84坐标系的，需要转换到瓦片对应的坐标系，才能匹配瓦片if (this.options.coordType == 'gcj02') {center = L.coordTransform().wgs84_To_gcj02(center.lng, center.lat);} else if (this.options.coordType == 'bd09') {center = L.coordTransform().wgs84_To_bd09(center.lng, center.lat);}}var viewHalf = this._map.getSize().divideBy(2);var mapProject = this._map.project(center, zoom);var mapPanePos = this._map._mapPane._leaflet_pos;var newPixelOrigin = mapProject.subtract(viewHalf)._add(mapPanePos).round();console.log('viewHalf:'+viewHalf);console.log('mapProject:'+mapProject);console.log('mapPanePos:'+mapPanePos);console.log('newPixelOrigin:'+newPixelOrigin);var scale = this._map.getZoomScale(zoom, level.zoom),translate = level.origin.multiplyBy(scale).subtract(newPixelOrigin).round();console.log('scale:'+scale);console.log('translate:'+translate);if (L.Browser.any3d) {L.DomUtil.setTransform(level.el, translate, scale);} else {L.DomUtil.setPosition(level.el, translate);}},// 获取地图容器像素四至，根据修改后的鼠标中心点获取_getTiledPixelBounds: function (center) {if (center != undefined && this.options) {if (this.options.coordType == 'gcj02') {center = L.coordTransform().wgs84_To_gcj02(center.lng, center.lat);} else if (this.options.coordType == 'bd09') {center = L.coordTransform().wgs84_To_bd09(center.lng, center.lat);}}var map = this._map,mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(),scale = map.getZoomScale(mapZoom, this._tileZoom),pixelCenter = map.project(center, this._tileZoom).floor(),halfSize = map.getSize().divideBy(scale * 2);return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));}});// 坐标系转换L.CoordTransform = function () {//bd09转wgs84this.bd09_To_wgs84 = function(lng, lat) {var gcj02 = this.bd09_To_gcj02(lng, lat);var wgs84 = this.gcj02_To_wgs84(gcj02.lng, gcj02.lat);return wgs84;}//wgs84转bd09this.wgs84_To_bd09 = function (lng, lat) {var gcj02 = this.wgs84_To_gcj02(lng, lat);var bd09 = this.gcj02_To_bd09(gcj02.lng, gcj02.lat);return bd09;}//wgs84转gcj02this.wgs84_To_gcj02 = function (lng, lat) {var dLat = transformLat(lng - 105.0, lat - 35.0);var dLng = transformLng(lng - 105.0, lat - 35.0);var radLat = lat / 180.0 * pi;var magic = Math.sin(radLat);magic = 1 - ee * magic * magic;var sqrtMagic = Math.sqrt(magic);dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);var mgLat = lat + dLat;var mgLng = lng + dLng;var newCoord = {lng: mgLng,lat: mgLat};return newCoord;}//gcj02转wgs84this.gcj02_To_wgs84 = function (lng, lat) {var coord = transform(lng, lat);var lontitude = lng * 2 - coord.lng;var latitude = lat * 2 - coord.lat;var newCoord = {lng: lontitude,lat: latitude};return newCoord;}//gcj02转bd09this.gcj02_To_bd09 = function (lng, lat) {var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_pi);var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_pi);var bd_lng = z * Math.cos(theta) + 0.0065;var bd_lat = z * Math.sin(theta) + 0.006;var newCoord = {lng: bd_lng,lat: bd_lat};return newCoord;}//bg09转gcj02this.bd09_To_gcj02 = function (lng, lat) {var x = lng - 0.0065;var y = lat - 0.006;var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);var lontitude = z * Math.cos(theta);var latitude = z * Math.sin(theta);var newCoord = {lng: lontitude,lat: latitude};return newCoord;}var pi = 3.1415926535897932384626;var a = 6378245.0;var ee = 0.00669342162296594323;var x_pi = pi * 3000.0 / 180.0;var R = 6378137;function transform(lng, lat) {var dLat = transformLat(lng - 105.0, lat - 35.0);var dLng = transformLng(lng - 105.0, lat - 35.0);var radLat = lat / 180.0 * pi;var magic = Math.sin(radLat);magic = 1 - ee * magic * magic;var sqrtMagic = Math.sqrt(magic);dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);var mgLat = lat + dLat;var mgLng = lng + dLng;var newCoord = {lng: mgLng,lat: mgLat};return newCoord;}function transformLat(x, y) {var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;return ret;}function transformLng(x, y) {var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;return ret;}}L.coordTransform = function () {return new L.CoordTransform();}</script></html>

方法引用：

Leaflet 国内互联网地图纠偏插件：

https://github.com/gisarmory/Leaflet.InternetMapCorrection

Leaflet加载百度瓦片到WGS84坐标系下相关推荐

Leaflet加载百度地图
为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...
leaflet加载百度地图（路网矢量图和卫星影像图）示例代码032
第032个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet加载百度地图,这里使用了control.layers进行切换两种不同的百度底图.这里要引用proj4,proj4leaf ...
leaflet加载离线瓦片地图
首先我们要明白瓦片地图的请求原理. 其实瓦片地图并不是什么特殊的文件,就是最普通的png图片.之所以为地图,就是带有了地理坐标. 打开network,查看其请求的的url就能明白其请求的原理了. 主要 ...
leaflet 加载 geoserver 发布的 wms 服务
1. 安装 geoserver 服务:略 2. 启动 geoserver: 3. 登录 geoserver 控制台:( 默认账号.密码为 admin.geoserver ) 4. 新建工作区: 5. ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
iClient for Leaflet加载MVT矢量瓦片并注册鼠标事件
作者:刘大使用背景需要在前端动态更改地图样式,并高效进行鼠标交互获取要素的业务场景时,我们会采取MVT矢量瓦片来解决此类问题,但是web应用开发已经选用Leaflet地图框架的情况下怎么办呢,这时 ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
leaflet加载实时路况图层（高德、百度）
加载百度地图实时路况加载百度地图需要使用到的插件如下:proj4.proj4leaflet.tileLayer.baidu.其中tileLayer.baidu来自大佬--火星科技木遥. <h ...

Leaflet加载百度瓦片到WGS84坐标系下

Leaflet加载百度瓦片到WGS84坐标系下相关推荐

最新文章

热门文章