【leaflet】学习笔记5 自定义控制层、多图层及其控制 && 重构

导读

开发环境

	版本号	描述
文章日期	2023-11-17
操作系统	Win10 - 22H2	19045.3570
leaflet	1.9.4
git地址	https://gitcode.net/kinghzking/MyOpen.git

1️⃣ 重构

自上节《【leaflet】学习笔记1-4 https://blog.csdn.net/kinghzking/article/details/134445084》之后，小编发现代码严重重复，于是乎，重构一版，让代码清爽易读。

data.js 数据抽取

目前代码中含有大量常量或者geo数据，影响代码阅读。抽离后的结果如下：

MyMap 面向对象编程

代码方面，也有大量的重复代码，将这些代码都放到MyMap对象，封装包含下面内容：

• initBase(): 封装《d2. 多地图切换》中的内容
• initIcons(): 初始化后期用到的icon对象
  

继承MyMap类

d5及之后的例子，将继承MyMap类，调用如下：

2️⃣ d5. 自定义控制层、多图层及其控制

示例效果

自定义控制层

自定义控制层，其实就是通过html元素来操控map对象，需要注意下面两个方面：

1. html元素panel，使用绝对位置，top为70px，防止挡住leaflet的控制层
2. 【z顺序】高于map元素：z-index: 1000;
   

多图层及其控制

本例中，将通过GeoJson构造两个图层：5环、4环。通过控制层控制其显示隐藏：

• 创建图层：glayer5、glayer4
• 绑定控制层checkbox的change事件
  • 当元素check5被勾选的时候，将glayer5显示出来：glayer5.addTo(this.map);
  • 当元素check5取消勾选的时候，将glayer5隐藏起来：glayer5.removeFrom(this.map);
  • 元素check4与check5逻辑相同。

  run() {

    // 5.1 创建图层-5环
    const glayer5 = new GeoJSON(dataCommon.geoRing5, {
      pointToLayer: (geoJsonPoint, latlng) => {
        return new Marker(latlng, {
          icon: this.iconRed
        });
      }
    });
    glayer5.addTo(this.map);

    // 5.2 创建图层-4环
    const glayer4 = new GeoJSON(dataCommon.geoRing4, {
      pointToLayer: (geoJsonPoint, latlng) => {
        return new Marker(latlng, {
          icon: this.iconBlue
        });
      }
    });
    glayer4.addTo(this.map);
    
    // 5.3 绑定控制层checkbox的change事件，控制图层显示和隐藏
    const check5 = document.getElementById('check5');
    check5.onchange = evt => {
      if (evt.target.checked) {
        glayer5.addTo(this.map);
      } else {
        glayer5.removeFrom(this.map);
      }
    };
    const check4 = document.getElementById('check4');
    check4.onchange = evt => {
      if (evt.target.checked) {
        glayer4.addTo(this.map);
      } else {
        glayer4.removeFrom(this.map);
      }
    };
  }

文章小结

通过devtool查看元素属性，可以了解leaflet实现原理，很多东西其实归根接地还是对元素的控制。
因此，对html等基础知识的认知程度，决定学习leaflet的效率。

参考资料

• greengis分享的代码仓库地址： https://stackblitz.com/@shengzheng1981
• greengis分享的代码地址： https://stackblitz.com/edit/leaflet-d5?file=index.js
• greengis B站主页： https://space.bilibili.com/520898392
• 文章作品主页： https://inscode.csdn.net/@kinghzking/MyOpen
• 文章源码git地址：https://gitcode.net/kinghzking/MyOpen.git
• 【leaflet】1. 初见 https://blog.csdn.net/kinghzking/article/details/134310461
• 【leaflet】学习笔记1-4 https://blog.csdn.net/kinghzking/article/details/134445084