【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 !]

相关推荐
paopaokaka_luck3 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94936 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_39 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js