导航API

1、开始使用

基于智石地图SDK brtmap-2.5.1.js+、定位SDK brtloc-3.3.4.js+ 扩展开发。

1.1 引入SDK

javascript

// 引入SDK
<script type="text/javascript" src="//brtmap.com/js-sdk/plugin/brtmap-navigation-3.3.0.js"></script>

1.2 创建实例

javascript

let $navi = new brtmap.Navigation(options);

1.3 步行导航参数配置

javascript

// 步行 推荐参数设置
$navi.inertanceStartNumber = 1;			// 起步限制距离		(导航开始起，定位需前进X米才开始惯性移动)
$navi.indicateDistance = 3;				// 临近转弯提示距离	  (如：左转、右转、... 提示时)
$navi.advanceDistance = 2;				// 导航点超前距离	   (导航定位 需比 真实定位 超前X米)
$navi.yawDistance = 8;					// 导航偏航距离		(定位点偏移路线的距离) 
$navi.yawDelayTime = 2000;				// 导航偏航延迟时间	  (偶尔情况下，定位点浮动较大，处理偏航逻辑时延后执行，防止频繁触发偏航逻辑).
$navi.earlyDistance = 5;				// 距离终点距离 		(导航点距离终点还剩X米时，就结束导航)
$navi.ignoreSegmentDistance = 2;		// 忽略极短路段距离	  (在车场特殊路线下 'Z'字路时，可以处理成一段路线)
$navi.ignoreEndedDistance = 5;			// 忽略终点最后一段的距离 (极多情况下 终点线段都会有一个转弯拐角，这个距离就是忽略转弯拐角的哪段)
$navi.inertanceSpeed = 1.2;				// 惯性推进速度 m/s	(导航点惯性移动的速度，人步行大概平均 1秒可以走1.2米)
$navi.inertanceFps = 30;				// 惯性平滑		      (1秒30帧处理惯性平滑移动)
$navi.voice = true;						// 语音播报

1.4 车行导航参数配置

javascript

// 车行 推荐参数设置
$navi.inertanceStartNumber = 2;			// 起步限制距离		(导航开始起，定位需前进X米才开始惯性移动)
$navi.indicateDistance = 8;				// 临近转弯提示距离	  (如：左转、右转、... 提示时)
$navi.advanceDistance = 10;				// 导航点超前距离	   (导航定位 需比 真实定位 超前X米)
$navi.yawDistance = 15;					// 导航偏航距离		(定位点偏移路线的距离) 
$navi.yawDelayTime = 2000;				// 导航偏航延迟时间	  (偶尔情况下，定位点浮动较大，处理偏航逻辑时延后执行，防止频繁触发偏航逻辑).
$navi.earlyDistance = 5;				// 距离终点距离 		(导航点距离终点还剩X米时，就结束导航)
$navi.ignoreSegmentDistance = 2;		// 忽略极短路段距离	  (在车场特殊路线下 'Z'字路时，可以处理成一段路线)
$navi.ignoreEndedDistance = 5;			// 忽略终点最后一段的距离 (极多情况下 终点线段都会有一个转弯拐角，这个距离就是忽略转弯拐角的哪段)
$navi.inertanceSpeed = 5;				// 惯性推进速度 m/s	(导航点惯性移动的速度，人步行大概平均 1秒可以走5米)
$navi.inertanceFps = 30;				// 惯性平滑		      (1秒30帧处理惯性平滑移动)
$navi.voice = true;						// 语音播报

1.5 路线分析

javascript

// 地图SDK 路线请求API
$map.requestRoute(start, end, routes => {
    // 导航路线分析
    $navi.routeAnalyze(routes);
}, err => {
    console.error(err);
}, {});

1.6 实时定位分析

javascript

// 定位SDK 定位监听
$locate.on('location', point => {
    // 导航中
    if ($navi.isNaving) {
        // 定位分析
        $navi.locateAnalyze(point);
    }
});

1.7 导航开始

javascript

// 模拟导航 开始
$navi.simulate();
// 或者
$navi.startNavi(3);


// 步行导航 开始
$navi.startNavi(1);


// 车行导航 开始
$navi.startNavi(2);

