Leaflet加载jpg,png小图不平铺

1,550 阅读1分钟

了解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
    }

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