创建适合移动设备的互动地图

Map making: watercolour

传单是一个轻量级的JavaScript库,用于在Web上创建交互式地图。它是谷歌地图的开源替代品,由于其体积小,非常适合移动应用。 Leaflet使我们能够将标记和其他几何形状添加到地图中,使其非常适合地理数据可视化。

在本教程中,我们将根据Met Office的数据创建自己的天气图。在此过程中,我们将学习如何使用Leaflet制作地图,如何从Met Office下载预测数据以及如何将数据驱动的符号添加到地图中。

制作地图

Map making: Leaflet

我们的第一张Leaflet地图使用OpenStreetMap磁贴服务器并以英国为中心

Leaflet创建“基于图块”的地图,这些地图由从服务器下载的多个图像(称为“图块”)组成。有许多可用的磁贴服务器,但首先我们将使用OpenStreetMap的磁贴服务器。

让我们首先创建一个带有容器元素的'index.html'文件:

设置此元素的高度非常重要,否则地图将不可见!要使用Leaflet制作地图,我们需要做三件事:

  • 使用L.Map()创建一个地图对象,传入容器元素的id
  • 创建切片图层(使用我们选择的切片服务器)
  • 设置视图纬度,经度和缩放级别

这是我们创建一个以英国为中心的简单地图所需的JavaScript(参见中的代码示例1)GitHub回购):

var map = new L.Map('myMap'); var osmLayer = new L.TileLayer('http:// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png',{archive:'Map data(C) OpenStreetMap contributors' }); map.addLayer(osmLayer); map.setView([55,-5],6);

获取数据

我们现在要从Met Office的DataPoint服务中获取一些数据,该服务提供了许多与天气有关的数据源。其中一个产品是API,可提供英国多个地区的天气预报数据。我们将使用它来获取地图的数据。

要使用DataPoint,您首先需要访问www.metoffice.gov.uk/datapoint并创建一个帐户。然后,您将能够检索您的个人API密钥(如果您不想这样做,则代码示例2中提供了数据)。

让我们在特定日期做出预测的简单请求。使用浏览器转到以下URL:

http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/all?res=daily&time=YYYY-MM-DD&key=YOUR-API-KEY-HERE

您需要输入日期作为YYYY-MM-DD字符串(例如2016-02-10)并将您的API密钥粘贴到其中所说的YOUR-API-KEY-HERE。 DataPoint仅提供大约五天的预测,因此您需要在不久的将来输入日期。

当您输入此URL时,最终会出现一个大的JSON对象,如下所示:

{“SiteRep”:{“Wx”:{“Param”:[{“name”:“FDm”,“units”:“C”,“$”:“感觉像......

在浏览器中,将其作为forecast.json保存到项目目录中。

加载数据

我们可以使用jQuery的getJSON函数加载forecast.json。当我加载一个不熟悉的数据集时,我会经常在Chrome的开发者控制台中检查它(代码示例2):

$ .getJSON('forecast.json',function(data){console.log(data);});

如果我们在控制台中将数据扩展几次,我们可以看到Sitemap.DV.Location,它是一个位置数组。其中每个都有一个纬度和经度,一个名称和另一个包含实际预测数据的对象Period。

在下一阶段,我们将遍历此数组并显示每个位置的标记。

显示数据

Map making: location marker

Leaflet可以在给定的经度和纬度上添加标记。在这里,我们为每个预测位置添加了一个标记

我们现在将使用标记在地图上显示预测位置(标记是在地图上显示位置的最简单方式)。

var sites = forecastData.SiteRep.DV.Location; sites.forEach(function(site,i){if(i%20!== 0)return; //只显示几个站点var marker = L.marker([+ site.lat,+ site.lon]); marker.addTo(map);});

在这里,我们定义了一个函数,它通过我们之前看到的SiteRep.DV.Location数组获取我们的预测数据和循环。

对于每个站点,我们使用L.marker创建标记,传递纬度和经度,然后我们将其添加到地图(代码示例3)。我们只展示了一些网站,因为Leaflet努力展示所有5,974个地点!

最重要的提示:在数据集中,纬度和经度值是字符串,因此我们通过在+符号前加上它们将它们转换为数字。

添加注释

Leaflet使用bindPopup函数很容易为每个标记添加注释:

marker.bindPopup('降雨的机会'+ site.Period.Rep [0] .PPd +'%');

在这里,我们定义了单击标记时应显示的文本。在这种情况下,我们显示Period.Rep [0] .PPd,这是下雨的机会(代码示例4)。

看一看这里有关DataPoint数据结构的更多详细信息。现在,当我们点击标记时,我们将看到在该位置下雨的可能性。

添加天气符号

单击标记以显示预测有点麻烦,所以让我们在每个位置显示天气符号。

幸运的是,我们的数据包含一个特殊代码Period.Rep [0] .W,它总结了特定位置的天气。例如,1表示晴天,20表示冰雹淋浴。确切的细节是这里

我们将使用Alessio Atzeni开发的大量天气图标Meteocons。让我们首先定义一个查找表,确定要为每种天气类型显示的图标:

Var WeatherTypeToIcon = {0:3,1:2,2:9等}

我们现在可以构建一个路径名iconPath到相应的Meteocon图标。完成此操作后,我们使用Leaflet的图标功能从我们的图标图像创建一个图标对象,然后将其添加到标记中(参见代码示例5):

var iconIndex = weatherTypeToIcon [site.Period.Rep [0] .W]; var iconPath ='meteocons-icons / SVG /'+ iconIndex +'。svg'; var weatherIcon = L.icon({iconUrl:iconPath,iconSize:[30,30]}); var marker = L.marker([+ site.lat,+ site.lon],{icon:weatherIcon});

现在我们有一张基于Met Office真实预测数据的天气图!

让它漂亮

最后,我们将进行一些更改,以使地图更具视觉效果。我们首先使用更中性的图块层,这样符号就会更好看:

var CartoDB_Positron = L.tileLayer('http:// {s} .basemaps.cartocdn.com / light_all / {z} / {x} / {y} .png'); map.addLayer(CartoDB_Positron);

为简洁起见,我省略了归因信息,但如果您将地图公开,请不要忘记包含此信息。

图标的间隔不是很好,所以我们可以编写一些代码来更频繁地将它们分开(参见代码示例6)。

伪代码是:

IncludedSites = []表示每个站点:如果此站点与includedSites中的站点不匹配:将其添加到includedSites

因此,我们有它!我们使用Leaflet使用来自Met Office的真实预测数据制作了英国的天气图。您可能希望在地图上显示许多其他类型的数据,并且您可以使用与此处显示的模式类似的模式。玩得开心,并保持映射!

彼得库克

Peter Cook是一位专注于数据可视化的Web开发人员。本文最初发表于276期网络杂志

喜欢这个?阅读这些!



翻译字数超限