leaflet引入百度地图经纬度偏差解决

♤ 使用leaflet引入地图（百度地图、高德地图、天地图等）会出现较大的坐标偏移问题

我是看了这个文章找到的解决：https://blog.csdn.net/gisarmory/article/details/108778991
github下载插件地址：https://github.com/gisarmory/Leaflet.InternetMapCorrection

♤ 下面使用百度地图为例，引用插件来解决坐标偏移问题

♤ 1、前往https://github.com/gisarmory/Leaflet.InternetMapCorrection下载插件，进行引入

把dist/leaflet.mapCorrection.min.js 和 examples/lib/plugins/leaflet.ChineseTmsProviders.js 放到新建文件夹util下

image.png

安装 坐标转换的插件

 npm install proj4 --s
 npm i proj4leaflet --s

打开examples/lib/plugins/leaflet.ChineseTmsProviders.js 进行引入

// 引用
require('proj4')
require('proj4leaflet')

image.png

♤ 2、初始化地图

引入

//引入百度地图
require("@/util/tileLayer.baidu.js")
//  引入互联网地图插件
require("@/util/leaflet.ChineseTmsProviders.js")
// 引入互联网地图纠偏插件
require("@/util/leaflet.mapCorrection.min.js")

  this.map = L.map("map", {
        minZoom: 1,
        center: [39.56, 116.20],
        zoom: 15,
        scrollWheelZoom: true, //是否可以使用鼠标滚轮缩放地图。如果通过'center'，无论鼠标在哪里，它都会缩放到视图的中心。
        zoomControl: true, //缩放控件
        attributionControl: true, // 右下角leaflet标识
        crs: L.CRS.Baidu,
      });
      var myIcon = L.icon({
        iconUrl: require('@/assets/images/leaflet/marker-icon.png'),
        iconSize: [38, 38],
        iconAnchor: [18, 40],
        popupAnchor: [0, -42],
      });

      //根据自己引入的地图来添加相对于的底图
      //对应的字段在leaflet.ChineseTmsProviders.js里的L.TileLayer.ChinaProvider.providers对象里查找
      L.tileLayer.chinaProvider('Baidu.Normal.Map').addTo(this.map); 

      //添加纠偏参照物
      L.marker([39.905530, 116.391305], { icon: myIcon })
        .addTo(this.map)
        .bindPopup('
天安门广场国旗所在位置
')
        .openPopup();

对应的底图添加

image.png

♤ 结果

image.png