• 玩转Leaflet-带你吃透Control知识

    前言

           周所周知，在LeafLet.js实现的地图应用中，通过control控件可以用于切换不同的底图。但是如果采用默认的样式进行展示，它的效果是比较难看的。随着大家对审美的发展，也随着更多灵活的自定义功能的需要，比如需要集成更多美观的底图，通常需要进行扩展。那么如何扩展Leaflet的control功能，满足大家的实际需要呢？本文将介绍一种基于Leaflet的插件# Leaflet-IconLayers，通过# Leaflet-IconLayers来实现自动切换图层的功能，文中重点介绍Control组件以及如何扩展这些组件，并给出实例代码。

    一、Control是什么？

            L.Control是Leaflet中一个实现地图控件的基类。负责处理定位。 所有其他的控件都是从这个类中延伸出来的。

    1、Control的选项配置

    选项类型默认值说明
    positionString'topright'控件的位置（地图的一个角）。可能的值是 'topleft'、 'topright'、 'bottomleft' 或 'bottomright'

    2、Control的方法

    方法返回值说明
    getPosition()string返回控件的位置。
    setPostionthis设置控件的位置。
    getContainer()HTMLElement返回包含该控件的 HTMLElement。
    addTo( map)this将控件添加到给定的地图中。
    remove()this将控件从当前活动的地图上删除。

     3、Control默认效果

             通过以上的效果可以看到，它的默认图层控制器放置在右上角，展示的效果也比较一般。

    二、Leaflet-IconLayers是什么？

    1、定义

           Leaflet-IconLayers是一个基于Leaflet的带图标的切换控制器，它需要在Leaflet0.7.3以上的版本上使用，浏览器需要在IE9+以上才可以正常访问。感兴趣的可以自行下载：Leaflet-IconLayers。使用git将代码下载之后可以看到如下工程：

     2、新建html页面

    1. html>
    2. <html>
    3.     <head>
    4. 	    <meta charset="utf-8" />
    5.         <title>Leflet-IconLayers demotitle>
    6.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    7.     <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin="">script>
    8.         <script type="text/javascript" src="providers.js">script>
    9.         <script type="text/javascript" src="../src/iconLayers.js">script>
    10.         <link rel="stylesheet" href="../src/iconLayers.css">
    11.         <style>
    12.             body {
    13.                 margin: 0;
    14.                 padding: 0;
    15.                 width: 100%;
    16.                 height: 100%;
    17.             }
    18.             #map {
    19.                 position: absolute;
    20.                 top: 0;
    21.                 bottom: 0;
    22.                 left: 0;
    23.                 right: 0;
    24.             }
    25.         style>
    26.     head>
    27.     <body>
    28.     body>
    29. html>

           图上iconLayers.js就是扩展的源码。

    3、底图配置

          在providers.js中定义了相关底图的配置，详细源码如下，比如在最前面增加了本地的离线瓦片底图。

    1. providers['local_tile'] = {
    2.         title: 'local_tile',
    3.         icon: 'icons/local_tile.png',
    4.         layer: L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {
    5. 			minZoom: 0,
    6.             maxZoom: 16,
    7.             attribution: '© local_tile demo'
    8.         })
    9.     };
    1. (function(factory) {
    2.     if (typeof module !== 'undefined' && module.exports) {
    3.         module.exports = factory(require('leaflet'));
    4.     } else {
    5.         window.providers = factory(window.L);
    6.     }
    7. })(function(L) {
    8.     var providers = {};
    9.  
    10.     providers['OpenStreetMap_Mapnik'] = {
    11.         title: 'osm',
    12.         icon: 'icons/openstreetmap_mapnik.png',
    13.         layer: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    14.             maxZoom: 19,
    15.             attribution: '© OpenStreetMap'
    16.         })
    17.     };
    18.  
    19.     providers['OpenStreetMap_BlackAndWhite'] = {
    20.         title: 'osm bw',
    21.         icon: 'icons/openstreetmap_blackandwhite.png',
    22.         layer: L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    23.             maxZoom: 18,
    24.             attribution: '© OpenStreetMap'
    25.         })
    26.     };
    27.  
    28.     providers['OpenStreetMap_DE'] = {
    29.         title: 'osm de',
    30.         icon: 'icons/openstreetmap_de.png',
    31.         layer: L.tileLayer('http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
    32.             maxZoom: 18,
    33.             attribution: '© OpenStreetMap'
    34.         })
    35.     }
    36.  
    37.     providers['Stamen_Toner'] = {
    38.         title: 'toner',
    39.         icon: 'icons/stamen_toner.png',
    40.         layer: L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
    41.             attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
    42.             subdomains: 'abcd',
    43.             minZoom: 0,
    44.             maxZoom: 20,
    45.             ext: 'png'
    46.         })
    47.     };
    48.  
    49.     providers['Esri_OceanBasemap'] = {
    50.         title: 'esri ocean',
    51.         icon: 'icons/esri_oceanbasemap.png',
    52.         layer: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
    53.             attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
    54.             maxZoom: 13
    55.         })
    56.     };
    57.  
    58.     providers['HERE_normalDay'] = {
    59.         title: 'normalday',
    60.         icon: 'icons/here_normalday.png',
    61.         layer: L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/maptile/{mapID}/normal.day/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}', {
    62.             attribution: 'Map © 1987-2014 HERE',
    63.             subdomains: '1234',
    64.             mapID: 'newest',
    65.             app_id: 'Y8m9dK2brESDPGJPdrvs',
    66.             app_code: 'dq2MYIvjAotR8tHvY8Q_Dg',
    67.             base: 'base',
    68.             maxZoom: 20
    69.         })
    70.     };
    71.  
    72.     providers['HERE_normalDayGrey'] = {
    73.         title: 'normalday grey',
    74.         icon: 'icons/here_normaldaygrey.png',
    75.         layer: L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/maptile/{mapID}/normal.day.grey/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}', {
    76.             attribution: 'Map © 1987-2014 HERE',
    77.             subdomains: '1234',
    78.             mapID: 'newest',
    79.             app_id: 'Y8m9dK2brESDPGJPdrvs',
    80.             app_code: 'dq2MYIvjAotR8tHvY8Q_Dg',
    81.             base: 'base',
    82.             maxZoom: 20
    83.         })
    84.     };
    85.  
    86.     providers['HERE_satelliteDay'] = {
    87.         title: 'satellite',
    88.         icon: 'icons/here_satelliteday.png',
    89.         layer: L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/maptile/{mapID}/satellite.day/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}', {
    90.             attribution: 'Map © 1987-2014 HERE',
    91.             subdomains: '1234',
    92.             mapID: 'newest',
    93.             app_id: 'Y8m9dK2brESDPGJPdrvs',
    94.             app_code: 'dq2MYIvjAotR8tHvY8Q_Dg',
    95.             base: 'aerial',
    96.             maxZoom: 20
    97.         })
    98.     };
    99.  
    100.     providers['CartoDB_Positron'] = {
    101.         title: 'positron',
    102.         icon: 'icons/cartodb_positron.png',
    103.         layer: L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    104.             attribution: '© OpenStreetMap © CartoDB',
    105.             subdomains: 'abcd',
    106.             maxZoom: 19
    107.         })
    108.     };
    109.     return providers;
    110. });

    4、map对象添加

    1.  
    2. var map = L.map('map').setView([29.052934, 104.0625], 5); 
    3.  
    4. var layers = [];
    5. for (var providerId in providers) {
    6.      layers.push(providers[providerId]);
    7. }
    8.  
    9. layers.push({
    10.       layer: {
    11.            onAdd: function() {},
    12.            onRemove: function() {}
    13.        },
    14.        title: 'empty'
    15. })
    16.  
    17. var ctrl = L.control.iconLayers(layers).addTo(map);

    5、最终效果

           通过以上步骤基本完成了control的自定义扩展功能，来看一下最终的效果，如果不满意的话，还可以根据自己项目的实际需要来进行扩展哦。

     三、总结

           以上就是今天要讲的内容，本文主要简单介绍了Leaflet中Control的定义，常用的方法，然后重点介绍Leaflet-IconLayers以及具体使用，如果在工作中需要进行扩展不妨采用这种方式。除了这个插件外，Leaflet还有许多的插件来帮助实现具体的特效。心动不如行动，赶紧学起来吧。

  • 相关阅读:
    驱动开发 platfrom总线驱动的三种方式
    报错的解决 sqlite3.OperationalError: unrecognized token: “630008.OF“
    Springboot自行车在线租赁系统毕业设计源码101157
    java计算机毕业设计西安财经大学校园一卡通管理系统源代码+数据库+系统+lw文档
    坚忍型性格分析，坚忍型人格的职业发展
    Qt Xml文件的创建和解析[xml和dom方式]
    MySQL数据库增删改查进阶（联合查询聚合查询）
    Android系统10 RK3399 init进程启动(三十五) 属性文件介绍和生成过程
    数据结构——栈的详细介绍
    【JAVA-Day49】Java LinkedList集合详解
  • 原文地址：https://blog.csdn.net/yelangkingwuzuhu/article/details/127721133