leaflet加载百度地图

leaflet加载百度地图

由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样,所以大多数的文章介绍了如何加载例如:天地图,高德地图,腾讯地图等地图,但是唯独百度地图的介绍的不多也有一些感觉是不太合适的,我从这篇文章了解到了他的一些切片规则,然后决定将百度地图拓展出来,给需要他的人使用。

首先需要一些第三方的插件

坐标系拓展

首先我使用了这个玩意儿。

这里需要注意的是,如果你使用的是0.7版本的Leaflet就可以直接下载使用了,如果用的是1.0版本的leaflet那需要选择leaflet-proj-refactor分支

然后上代码


 var crs = new L.Proj.CRS('EPSG:3395',
            '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +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])
            }),
             map = L.map('map', {
                crs: crs
            });

    new L.TileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20160928&scale=1&styles=t%3Abackground%7Ce%3Aall%7Cc%3A%23034dc1%7Ch%3A%23034dc1', {
        maxZoom: 18,
        minZoom: 3,
        subdomains: [0,1,2],
        tms: true
    }).addTo(map);

    new L.marker([39.91349,116.407945]).addTo(map);

    map.setView([39.91349,116.407945], 15);

以上的这些参数都是来自于这篇文章,这里不多做说明,如果有不懂的地方欢迎留言,加我QQ.

演示地址:http://gdyblog.com/Demo/Baidu/index.html

矫正篇

blog:http://gdyblog.com

QQ:84201088

QQ备注“Jack”

### 如何在 Vue2 中使用 Leaflet 加载百度地图 为了实现在 Vue2 项目中集成 Leaflet加载百度地图的功能,需引入特定库来适配百度的地图坐标系以及样式。具体来说,在此场景下需要 proj4 和 Proj4Leaflet 插件的支持[^1]。 #### 安装依赖包 首先安装必要的 npm 包: ```bash npm install leaflet proj4 proj4leaflet --save ``` #### 配置地图组件 创建一个新的 Vue 组件用于展示地图: ```javascript // src/components/BaiduMap.vue <template> <div id="map"></div> </template> <script> import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import proj4 from 'proj4'; import Proj4Leaflet from 'proj4leaflet'; export default { name: "BaiduMap", mounted() { this.initMap(); }, methods: { initMap() { // 设置百度墨卡托投影定义 proj4.defs('EPSG:900913', '+title=WGS84 (BD09) +proj=merc +a=6378245 +b=6356863.0187734 +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +no_defs'); const baiduCrs = new L.Proj.CRS( 'EPSG:900913', null, { resolutions: [ 156543.033928, 78271.516964, 39135.758482, 19567.879241, 9783.939621, 4891.969810, 2445.984905, 1222.992453, 611.496226, 305.748113, 152.874057, 76.437028, 38.218514, 19.109257, 9.554628, 4.777314, 2.388657, 1.194328, 0.597164, 0.298582, 0.149291, 0.074645 ], transformation: new L.Transformation(1, -0.0013888888888888888 * Math.PI * 6370996.81, -1, 0.0008555533333333333 * Math.PI * 6370996.81), } ); var map = L.map('map', { crs: baiduCrs, center: [39.9042, 116.4074], zoom: 13 }); L.tileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}', { subdomains: ['0', '1', '2'], attribution: '© 百度地图' }).addTo(map); } } }; </script> <style scoped> #map { height: 100vh; } </style> ``` 上述代码实现了如下功能: - 使用 `proj4` 库自定义了适用于百度地图的 EPSG:900913 投影。 - 创建了一个基于该投影系统的 CRS 对象 `baiduCrs`. - 初始化了一张位于北京中心位置的地图实例,并设置了初始缩放级别。 - 添加了来自百度在线服务的地图切片层作为底图. 通过这种方式可以在 Vue2 环境下的应用里成功嵌入并显示百度地图
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值