▒ 目录 ▒
- 🛫 导读
- 开发环境
- 1️⃣ 重构
- data.js 数据抽取
- MyMap 面向对象编程
- 继承MyMap类
- 2️⃣ d5. 自定义控制层、多图层及其控制
- 示例效果
- 自定义控制层
- 多图层及其控制
- 🛬 文章小结
- 📖 参考资料
🛫 导读
开发环境
| 版本号 | 描述 | |
|---|---|---|
| 文章日期 | 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对象，需要注意下面两个方面：
- html元素
panel，使用绝对位置，top为70px，防止挡住leaflet的控制层- 【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
