网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
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',
![img](https://img-blog.csdnimg.cn/img_convert/bf7950efcdac28784a4b782c9e5e6479.png)
![img](https://img-blog.csdnimg.cn/img_convert/cf8caefab128a98b7722bda7f6c3cc79.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**