物联网中的位置服务

拿我格子衫来

发布于 2022-01-24 15:37:58

1.7K0

发布于 2022-01-24 15:37:58

文章被收录于专栏：TopFETopFE

写在前面

最近开了一个新的系列。位置服务在物联网领域的应用，为物联网中各种位置服务的场景，提供解决方案。敬请大家关注。

位置服务在物联网中的使用场景

在日常生活中我们经常使用这样服务，

查看一辆车的所在位置
iphone的查找手机功能
附件的充电桩
打车导航
室内定位

这些都是位置服务在物联网领域的具体应用。随着5G、AI等技术的普及，社会化的泛在物联网逐步形成，在泛在物联网中，基于感知与位置服务的定位应用，为个人和社会提供了更加便捷的服务。

有哪些位置服务

目前国内有哪些位置服务的提供商那，大致有这些提供商，下面让我给大家列举一下。以及各个平台的数据统计。

腾讯地图

每日覆盖用户数 10亿+

覆盖全球国家/地区数 200+

日均响应检索次数 50亿+

全球鲜活POI数据 2亿+

道路数据公里数 1000万+

高德地图

日均处理近1000亿次的定位及路线规划请求 1000亿

90%终端覆盖率，10部手机9部使用高德位置服务 90%

为国内出行行业超90%的应用提供解决方案 90%

为超过30万的移动应用提供位置服务 30万

涵盖中国超过7000万的POI数据 7000万

百度地图

全球POI数据覆盖1.5亿

行政区划全球52种语言

支持全球国家和地区 200+个

路网覆盖 7000万公里

地标类POI 3000万

目前腾讯地图是更新比较频繁，快速发展的一个阶段，而且可以无缝接入微信小程序。如果你的物联网平台需要接入位置服务，首先可以看看腾讯提供的位置服务。下面我就来写一些如何使用腾讯地图，以及如何完成一些物联网中的常见业务场景。

如何使用腾讯位置服务

要使用腾讯的位置地图就必须先注册腾讯地图的开发者账号，也可以直接使用手机，qq，微信登录登录地址 https://lbs.qq.com/ 点击右上的登录或注册即可。

注册后，进入控制台，

点击右侧的菜单，应用管理，我的应用。进行创建一个应用，这里的一个应用其实就是创建一个密钥，用于使用腾讯位置服务SDK的秘钥，或者KEY。有了这个key才能使用腾讯地图。

创建应用之后我们在创建一个key，

勾选 webserviceapi，我们要使用的是js的sdk。

创建key之后我们就可以在我们的物联网平台中使用了。下面给大家也给具体的案例来使用。

使用腾讯位置服务解决物联网中的业务场景

有这样一个场景，我们在使用滴滴打车的时候，可以通过app实时地查看到车辆的移动轨迹。这其中用的就是位置服务。下面我们来实现一下这个简单的需求。

创建一个地图

首先创建一个html文件
写一个地图容器div
引入地图sdk的js
初始化地图

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Hello world!</title>
  <style type="text/css">
    #container {
      /*地图(容器)显示大小*/
      width: 1200px;
      height: 400px;
    }
  </style>
  <!--引入Javascript API GL，参数说明参见下文-->
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  <script>
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(39.984120, 116.307484)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(document.getElementById('container'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45    //设置地图旋转角度
      });
    }
  </script>
</head>
<!-- 页面载入后，调用init函数 -->

<body onload="initMap()">
  <!-- 定义地图显示容器 -->
  <div id="container"></div>
</body>

</html>

用浏览器打开该页面可以看到

这样地图就出现了。是不是很简单

添加车辆

有了地图后，我们就要在地图上添加一台车。在腾讯地图中这种添加到地图固定位置的覆盖物，叫做mark

创建一个车的mark的代码

