物联网中的位置服务

待我称王封你为后i 2022-10-22 07:35 183阅读 0赞

### 写在前面 ###

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

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

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

*  查看一辆车的所在位置
 *  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/  
点击右上的登录或注册即可。

注册后，进入控制台，  
![f57bb9362aef1bf331f69f35330fbf6b.png][]  
点击右侧的菜单，应用管理，我的应用。  
进行创建一个应用，这里的一个应用其实就是创建一个密钥，用于使用腾讯位置服务SDK的秘钥，或者KEY。有了这个key才能使用腾讯地图。

创建应用之后我们在创建一个key，  
![1040ecbc95cdbe9d5ff770a9f12c5208.png][]  
勾选 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>
      
      <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>
    
    
    <body onload="initMap()">
      
      <div id="container"></div>
    </body>
    
    </html>

用浏览器打开该页面可以看到  
![647ff85095d5983b4963731d1bac92fb.png][]

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

#### 添加车辆 ####

有了地图后，我们就要在地图上添加一台车。在腾讯地图中这种添加到地图固定位置的覆盖物，叫做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的位置信息，并绑定样式，  
设置完成后 浏览器刷新就会出现以下效果

![a827ef0ed7dfad02963409178a0fe2fc.png][]

#### 让车动起来 ####

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

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
        })

完整的效果  
![0b5451c818d34e961b88fb711390b7d9.gif][]

完整的代码

<!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>

### 写在最后 ###

后续我将给大家带来更多有关位置服务在物联网平台中的应用。谢谢观看。

[f57bb9362aef1bf331f69f35330fbf6b.png]: /images/20221022/303107e8cc4a4f63b5faf08dafa47808.png
[1040ecbc95cdbe9d5ff770a9f12c5208.png]: /images/20221022/5cdf02a5789d4a3eb4752c2c894ed981.png
[647ff85095d5983b4963731d1bac92fb.png]: /images/20221022/a033c6285b1744c98b3b1ea723c8f4df.png
[a827ef0ed7dfad02963409178a0fe2fc.png]: /images/20221022/274799d19a6e4940bfc3fae045218e48.png
[0b5451c818d34e961b88fb711390b7d9.gif]: /images/20221022/269a41dfde1c4cdf958245b3c0490083.png