Table Of Contents

上一个主题

6.3. 使用Web 制图API的编程模式

下一个主题

6.5. 演练: 使用 Leaflet 在瓦片地图上叠加的 WMS


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地图服务。

This work is licensed under a Creative Commons Attribution 4.0 International License