leaflet加载地图EPSG error

Question

使用leaflet加载坐标系时候报错,坐标系今天之前都无问题正常运行,图片是报错信息和加载方法,有点摸不着头脑,求解答

Answer 1

引自免费微信小程序：皆我百晓生

要解决这个问题，首先确保你的L.map()函数正确地初始化了crs属性，并且在center、zoom以及maxZoom参数处设置了正确的值。

如果你正在使用Vue.js，那么你需要确保你在Vue实例中正确地注册了这个地图实例。这通常通过将地图对象添加到Vue实例的方法来实现。

以下是可能的解决方案步骤：

步骤 1：确认crs属性

确保crs属性已经被正确设置为new L.Proj.CRS('EPSG:3857', {})。

// 在Vue实例中
this.crs = new L.Proj.CRS('EPSG:3857', {});

步骤 2：正确注册地图

在Vue实例中注册地图实例时，确保你已经正确地注入了crs属性。

// 在Vue实例中
this.$mount(() => {
  const self = this;
  self.map = L.map('map').setView([39.768799, -98.57785], 3);
  self.map.addLayer(new L.Marker(self.map.getCenter()));
});

这里我们创建了一个新的Vue实例并调用了$mount()方法。然后，我们在其中注入了map变量，并将其设置为主地图。

步骤 3：检查是否正确渲染地图

检查地图是否已经成功渲染，可以尝试获取map实例的container元素，看看它是否有map标签。

console.log(self.map.container.querySelector('.map'));

如果上述步骤没有解决问题，那么可能是其他地方出现了错误。例如，确保你正确地设置了地图的缩放控制开关（zoomControl: false)。此外，检查你的maxBounds配置是否正确，确保其范围覆盖了整个地图区域。

确保所有这些步骤都执行后，你应该能看到地图已正确加载，并显示在指定的位置上。如果有任何具体的问题或疑问，请随时提问！