var marker = new TMap.MultiMarker({
  map,
  styles: { //样式设置
    'car-down': new TMap.MarkerStyle({
      'width': 40,  //小车图片宽度（像素）
      'height': 40, //高度
      'anchor': {   //图片中心的像素位置（小车会保持车头朝前，会以中心位置进行转向）
        x: 20,y: 20,
      },
      'faceTo': 'map',  //取’map’让小车贴于地面，faceTo取值说明请见下文图示
      'rotate': 180,    //初始小车朝向（正北0度，逆时针一周为360度，180为正南）
      'src': './img/car.png',   //小车图片（图中小车车头向上，即正北0度）
    })
  },
  geometries: [{    //小车marker的位置信息
    id: 'car',      //因MultiMarker支持包含多个点标记，因此要给小车一个id
    styleId: 'car-down',    //绑定样式
    position: new TMap.LatLng(39.98481500648338, 116.30571126937866),//初始坐标位置
  }]
});

使用MultiMarker类，这里会涉及到几个参数 styles： mark的样式车辆的大小，图片地址，朝向， geometries：定义mark的位置信息，并绑定样式，设置完成后浏览器刷新就会出现以下效果

让车动起来

让车子动起来，首先要有路线，在地图中的路线其实就是经纬度的集合如

    var path = [
      new TMap.LatLng(39.98481500648338, 116.30571126937866),
      new TMap.LatLng(39.982266575222155, 116.30596876144409),
      new TMap.LatLng(39.982348784165886, 116.3111400604248),
      new TMap.LatLng(39.978813710266024, 116.3111400604248),
      new TMap.LatLng(39.978813710266024, 116.31699800491333)
    ];

有了路线，如何让车子动起来那这里要使用marker的moveAlong方法该方法可以将marker根据预设好的路线，进行移动。可以设置速度，是否转向具体代码

 marker.moveAlong({
      'car': {
        path,
        speed: 250
      }
    }, {
      autoRotation:true
    })

完整的效果

完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>位置服务</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  #container {
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div id="container"></div>
  <script type="text/javascript">
    var center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    var map = new TMap.Map("container", {
      zoom: 15,
      center: center
    });

    var path = [
      new TMap.LatLng(39.98481500648338, 116.30571126937866),
      new TMap.LatLng(39.982266575222155, 116.30596876144409),
      new TMap.LatLng(39.982348784165886, 116.3111400604248),
      new TMap.LatLng(39.978813710266024, 116.3111400604248),
      new TMap.LatLng(39.978813710266024, 116.31699800491333)
    ];

    var polylineLayer = new TMap.MultiPolyline({
      map, // 绘制到目标地图
      // 折线样式定义
      styles: {
        'style_blue': new TMap.PolylineStyle({
          'color': '#3777FF', //线填充色
          'width': 4, //折线宽度
          'borderWidth': 2, //边线宽度
          'borderColor': '#FFF', //边线颜色
          'lineCap': 'round' //线端头方式
        })
      },
      geometries: [{
        styleId: 'style_blue',
        paths: path
      }],
    });

    var marker = new TMap.MultiMarker({
      map,
      styles: {
        'car-down': new TMap.MarkerStyle({
          'width': 40,
          'height': 40,
          'anchor': {
            x: 20,
            y: 20,
          },
          'faceTo': 'map',
          'rotate': 180,
          'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
        }),
        "start": new TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 32 },
          "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
        }),
        "end": new TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 32 },
          "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
        })
      },
      geometries: [{
        id: 'car',
        styleId: 'car-down',
        position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
      },{
        "id": 'start',
        "styleId": 'start',
        "position": new TMap.LatLng(39.98481500648338, 116.30571126937866)
      }, {
        "id": 'end',
        "styleId": 'end',
        "position": new TMap.LatLng(39.978813710266024, 116.31699800491333)
      }]
    });
    marker.moveAlong({
      'car': {
        path,
        speed: 250
      }
    }, {
      autoRotation:true
    })
  </script>
</body>

</html>