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

前言

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

内容概览

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

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

效果图如下:

实现思路如下

  • 自定义底图切换,添加图标样式
// 构建图片形式的标题及图例
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
};
  • 自定义图层叠加,添加图标样式
// 构建图层标题及图例
const getTitle = (text, borderColor, fillColor, isBorderDashed) => {
  return `<i style='display:inline-block;border:${
    isBorderDashed ? 'dashed' : 'solid'
  } 2px ${borderColor};background:${fillColor};width:20px;height:20px;position:relative;top:4px;'></i>
  <span style='padding-left:1px;margin-top: 2px;position: relative;top:1px;'>${text}</span>`;
};
// 专题图层
const overlayMaps = {
  [getImageTitle(`标注点`, `./img/labelPointMarker.png`, 20)]: labelPointLayer,
  [getTitle('多边形', OHTER_SPOT_COLOR, SPOT_FILL_COLOR)]: polygonLayer,
};
  • 完整的核心代码如下
    ```
    import L from 'leaflet';
    import 'leaflet/dist/leaflet.css';
    import 'leaflet.chinaProvider';
    import "leaflet.markercluster/dist/MarkerCluster.css";
    import "leaflet.markercluster/dist/MarkerCluster.Default.css";
    import "leaflet.markercluster";
    import config from "./config";
    /* This code is needed to properly load the images in the Leaflet CSS */
    delete L.Icon.Default.prototype._getIconUrl;
    L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
    });

const map = L.map("map", {
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);

//创建底图切换数据源
const baseLayer1 = L.tileLayer(config.baseMaps[0].Url,);//OSM街道图
const baseLayer2 = L.tileLayer(config.baseMaps[1].Url);//ArcGIS影像图
const baseLayer3 = L.tileLayer(config.baseMaps[2].Url);//ArcGIS街道图
const baseLayer4 = L.tileLayer(config.baseMaps[3].Url, {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
});//天地图街道图
const baseLayer5 = L.tileLayer(config.baseMaps[4].Url, {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
});//天地图影像图
const baseLayer6 = L.tileLayer(config.baseMaps[5].Url);//谷歌街道图
const baseLayer7 = L.tileLayer(config.baseMaps[6].Url);//谷歌影像图
const baseLayer8 = L.tileLayer(config.baseMaps[7].Url, {
subdomains: ["1", "2", "3", "4"]
});//高德街道图
const baseLayer9 = L.tileLayer(config.baseMaps[8].Url, {

top Created with Sketch.