leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

时间:2023-03-09 03:36:49
leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

前言

leaflet-webpack 入门开发系列环境知识点了解:

内容概览

leaflet 叠加图层控制
源代码 demo 下载

本篇 demo 实现是在leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)基础上优化而实现的,核心就是 leaflet 的 Control.Layers 控件,默认的底图切换以及叠加图层只有选中以及文字,没有图标样式的效果。

效果图如下:
leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

实现思路如下

  • 自定义底图切换,添加图标样式
// 构建图片形式的标题及图例
const getImageTitle = (text, imgUrl, size) => {
return `<div style='display:inline-block;width:${size}px;height:${size}px;position:relative;top:4px;'><img src='${imgUrl}' style='height:${size}px;'/></div>
<span style='padding-left:1px;margin-top: 2px;position: relative;top:1px;'>${text}</span>`;
};
const baseLayers = {
[getImageTitle(`OSM街道图`, `./img/OSMVector.png`, 35)]: baseLayer1,
[getImageTitle(`ArcGIS影像图`, `./img/arcgisImage.png`, 35)]: baseLayer2,
[getImageTitle(`ArcGIS街道图`, `./img/arcgisVector.png`, 35)]: baseLayer3,
[getImageTitle(`天地图街道图`, `./img/tdtVector.png`, 35)]: baseLayer4,
[getImageTitle(`天地图影像图`, `./img/tdtImage.png`, 35)]: baseLayer5,
[getImageTitle(`谷歌街道图`, `./img/googleVector.png`, 35)]: baseLayer6,
[getImageTitle(`谷歌影像图`, `./img/googleImage.png`, 35)]: baseLayer7,
[getImageTitle(`高德街道图`, `./img/gaodeVector.png`, 35)]: baseLayer8,
[getImageTitle(`高德街道图`, `./img/gaodeImage.png`, 35)]: baseLayer9
};
  • 自定义图层叠加,添加图标样式

完整demo源码见小专栏文章尾部GIS之家leaflet小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波