OpenStreetMap初探（九）——发布自己的 Web Map Service

来源：互联网发布：试用中心淘宝编辑：程序博客网时间：2024/05/23 15:00

一、准备

选择合适的JavaScript API 和切片服务器后，可以很方便地发布自己的地图服务。如果需要定制化的地图切片，可以进一步选择特殊的切片服务器或者制作自己的切片服务器。

选择API/类库

与商业在线地图服务提供商不同，OpenStreetMap没有所谓官方的JavaScript类库。因此，在茫茫工具中，你可以按自己的需求选取。最为流行的两个是 OpenLayers和Leaflet，且都是开源的。

： a mature, feature-rich library

：a new, lighter library

附：1、如果你选择MapQuest Open tiles（通过OSM数据生成），你可以选择使用MapQuest Open API。

2、Mapstraction 库可帮你更换地图供应商而不更改原始代码。

选择一个切片服务器

除了少量的测试，你不应该使用OpenStreetMap.org来作为切片服务器，而应该选用第三方服务器、通过OSM数据制作切片、或者建立自己的切片服务器。

附：

1、免费的切片服务器:MapQuest Open

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" />

<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中，

定义了界面包含地图区域和一个按钮。在javascript中，

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png'

定义了切片服务器。

定义了地图下面显示的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/