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就可以解決，當然還是要一步步進行。下一部分中，我們將展示如何查詢特定時間的可用自行車情況。

讓我們開始時間旅行吧。

第四部分-時間旅行