一、准备
选择合适的JavaScript API 和切片服务器后，可以很方便地发布自己的地图服务。如果需要定制化的地图切片，可以进一步选择特殊的切片服务器或者制作自己的切片服务器。
选择API/类库
与商业在线地图服务提供商不同，OpenStreetMap没有所谓官方的JavaScript类库。因此，在茫茫工具中，你可以按自己的需求选取。最为流行的两个是 OpenLayers和Leaflet，且都是开源的。
： a mature, feature-rich library
：a new, lighter library
选择一个切片服务器
2、付费的切片服务器: see list.
3、建立自己的切片服务器： generate and serve your own tiles.
二、测试
我选择相对轻量级的Leaflet（点击这里下载leaflet.cloudmade.com），下载后解压，在\CloudMade-Leaflet-538dfb4\debug\map 下，有测试例子。打开可以直接运行，但是还没有发布到web上。
尝试发布一个地图服务：
1、将下载后的文件夹，用IIS 建立成虚拟目录并发布（IIS的发布网上有很多资料）。
2、在对应文件夹下找到map文件夹，点击打开。
在右边任意找一个文件，右击-->浏览 ，配置正确的话，在浏览器中应该可以弹出地图来了。
（注：我修改了文件夹名为leaflet和端口号，可不修改）
3、将localhost换成本机的ip地址。至此，在局域网内的其他主机以可以访问这个地图服务。找个公网ip便发布到公网上了。
3、“向榜样学习”
在上面列出的debug下的几个html中，挑了一个显示效果比较好，功能也与我需求相接近的来研究研究。先看看显示效果（代码我稍做了修改）。在打开地图后，地图定位到我设定的初始位置，地图放大级别为15级。在点击“添加位置”按钮后，在地图上随机显示蓝色图标。
map.html源文件如下：
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 10px solid #ccc"></div>
<button id="populate">添加位置</button>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
//var cloudmadeUrl = 'H:\Kosmos-2.5.405.6\Console\Tiles\{z}\{x}\{y}.png',
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng( 36.6729612856341,117.02018675292972);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.FeatureGroup();
function populate() {
/*
for (var i = 0; i < 10; i++) {
markers.addLayer(new L.Marker(getRandomLatLng(map)));
}
*/
markers.addLayer(new L.Marker(getRandomLatLng(map)));
return false;
}
markers.bindPopup("<p>测试用点...tested by Mr.An </p><p>济南.大明湖.</p>");
map.addLayer(markers);
//populate();
L.DomUtil.get('populate').onclick = populate;
</script>
</body>
</html>
代码分析：
首先在head中加入了.css和对应的.js文件,(对应文件在下载的文件夹中)。
在body中，
<div id="map" style="width: 600px; height: 600px; border: 10px solid #ccc"></div>
<button id="populate">添加位置</button>
定义了界面包含地图区域和一个按钮。在javascript中，
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png'
定义了切片服务器。
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
定义了地图下面显示的copyright。
然后分布定义了切片、一个点和地图、和marker图标。之后定义了按钮的OnClick动作，并绑定了按钮及markers的单击弹出动作。
代码比较简单，下面总结一下，在网页中嵌入OSM地图的方法。
4、总结
1、引入css与js文件，一般包含：
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script> 2、在自己的网页文件中设置地图显示的位置和相应按钮
3、在javascript中，进行相应设置，主要包括：定义切片服务器、设置copyright、创建map实例（这些工作也可以放在外部js文件来实现）。如需要添加markers或者其他图形，可通过map.addLayer（）方法实现。
注：网上关于OSM的资料目前还比较有限。能力所限，错误难免。欢迎各位同仁批评指正，也欢迎大家的交流。转载请注明出处。
参考：
1、http://switch2osm.org/using-tiles/
2、http://switch2osm.org/using-tiles/getting-started-with-leaflet/
![BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin](https://i-blog.csdnimg.cn/direct/ed45c0efd0ac40c68b2c1bc7b6d90ebc.png)
