玩转Leaflet-带你吃透Control知识

前言

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

一、Control是什么?

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

1、Control的选项配置

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

2、Control的方法

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

玩转Leaflet-带你吃透Control知识_第1张图片

 3、Control默认效果

玩转Leaflet-带你吃透Control知识_第2张图片

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

二、Leaflet-IconLayers是什么?

1、定义

玩转Leaflet-带你吃透Control知识_第3张图片

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

玩转Leaflet-带你吃透Control知识_第4张图片

 2、新建html页面



    
	    
        Leflet-IconLayers demo
    
    
        
        
        
        
    
    
    

玩转Leaflet-带你吃透Control知识_第5张图片

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

3、底图配置

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

providers['local_tile'] = {
        title: 'local_tile',
        icon: 'icons/local_tile.png',
        layer: L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {
			minZoom: 0,
            maxZoom: 16,
            attribution: '© local_tile demo'
        })
    };
(function(factory) {
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(require('leaflet'));
    } else {
        window.providers = factory(window.L);
    }
})(function(L) {
    var providers = {};

    providers['OpenStreetMap_Mapnik'] = {
        title: 'osm',
        icon: 'icons/openstreetmap_mapnik.png',
        layer: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        })
    };

    providers['OpenStreetMap_BlackAndWhite'] = {
        title: 'osm bw',
        icon: 'icons/openstreetmap_blackandwhite.png',
        layer: L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '© OpenStreetMap'
        })
    };

    providers['OpenStreetMap_DE'] = {
        title: 'osm de',
        icon: 'icons/openstreetmap_de.png',
        layer: L.tileLayer('http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '© OpenStreetMap'
        })
    }

    providers['Stamen_Toner'] = {
        title: 'toner',
        icon: 'icons/stamen_toner.png',
        layer: L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
            attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
            subdomains: 'abcd',
            minZoom: 0,
            maxZoom: 20,
            ext: 'png'
        })
    };

    providers['Esri_OceanBasemap'] = {
        title: 'esri ocean',
        icon: 'icons/esri_oceanbasemap.png',
        layer: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
            maxZoom: 13
        })
    };

    providers['HERE_normalDay'] = {
        title: 'normalday',
        icon: 'icons/here_normalday.png',
        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}', {
            attribution: 'Map © 1987-2014 HERE',
            subdomains: '1234',
            mapID: 'newest',
            app_id: 'Y8m9dK2brESDPGJPdrvs',
            app_code: 'dq2MYIvjAotR8tHvY8Q_Dg',
            base: 'base',
            maxZoom: 20
        })
    };

    providers['HERE_normalDayGrey'] = {
        title: 'normalday grey',
        icon: 'icons/here_normaldaygrey.png',
        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}', {
            attribution: 'Map © 1987-2014 HERE',
            subdomains: '1234',
            mapID: 'newest',
            app_id: 'Y8m9dK2brESDPGJPdrvs',
            app_code: 'dq2MYIvjAotR8tHvY8Q_Dg',
            base: 'base',
            maxZoom: 20
        })
    };

    providers['HERE_satelliteDay'] = {
        title: 'satellite',
        icon: 'icons/here_satelliteday.png',
        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}', {
            attribution: 'Map © 1987-2014 HERE',
            subdomains: '1234',
            mapID: 'newest',
            app_id: 'Y8m9dK2brESDPGJPdrvs',
            app_code: 'dq2MYIvjAotR8tHvY8Q_Dg',
            base: 'aerial',
            maxZoom: 20
        })
    };

    providers['CartoDB_Positron'] = {
        title: 'positron',
        icon: 'icons/cartodb_positron.png',
        layer: L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap © CartoDB',
            subdomains: 'abcd',
            maxZoom: 19
        })
    };
    return providers;
});

4、map对象添加


var map = L.map('map').setView([29.052934, 104.0625], 5); 

var layers = [];
for (var providerId in providers) {
     layers.push(providers[providerId]);
}

layers.push({
      layer: {
           onAdd: function() {},
           onRemove: function() {}
       },
       title: 'empty'
})

var ctrl = L.control.iconLayers(layers).addTo(map);

玩转Leaflet-带你吃透Control知识_第6张图片玩转Leaflet-带你吃透Control知识_第7张图片

5、最终效果

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

 三、总结

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

你可能感兴趣的:(leaflet,工作拾遗,gis,leaflet,gis,自定义图层切换)