【vue+leaflet】常用的系统方法属性及常见问题(四)

1.去除自带的logo版权控件

js 复制代码

	this.map = L.map('imageMap', {
		attributionControl: false, // 右下角图例控件false影藏,true显示
	})

2.自定义缩放级别大小(缩放步长,zoomSnap)

javascript 复制代码

   this.map = L.map('imageMap', {
        zoomSnap: 0.1, // 缩放步长,以0.1一级缩放,默认是1一级缩放
   })

leaflet默认是自动将平面图以最大一级的比例,完全展示在当前页面的div中,比如第4级平面图可以完全展示在页面中,再大一级第5级就有部分被遮住了,不能完全显示,这时就会以第4级作为最大缩放比例将平面图展示在页面中,但是,第4级有点太小了,可能4.5级4.7级会更好一点,leaflet默认缩放级别是整数,这时候将缩放级别修改成小数就可以了看对比图: 没设置zoomSnap时左边是首次进入页面的默认最大级别展示的,旁边有很大的留白,但是再大一级(右边)就有部分平面图被遮住了,也不行. 设置了zoomSnap后: 明显右边留白少了很多,平面图也以最大级别展示在页面中了

3.鼠标事件(滚轮缩放,双击缩放)

默认都是enable,启用的

javascript 复制代码

      // 禁止背景图拖拽
      this.map.dragging.disable()
      // 禁止双击缩放
      this.map.doubleClickZoom.disable()
      // 禁止滚动缩放
      this.map.scrollWheelZoom.disable()

4.自适应缩放

javascript 复制代码

	  this.map.invalidateSize(true)
	  // this.bounds就是初始化时候的那个this.bounds
  	  this.map.fitBounds(this.bounds)

窗口缩放或者浏览器缩放都可以使用,如果没有外层再包裹一个settimeout或者nextTick

5.循环遍历删除图层

javascript 复制代码

// 单个删除,layer表示当前要删除的图层的NewClass对象
	layer.remove()
// 循环删除多个图层
   this.map.eachLayer((layer) => {
   		// 这里面的layer是所有的图层,包括地图本身和平面图本身
   		// 可以根据layer里面的某个属性来区分要删除哪些图层
   		// 有_latlngs字段的表示矩形图层和多边形图层,有_latlng字段的则表示点,文字图层
        if (layer._latlngs != null || layer._latlng != null) {
          layer.remove()
          // this.map.removeLayer(layer) 这个也可以
        }
   })

6.多个平面图切换展示

javascript 复制代码

  // this.imageOverlay有值,则表示地图已经初始化了,直接更换平面图url和平面图尺寸就可以了
  if (this.imageOverlay) {
     this.imageOverlay.setUrl(this.url)
     this.imageOverlay.setBounds(this.bounds)
  } else {
  	// this.imageOverlay没值,则表示首次绘制,需要将平面图addTo地图上
     this.imageOverlay = L.imageOverlay(this.url, this.bounds).addTo(this.map)
  }
  // 绘制
  this.map.fitBounds(this.bounds)

后续有更新再补充, $done !$