2、简单示例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Demo </title>
    
    <style>
    	* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }

        html, body {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
    </style>
    
    <!--地图SDK-->
    <link rel="stylesheet" type="text/css" href="//brtmap.com/js-sdk/3.x/brtmap-2.5.1.css"/>
    <script type="text/javascript" src="//brtmap.com/js-sdk/3.x/brtmap-2.5.1.js"></script>
    
    <!--定位SDK-->
    <script type="text/javascript"  src="//brtmap.com/js-sdk/geo/brtloc-3.3.5.js"></script>
    
    <!--导航插件-->
    <script type="text/javascript" src="//brtmap.com/js-sdk/plugin/brtmap-navigation-3.3.0.js"></script>

</head>
<body>
<div id='brtmap' style='width: 100%; height: 100%;'></div>
<div id='start'>开始导航</div>
<script>
    
    // 建筑ID
    let buildingID = '';
    // 有效token
    let token = '';
    
    
    // 实例地图
    let $map = new brtmap.Map({
        container: 'brtmap',
        buildingID: buildingID,
        token: token,
        report: false,
        antialias: false
    });
    
    
    // 实例定位
    let $locate = new brtloc.Location({
        userId: brtloc.GetParams('userId'),
        wechatType: "hash",
        buildingID: buildingID,
        token: token
    });
    
    
    // 实例导航插件
    let $navi = new brtmap.Navigation({
        voice: true		// 开启语音播报
    }).addTo($map);
    
    
    let $locateMarker;
    $map.on('mapready', () => {
        
        // 导航图标
        $locateMarker = new brtmap.Symbol.Marker({
            url: 'https://map.brtbeacon.net/route/images/nav/locate.png',
            size: 0.8,
            offset: [0, -8],
            type: 'map'
        }).addTo($map);
        
    });
    
    
    // 起点、终点
    let startPoint, endPoint, routeResult;
    
    $map.on('click', e => {
        
        // 设置起点
        if(!startPoint) {
            startPoint = e.lngLat;
            startPoint.floor = $map.currentMapInfo.floorNumber;
        }
        // 设置终点
        else if(!endPoint) {
            endPoint = e.lngLat;
            endPoint.floor = $map.currentMapInfo.floorNumber;
        }
        
        
        if(startPoint && endPoint) {
            // 路线规划
            $map.requestRoute(startPoint, endPoint, function (routes) {
                // 记录路线规划
                routeResult = routes;
                // 设置路径分析
                $navi.routeAnalyze(routes);
            }, function (err) {
                console.error(err);
            }, {});
            
        }
        
    });
    
    
    //定位API 监听定位点
    $locate.on('location', point => {
        // 导航中
        if($navi.isNaving) {
            // 分析导航定位点
            $navi.locateAnalyze(point);
        }
    });
    
    
    //
    $locate.on('compass', angle => {
        // 导航中
        if($navi.isNaving) {
            // 指南针方向分析
            $navi.compassAnalyze(angle);
        }
    });
    
    
    // 导航惯性吸附路网的导航点
    $navi.on('nav', point => {
        console.log('point', point);
        
        if($locateMarker) {
            $locateMarker.setLnglat(point).setRotate(point.angle);
        }
        
    });
    

    // 导航指示消息
    $navi.on('message', message => {
        console.log('message', message);
    });
    

    // 监听偏航
    $navi.on('yaw', (locate, index, resume) => {
        if(resume) {
            
            // 从新路线规划
            $map.requestRoute(locate, endPoint, function (routes) {
                // 记录路线规划
                routeResult = routes;
                // 设置路径分析
                $navi.routeAnalyze(routes);
            }, function (err) {
                console.error(err);
            }, {});
            
        }
    });
    

    // 导航指示消息
    $navi.on('ended', () => {
        console.log('导航结束');
    });
    
    
    
    // 开始导航点击
    document.getElementById('start').addEventListener('click', e => {
        if(routeResult) {
            // 步行导航开始
        	$navi.startNavi(1);
        }
    }, false);
    
    
</script>
</body>
</html>

3、API

javascript

new brtmap.Navigation(options:object);

3.2 Parameters

Name	Type	Default	Description
inertanceStartNumber	Number	1	起步限制距离
indicateDistance	Number	3	临近转弯提示距离
advanceDistance	Number	2	导航点超前距离
yawDistance	Number	10	导航偏航距离
yawDelayTime	Time	2000	导航偏航延迟时间
earlyDistance	Number	5	距离终点距离
ignoreSegmentDistance	Number	3	忽略极短路段距离
ignoreEndedDistance	Number	5	忽略终点最后一段的距离
inertanceSpeed	Number	2	惯性推进速度 (米/s)
inertanceFps	Number	0	惯性平滑 (帧/s)
voice	Boolean	True	语音播报

4.3 Instance Members

Name	Description
addTo(map)	集成到地图
routeAnalyze(routes)	室内路线分析
outdoorRouteAnalyze(routes)	室外路线分析
locateAnalyze(point)	实时定位分析
compassAnalyze(angle)	指南针方向值分析
startNavi(type)	开始导航 (1：步行导航 2：车行导航 3：模拟导航)
simulate()	模拟导航开始
play()	模拟导航继续/播放
pause()	模拟导航暂停
close()	关闭导航 (结束当前导航，不会播放语音)
exit()	退出导航 (结束当前导航，播报“退出导航”语音 )
clear()	清除所有分析和设置
getRouteTotalDistance(point)	获取当前导航路线总距离、已经过距离
on(type, fn)	监听事件
once(type, fn)	监听一次
off(type, fn)	移除监听

4.4 Events

Name	Description
nav	监听导航吸附路线的惯性点
message	导航指示信息
yaw	监听偏航返回
exit	监听手动触发退出导航
ended	导航正常结束

导航API ​

1、开始使用 ​

1.1 引入SDK ​

1.2 创建实例 ​

1.3 步行导航参数配置 ​

1.4 车行导航参数配置 ​

1.5 路线分析 ​

1.6 实时定位分析 ​

1.7 导航开始 ​

2、简单示例 ​

3、API ​

3.1 Navigation ​

3.2 Parameters ​

4.3 Instance Members ​

4.4 Events ​

导航API

1、开始使用

1.1 引入SDK

1.2 创建实例

1.3 步行导航参数配置

1.4 车行导航参数配置

1.5 路线分析

1.6 实时定位分析

1.7 导航开始

2、简单示例

3、API

3.1 Navigation

3.2 Parameters

4.3 Instance Members

4.4 Events