6.4. 检查一些 Leaflet 示例

既然您已经收到了Web 制图 API及其基本元素的介绍，那么您需要开始尝试一个，以便取得更大的进展。学习Leaflet和其他任何API的方法是，查看它的开发人员代码示例，尝试运行它们，并尝试调整或调整以适应您的喜好。实际上，构建任何Web应用程序的策略是找到最接近您想要做的示例的组合，然后开始合并这些样本，一次一个地测试功能，直到满足所有的需求。

本着这种探索和实验的精神，我们将花一些时间浏览一些 Leaflet 开发人员示例和其他在线补充材料，如开发人员论坛帖子。当你完成最后一个项目并在本课程结束后继续开发传单时，你将使用这些资源。我想确保你能有效地使用和解释它们。

在课程的下一节中，您将完成一个演练，将使用TileMill制作的PhillyBasemap磁贴放入地图中，然后在其上放置WMS。用户应该能够单击WMS中的某个功能，并看到一个弹出窗口，其中包含有关该功能的基本信息。完成的演练将如下所示：

../../_images/leaflet_popup.png

图6.3

当你处理这样的编码问题时，一个很好的策略是列出一个基本的清单，列出你需要做的事情，以找出如何去做。然后，您可以寻找说明如何完成这些任务的示例。在上面的场景中，我可以想到四个关键的事情，你需要知道如何去做才能让这个工作。

  1. 向地图添加瓦片的基础地图

  2. 在基础地图上添加WMS层

  3. 单击鼠标查询WMS层

  4. 在弹出窗口中显示结果

现在看看下面的一些 Leaflet 示例和开发人员论坛帖子，它们可以帮助您实现这一目标。现在不要担心编写代码；这将在演练中介绍。现在，只需熟悉代码结构和模式。到了完成演练的时候，这些材料会有些熟悉。

6.4.1. 向地图添加瓦片的基础地图

这是一项常见的任务，您可以转到 Leaflet 快速入门指南 示例。实际上，这说明了如何使用L.tileLayer类从Mapbox添加瓦片底图：

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', ...)

不过，这比您需要的还要复杂，因为示例要求您有一个Mapbox访问令牌和项目IDL.tileLayer API参考：

L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

在这种情况下，foo只表示可以应用于瓦片层的其他选项。重要的一点是，您将一个URL传递给您的tiles，其中{x}、{y}和{z}分别表示列、行和缩放级别。

如果您在 Leaflet 示例中搜索OpenStreetMap，您将在Getting Started with Leaflet 将OpenStreetMap添加为瓦片底图的页。

// set up the map
map = new L.Map('map');

// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});

// start the map in South-East England
map.setView(new L.LatLng(51.3, 0.7),9);
map.addLayer(osm);

6.4.2. 在基础地图上添加WMS层

The Leaflet examples contain a page about working with WMS in Leaflet. From the Leaflet WMS and TMS tutorial :

var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', { layers: 'nasa:bluemarble' }).addTo(map);

上面的例子展示了L.tileLayer.wms 类可以与URL和图层名列表一起使用，以将WMS添加到 Leaflet 地图。

6.4.3. 单击鼠标查询WMS层

这个有点难。WMS查询是基于GetFeatureInfo请求的，而spool并没有提供任何方法来实现这一点。相比之下，Leaflet更侧重于处理浏览器从GeoJSON等源中提取的矢量数据。它对WMS层的支持仅限于显示。

那么，如何使用 Leaflet 查询WMS呢？现在是时候去谷歌试试WMS的GetFeatureInfo Leaflet 了。结果中的一些资源是有用的。首先a GitHub page by Ryan Clark 通过jQuery和AJAX，共享他为直接通过web执行GetFeatureInfo请求而编写的一些JavaScript函数。我将在演练中更详细地描述这一点，但基本上，他构造了一个URL的JavaScript字符串变量来完成请求，然后使用jQuery开源JavaScript助手库中的方法将请求发送到web。Paul Crickard三世写道a simplified implementation Clark在他的博客上的技术构成了演练代码的基础。

两个示例都侦听地图上的鼠标单击事件以触发查询，尽管这是以稍微不同的方式编码的。 Crickard 的模式对于我们来说已经足够了，onmaclick是在map检测到单击事件之后运行的函数：

map.addEventListener('click', onMapClick);
function onMapClick(e){
  . . .
}

请花几分钟时间回顾一下这两个资源，并尽最大努力看看发生了什么。您可能不理解所有的代码，但请注意设置URL、发出请求和处理结果的一般模式。

6.4.4. 在弹出窗口中显示结果

上面的Clark和Crickard的GetFeatureInfo示例都在弹出窗口中显示查询响应的元素。两者都使用L.Popup 这门课，但是克里卡的例子对初学者来说比较容易理解。他做到了：

popup = new L.Popup({maxWidth: 400});

然后，他为弹出窗口和应该出现在里面的内容设置一个锚定点。

popup.setLatLng(e.latlng);
popup.setContent("<iframe src='"+URL+"' width='300' height='100' frameborder='0'></iframe>");
map.openPopup(popup);

注意，HTML可以用于内容。您可以解析WMS GetFeatureInfo响应并提取所需的元素，并将它们格式化为HTML字符串作为内容。

6.4.5. 找到并调整实例以符合您的目标

很自然地会问，“当我对JavaScript还不太熟悉的时候，你希望我如何从头开始写一堆这样的代码?!"答案是你不必从头开始写这样的代码。你只需要知道足够的知识来解释和改编一个有效的例子。使用文档并逐行检查代码，您应该至少能够对正在发生的事情有一个基本的了解。如果有一个参数你不明白，你可以把它归零。但不要担心抓到所有东西。

经验丰富的开发人员有时会说学习API的方法是“和它一起玩”。这会使初学者发疯。玩什么？ 我甚至不知道该怎么办？ 在本课程中，您有望学习到挑选出与您想做的事情最相关的简单代码示例，然后逐行检查它们，看看您是否可以知道代码的每一行在做什么。然后对代码进行细微调整，以使其适合您自己的数据和方案。（这是“使用它的部分”。）让我们看一下演练，看一看上面的示例如何适应您自己的某些Web地图服务。