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

SensorThings API - 獲取位置（Location）與繪製地圖（Mapping）

SensorThings繪製地圖系列教程包含四個部分，這是

SensorThings API可以處理各類創建地理空間相關的物聯網（Internet of Things, IoT）解決方案的必备數據。SensorThings中有多個實體（entity），其中一個實體是Location ，它用於表明在系統中Thing的地理位置。本教程將關注如何從SensorThings取回Locations並且顯示在地圖上。

樂於分享

SensorThings允許您透過開放標準來共享數據。現在，多倫多市有一個自行車共享計畫，這個計畫通過開放數據源（open data feed）共享了可用自行車以及可用站點的數據。我們獲取了一些多倫多的自行車數據，並且把這些數據上傳到了SensoUp雲平台。這個系列教程中将使用這些數據。

在我們從SensorThings獲取Locations之前，首先需要在網頁上構建一個地圖。

Leaflet 快速教學

本教程將使用一個熱門的Web地圖函式庫Leaflet。首先來顯示一個基本的地圖。

在 SensorThings Share 上查看代碼

請點擊上方的按鈕，獲取完整代碼。以下有些簡單的說明：

設定與載入Leaflet的CSS和JavaScript。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

為Leaflet建立一個高度為500像素的div區域來顯示地圖。

<div id="map" style="height: 500px"></div>

在上一步建立的map div中创建Leaflet的地图，設定經度緯度到多倫多市，并设定缩放级别为11。

var map = L.map('map')
  .setView([43.6532, -79.3832], 11);

此刻，我們已經有一個地圖。但是如果我們不指定圖磚，那將什麼都看不到，請參考並使用這裡的圖磚。

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: '&copy; OpenStreetMap &copy; CartoDB',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo(map);

以上的代碼提供了Leaflet使用CartoDB載入和顯示圖磚的所有信息，您也可以實驗其他的圖磚。

假如您想了解更多關於Leaflet的信息，Leaflet提供了很多教程供您探索。

最重要的事: Location

很好，我們現在有了地圖，雖然它看起來還是空的。

Locations在SesnorThings 是不可缺少的一部分，幸運的是，它很容易使用。

GET {{staBaseUrl}}/Locations

這個HTTP GET 請求可從SensorThings服務器取回Locations ，請複製和貼上上方URL到您瀏覽器的地址欄，然後您將可以看到服務器響應的JSON格式的數據。

您可以看到每一個Location有不同的屬性，包含了name, description, encodingType 和 location（它指定GeoJSON的幾何地理位置）。

增加自行車共享地點

現在讓我們增加Locations，我們會取回 toronto-bike-snapshot.sensorup.com的數據，並顯示在地圖上。

在 SensorThings Share 上查看代碼

增加一個函式庫 axios，通過axios發送HTTP請求到SensorThings服務器。

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>

然後，我們使用這個函式庫去SensorThings服務器獲取Locations ，轉換成Leaflet可以接受的格式。接下來，調整地圖包含這些Locations。

// Get the Locations from the SensorThings server
axios.get('https://toronto-bike-snapshot.sensorup.com/v1.0/Locations').then(function(success) {

  // Convert the Locations into GeoJSON Features
  var geoJsonFeatures = success.data.value.map(function(location) {
    return {
      type: 'Feature',
      geometry: location.location
    };
  });

  // Create a GeoJSON layer, and add it to the map
  var geoJsonLayerGroup = L.geoJSON(geoJsonFeatures);
  geoJsonLayerGroup.addTo(map);

  // Zoom in the map so that it fits the Locations
  map.fitBounds(geoJsonLayerGroup.getBounds());
});

下一步?

我們還沒有呈現SensorThings 所有能做的事情，第二部分將展示如何使用SensorThings獲取的數據來繪製地圖，以及如何增加一些基本的交互。

第二部分 - 數據驅動樣式設計