Languages: English • 简体中文 • 繁體中文

SensorThings API - 可视化更多位置（Location）

SensorThings绘制地图系列教程包含四个部分，这是

、

从每个Location的Observation中取回最新可用自行车数据。
在地图上显示每个Location，并设定颜色区分自行车数量。

在第一部分和第二部分中，我们只使用了一些Locations。在这部分，我们会从SensorThings服务器取回所有的Locations并显示在地图上。

加入更多的站点

我们再来看一次之前是如何从SensorThings取回Locations的。

GET {{staBaseUrl}}/Locations?$expand=Things/Datastreams($filter=ObservedProperty/name eq 'available_bikes'),Things/Datastreams/Observations($orderby=phenomenonTime desc;$top=1)

响应中第一行@iot.count表示总共有多少Locations符合这次的查询。下一行的@iot.nextLink则表示如何取回下一页的结果。

假如我们取回所有的结果，地图会看起来像下面这样子。

在 SensorThings Share 上查看代码

有点拥挤，对吧？不管怎么样，让我们来看看我们是如何取回所有的Locations的。

首先，我们将向/Locations的请求封装到followNextLink函数中

followNextLink(
  axios.get('https://toronto-bike-snapshot.sensorup.com/v1.0/Locations', {
    params: {
      '$expand': "Things/Datastreams($filter=ObservedProperty/name eq 'available_bikes'),Things/Datastreams/Observations($orderby=phenomenonTime desc;$top=1)"
    }
  })
)

followNextLink函数通过递归的方式获取value，并对所有value进行拼接，拼接后的完整结果以一个数组的形式返回，当@iot.nextLink为空时，递归结束。如果您好奇具体这个函数是如何完成这个功能的，您可以参考学习JavaScript的递归的相关知识。由于这已超出这个教程的学习范围，因此在此就不再赘述。

function followNextLink(responsePromise) {
  return responsePromise.then(function(lastSuccess) {
    if(lastSuccess.data['@iot.nextLink']) {
      return followNextLink(axios.get(lastSuccess.data['@iot.nextLink'])).then(function(nextLinkSuccess) {
        nextLinkSuccess.data.value = lastSuccess.data.value.concat(nextLinkSuccess.data.value);
        return nextLinkSuccess;
      });
    }
    else {
      return lastSuccess;
    }
  });
}

聚类

在地图上处理杂乱的标记有一个较为通用的方法，称为聚类（clustering）。Leaflet有一个插件Leaflet.markercluster可以实现这个效果。下面例子展示的是使用这个插件（预设功能）后得到的地图。

在 SensorThings Share 上查看代码

它有效减少了我们地图上的混乱，但是现在我们无法得知站点是否还有可用的自行车。当然，只要我们放大地图，这些资讯依然会出现。这个功能在我们只想快速浏览地图时较为实用。

还有一种简单的方法

在某些情况下，如果有大量的数据点，采用聚类还是非常必要的。但对于我们的资料集而言，缩小标记也是种有效美观的方式。

在 SensorThings Share 上查看代码

通过设定我们的圆圈标记radius 和 weight(stroke 宽度)，我们可以适当缩小标记。

return L.circleMarker(latlng, {
  color: availableBikes > 5 ? enoughBikeColor : fewBikesColor,
  radius: 5,
  weight: 2
});

下一步？

目前为止，我们已经从服务器获取最新的自行车数据并显示出来。但如果我们可以显示历史数据将会更好。比如一小时前有多少可用的自行车? 是不是通常周五晚上9点有很多可用的自行车? 自行车在冬天和夏天的平均使用率的对比? 只要有数据，SensorThings就可以解决，当然还是要一步步进行。下一部分中，我们将展示如何查询特定时间的可用自行车情况。

让我们开始时间旅行吧。

第四部分-时间旅行