Languages: English简体中文繁體中文

SensorThings API - 获取位置(Location)与绘制地图(Mapping)

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('http://{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, encodingTypelocation(它指定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获取的数据来绘制地图,以及如何增加一些基本的交互。

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