Leaflet加载jpg,png小图不平铺

最新推荐文章于 2024-08-19 10:22:19 发布

weixin_33962923

最新推荐文章于 2024-08-19 10:22:19 发布

阅读量1.2k

点赞数

原文链接：https://juejin.im/post/5a6afc696fb9a01caf37a2b0

版权

了解Leaflet的朋友或者使用过Leaflet的朋友们都知道它是加载瓦片地图的地图有很多层级

每一个层级显示的图片都不一样

那么现在我的需求是加载JPG，PNG这种小图无层级之分

如果是像加载地图的写法肯定是不行的图片会在map的容器中显示成平铺的状态！

查了tile的写法，还有更改css的样式，都不是最佳的方案！

最后通过以下方式，可以显示不平铺的样子辣！

上！代！码！！！

initImage () {
      if (this.map) {
        this.map.off()
        this.map.remove()
      }
      var map = L.map('image_view', {
        crs: L.CRS.Simple,
        minZoom: -5,
        zoomControl: false,
        attributionControl: false
      })
      var bounds = [[0,0], [500,500]]
      var image = L.imageOverlay('http://d.5857.com/tc_170411/001.jpg', bounds).addTo(map)
      map.fitBounds(bounds)
      this.map = map
    }
复制代码

这样加载后的样子就是单张图片，可缩放～