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获取的数据来绘制地图，以及如何增加一些基本的交互。

第二部分 - 数据驱动样式设计