前言
周所周知，在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<String postion> | this | 设置控件的位置。 |
| getContainer() | HTMLElement | 返回包含该控件的 HTMLElement。 |
| addTo(<Map> map) | this | 将控件添加到给定的地图中。 |
| remove() | this | 将控件从当前活动的地图上删除。 |
3、Control默认效果
通过以上的效果可以看到，它的默认图层控制器放置在右上角，展示的效果也比较一般。
二、Leaflet-IconLayers是什么？
1、定义
Leaflet-IconLayers是一个基于Leaflet的带图标的切换控制器，它需要在Leaflet0.7.3以上的版本上使用，浏览器需要在IE9+以上才可以正常访问。感兴趣的可以自行下载：Leaflet-IconLayers。使用git将代码下载之后可以看到如下工程：
2、新建html页面
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title>Leflet-IconLayers demo
</title>
-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
-
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin="">
</script>
-
<script type="text/javascript" src="providers.js">
</script>
-
<script type="text/javascript" src="../src/iconLayers.js">
</script>
-
<link rel="stylesheet" href="../src/iconLayers.css">
-
<style>
-
body {
-
margin:
0;
-
padding:
0;
-
width:
100%;
-
height:
100%;
-
}
-
#map {
-
position: absolute;
-
top:
0;
-
bottom:
0;
-
left:
0;
-
right:
0;
-
}
-
</style>
-
</head>
-
<body>
-
</body>
-
</html>
图上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:
'© <a href="http://www.openstreetmap.org/copyright">local_tile demo</a>'
-
})
-
};
-
(
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:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-
})
-
};
-
-
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:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-
})
-
};
-
-
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:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-
})
-
}
-
-
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 <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-
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 <a href="http://developer.here.com">HERE</a>',
-
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 <a href="http://developer.here.com">HERE</a>',
-
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 <a href="http://developer.here.com">HERE</a>',
-
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:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
-
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);
5、最终效果
通过以上步骤基本完成了control的自定义扩展功能，来看一下最终的效果，如果不满意的话，还可以根据自己项目的实际需要来进行扩展哦。
三、总结
以上就是今天要讲的内容，本文主要简单介绍了Leaflet中Control的定义，常用的方法，然后重点介绍Leaflet-IconLayers以及具体使用，如果在工作中需要进行扩展不妨采用这种方式。除了这个插件外，Leaflet还有许多的插件来帮助实现具体的特效。心动不如行动，赶紧学起来吧。
转载：https://blog.csdn.net/yelangkingwuzuhu/article/details/127721133
查看评论