室内地图API

简介

智石科技室内地图 JavaScript API，是由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站或移动端中构建功能丰富、交互性强的室内地图应用程序。除了基本地图功能的接口外，室内地图JavaScript API还提供了诸如室内搜索、室内路线规划等数据服务，您可以根据自己的需要进行选择性使用。

产品特色

轻捷的架构
(1) API文件小，简单易用
(2) 模块化地图功能，各模块按需加载
丰富的可视化效果
(1) 地图拖拽、缩放平滑流畅
(2) 点标记、信息窗体效果绚丽
灵活开放的接口设计
(1) 支持用户自定义点标记、信息窗口等的样式
(2) 支持用户自定义插件工具，灵活的进行地图操作

准备工作

了解了室内地图基础流程后，接下来进行室内地图开发的准备工作。

您需要成为智石的用户;
获取BuildlingID、Token，请在（开放平台＞建筑与地图＞建筑管理）中查看;

快速上手

1、引入智石地图API文件

html

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

2、创建地图容器元素

html

<div id="brtmap"></div>

3、创建地图实例

javascript

var $map = new brtmap.Map({
    container: 'brtmap',
    buildingID: '您的建筑ID',
    token: '建筑有效token
});

4、完整示例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Brtmap </title>
    
    <!--引入JSSDK-->
    <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>
    
</head>
<body>
<div id="brtmap"></div>
<script>
    // 地图实例
    var map = new brtmap.Map({
        container: 'brtmap',
        buildingID: '您的建筑ID',
        token: '建筑有效token'
    });
    
</script>
</body>
</html>

API - 参考手册

1、Map

地图类，您可以使用地图方法来控制您的地图操作，例如：打开3D模式、设置初始楼层、旋转地图、缩放地图、进行路径规划等。

构造函数	说明
brtmap.Map(opts:MapOptions)	在指定的容器内创建地图实例

MapOptions	类型	说明
container	HtmlElement / String	地图容器DIV的ID值或者DIV对象
buildingID	String	地图建筑ID
token	String	地图有效token
floorID	String	指定显示的楼层ID
use3D	Boolean	3D拉伸模式
report	Boolean	统计上报
zoom	Number	层级(推荐 15 - 22)
bearing	Number	旋转角度
pitch	Number	倾斜角度 (0 - 60)
pitchWithRotate	Boolean	默认true，是否可操作地图倾斜
dragPan	Boolean	默认true，是否可操作地图平移
dragRotate	Boolean	默认true，是否可操作地图旋转
doubleClickZoom	Boolean	默认true，是否可操作地图双击缩放
touchZoomRotate	Boolean	默认true，是否可操作地图手指缩放与旋转
floorSameZoom	Boolean	切换楼层后保持zoom不变
logoPosition	Object / String	logo控件位置
floorPosition	Object / String	楼层切换控件位置
zoomPosition	Object / String	zoom控件位置
loadSyncRoutes	Boolean	加载路网数据到本地
language	String	语言类型 (zh / en)
mode	String	引擎模式 (auto:在线矢量地图 custom: 引擎模式)
localIdeographFontFamily	String	文字风格
floorSameZoom `2.5.0+`	Boolean	楼层切换时保持zoom层级不变
autoBounds `2.5.0+`	Boolean	地图边界限制(拖动地图时，限制地图在可视区域内)
routeAnimationFps `2.5.0+`	Boolean	路径规划箭头的动画频率
extrusionOpacity `2.5.0+`	Number	3D立体建筑透明度(0.1 ~ 1.0) 默认 1.0
routeColor `2.5.0+`	String	路线颜色
routeSize `2.5.0+`	Number	路线宽(像素单位)

方法	返回值	说明
setFloor(floorId)		设置显示楼层
setUse3D(Boolean)	2D/3D切换
setLanguage(String)		语言切换
setFont(String/Object, Value)		设置label字体样式
setFillColor(POIIDS, Color)		设置区块颜色
setRouteColor(Color1, Color2)		设置路径颜色，Color1:路线 Color2：覆盖(已经过时)
setReportEndPOI(poi)		预设终点poi信息，统计终点信息
reportSearchKeyword(value)		上报搜索关键词
requestRouteDistance(start, end, callback)		获取楼梯、扶梯、电梯路线路径全长距离
requestRoute(start,end,stop?,success, error, params)		路径规划
requestRouteSync(start,end,stop?,params)	Routes	离线版路径规划，属性 `loadSyncRoutes` 需设为true
setPassedPoint（point）		设置路线覆盖
resetPassedPoint()		重置路线覆盖
showRoute(routeIndex)		路径规划为多途径点模式，该方法主要设置突显指定路段
getRoute()	Routes	获取当前规划路径信息
resetRoute()		重置路径
getRouteDistance()	Object	获取定位点与路径(全长/已经过/剩余)距离
getNearPointByRoute()	Object	获取路径上的吸附点数据
getCutLineByPointAndLength(Point, length)	RouteArray	获取路径段
adsorbentAnalyze()	Object	获取路径上的吸附点数据(离线版) 属性 `loadSyncRoutes` 需设为true
getMapPoi(LngLat)	POI	查询当前显示楼层poi信息
getOnlinePoi(LngLat, callback)	Object	在线API获取poi信息
zoomIn()		地图放大一级
zoomOut()		地图缩小一级
zoomTo(zoom)		设置地图缩放级别(有过度效果)
setZoom(zoom)		设置地图缩放级别
getZoom()	Zoom	获取地图当前级别
getBaseZoom()	Zoom	地图全屏显示基础级别
getCoverZoom() `2.5.0+`	Zoom	查看全景图的合适级别
checkPointInBounds(lnglat)`2.5.0+`	Boolean	检测点是否在地图区域内
getNearDistanceInBounds(lnglat)`2.5.0+`	Number	计算点到区域界限的最近距离
panTo(LngLat)		设置地图中心点(有过度效果)
setCenter(LngLat)		设置地图中心点
getCenter()	Lnglat	获取地图中心点经纬度
rotateTo(Number)		设定地图旋转 (有过度效果) (0 - 360)
setBearing(Number)		设置地图旋转 (0 - 360)
getBearing()	Number	获取地图旋转角度
setPitch(Number)		设置地图倾斜角度 (0 - 60)
getPitch()	Number	获取地图倾斜角度
easeTo(Object)		过渡 `{center, zoom, bearing, pitch, duration}`
jumpTo(Objet)		跳转 `{center, zoom, bearing, pitch, duration}`
project(LngLat)	ScreenPoint	经纬度转换屏幕坐标
unproject(ScreenPoint)	LngLat	屏幕坐标转换经纬度
coordsToLnglat(Point)	Lnglat	地理坐标转换经纬度
lnglatToCoords(LngLat)	Point	经纬度转换地理坐标
queryRenderedFeatures(ScreenPoint)	Object	根据屏幕坐标查询地图结构数据
getContainer()	HtmlElement	获取地图HTML框架对象
getCanvas()	Canvas	获取canvas画布对象
getFloorInfoArray()	Array	获取所有楼层数据集合
getFloorInfoById(floorId)	Object	根据楼层ID获取楼层简介信息
getFloorInfoByIndex(floorNumber)	Object	根据楼层号获取楼层简介信息
showFloorControl()		显示楼层切换控件
hideFloorControl()		隐藏楼层切换控件
showScaleControl()		显示比例尺控件
hideScaleControl()		隐藏比例尺控件
showZoomControl()		显示ZOOM控件
hideZoomControl()		隐藏ZOOM控件
showLabelLayer()		显示地图元素名称
hideLabelLayer()		隐藏地图元素名称
showFacility(type, values)		显示公共设施(type：’cid’ / ’poiid’) (values: string/array)
hideFacility(type, values)		隐藏公共设施(type：’cid’ / ’poiid’) (values: string/array)
resize()		调整地图大小
remove()		注销地图
on(event, handler)		注册监听事件
once(event, handler)		注册监听事件(只执行一次)
off(event, handler)		注销监听事件

事件	参数	说明
mapready	Object	地图加载完毕
floorstart	Object	换前
floorend	Object	楼层切换后
click	MapEvent	地图单击
dblclick	MapEvent	地图双击
zoom	MapEvent	地图缩放发生改变
zoomstart	MapEvent	地图缩放发生改变前
zoomend	MapEvent	地图缩放发生改变后
move	MapEvent	地图平移时
movestart	MapEvent	地图平移前
moveend	MapEvent	地图平移后
rotate	MapEvent	地图旋转时
rotatestart	MapEvent	地图旋转前
rotateend	MapEvent	地图旋转后
pitch	MapEvent	地图倾斜时
pitchstart	MapEvent	地图倾斜前
pitchend	MapEvent	地图倾斜后
mouseover	MapEvent	鼠标进入地图时
mouseout	MapEvent	鼠标离开地图时
mouseup	MapEvent	鼠标弹起时
mousedown	MapEvent	鼠标按下时
touchstart	MapEvent	手指触摸时
touchmove	MapEvent	手指移动时
touchend	MapEvent	手指离开时
resize	MapEvent	地图大小发生改变时
remove	MapEvent	地图注销时

1.1 常用API示例

setFloor

javascript

// 设置显示楼层
// floorId： 楼层ID
// callback: 回调函数
map.setFloor(floorId:String, callback:Function);

setUse3D

javascript

// 设置地图拉伸模式
map.setUse3D(true); // true 3D效果  false  2D效果

setLanguage

javascript

// 设置语音类型
map.setLanguage('zh'); // zh 中午  en 英文

setFont

javascript

// 设置文字风格
// 方式1
map.setFont({
	color: '#0099FF',	// 文字颜色
	size: 12			// 文字大小
	iconSize: 20,		// 图钉大小
	haloColor: '#999999',// 文字边框颜色
	haloWidth: 2		// 文字边框宽度
});

// 方式2
map.setFont('color', '#0099FF'); // 设置文字颜色
map.setFont('size', 12);		// 设置文字大小
...

setFillColor

javascript

// 设置区块颜色
// 方式1 
map.setFillColor(['poiId1', 'poiId2', 'poiId3'], '#0099FF');
// 方式2
map.setFillColor([['poiId1', '#0099FF'], ['poiId2', '#FF3300'], ['poiId3', '#000000']]);

setRouteColor

javascript

// 设置路线颜色
map.setRouteColor('#0099FF', '#999999');

requestRouteDistance

javascript

// 获取上下楼交通方式时 返回各自的距离 (楼梯/电梯/扶梯)
map.requestRouteDistance(start, end, res => {
    console.log('res', res);
});

requestRoute

javascript

// 路径请求
map.requestRoute(start, end, routes => {
    console.log('routes', routes);
}, error => {
    console.log('error', error);
}, {
    // 150012-楼梯  150013-电梯   150014-扶梯
    ignore: ['150012','150013'],	// 规划路径越垮楼层时  只从'扶梯'上下楼
    // 是否车行规划
    vehicle: true					// true  (vehicle > ignore)
});

requestRouteSync

属性loadSyncRoutes:true 时有效

javascript

// 离线路径请求  
let routes = map.requestRouteSync(start, end, {
    // 150012-楼梯  150013-电梯   150014-扶梯
    ignore: ['150012','150013'],	// 规划路径越垮楼层时  只从'扶梯'上下楼
    // 是否车行规划
    vehicle: true					// true  (vehicle > ignore)
});

console.log('routes', routes);

2、Symbol

地图进阶标记类，您需要的二次开发个性化需求。例如：添加图标、设置触发事件、设置文字效果等。

2.1 Marker

图钉类

构造函数	说明
brtmap.Symbol.Marker(opts:MarkerOptions)	创建图钉实例

MarkerOptions	类型	说明
url	String	图标URl链接
size	Number	图标大小按原始图片大小缩放
angle	Number	图标旋转角度
offset	Array	图标偏移值 x, y
type	String	默认'auto' 图标展示效果 ('map' 贴合地面)

方法	返回值	说明
addTo(Map)	Marker	添加到地图实例
setLnglat(lnglat, floorId)	Marker	设置图标坐标点
setRotate(Number)	Marker	设置旋转角度
setURL(URL)		设置图标URL
setOffset(x,y)	Marker	设置图标偏移
setOpacity(Number)	Marker	设置透明度 (0-1)
show()	Marker	显示
hide()	Marker	隐藏
zIndex()	Marker	置顶
empty()		移除图标在地图实例的坐标点
remove()		销毁当前实例

示例

javascript

// 实例对象
var marker = new brtmap.Symbol.Marker({  
    url:'./images/marker.png',
    size:0.8,  
    offset:[0,-10],
    type: 'map'	// 贴合地面
}).addTo(map);

// 设置位置  floorId 设为指定楼层
marker.setLnglat({lng, lat}, floorId);

2.2 Circle

矢量类：圆点

构造函数	说明
brtmap.Symbol.Circle(opts:CircleOptions)	创建圆点实例

CircleOptions	类型	说明
radius	Number	半径(像素单位)
color	String	颜色
opacity	Number	透明值 (0 - 1)
type	String	默认'auto' 图标展示效果 ('map' 贴合地面)

方法	返回值	说明
addTo(Map)	Circle	添加到地图实例
setLnglat(lnglat, floorId)	Circle	设置圆点坐标点
setColor(String)	Circle	设置颜色
setOpacity(Number)	Circle	设置透明度 (0-1)
show()	Circle	显示
hide()	Circle	隐藏
zIndex()	Circle	置顶
empty()		移除圆点在地图实例的坐标点
remove()		销毁当前实例

示例

javascript

// 实例对象
var circle = new brtmap.Symbol.Circle({
	radius: 5,
	opacity:0.8,  
	color:'#FF6600',
    type: 'map'	// 贴合地面
}).addTo(map);

// 设置位置  floorId 设为指定楼层
circle.setLnglat({lng, lat}, floorId);

2.3 Polyline

矢量类：线

构造函数	说明
brtmap.Symbol.Polyline(opts:PolylineOptions)	创建线实例

PolylineOptions	类型	说明
color	String	颜色
opacity	Number	透明值 (0 - 1)
width	Number	线宽

方法	返回值	说明
addTo(Map)	Polyline	添加到地图实例
setLnglats(lnglats:Array, floorId)	Polyline	设置线路径
setColor(String)	Polyline	设置颜色
setOpacity(Number)	Polyline	设置透明度 (0-1)
setWidth(Number)	Polyline	设置线宽
show()	Polyline	显示
hide()	Polyline	隐藏
zIndex()	Polyline	置顶
empty()		移除线在地图实例的坐标点
remove()		销毁当前实例

示例

javascript

// 实例对象
var polyline = new brtmap.Symbol.Polyline({
	opacity:0.8,  
	color:'#FF6600',
    width: 5
}).addTo(map);

// 设置位置  floorId 设为指定楼层
polyline.setLnglats([{lng:1, lat:1}, {lng:2, lat:2}], floorId);

2.4 Polygon

矢量类：面 (多边形)

构造函数	说明
brtmap.Symbol.Polygon(opts:PolygonOptions)	创建多边形实例

PolygonOptions	类型	说明
color	String	颜色
opacity	Number	透明值 (0 - 1)

方法	返回值	说明
addTo(Map)	Polygon	添加到地图实例
setLnglats(lnglats:Array, floorId)	Polygon	设置多边形路径
setColor(String)	Polygon	设置颜色
setOpacity(Number)	Polygon	设置透明度 (0-1)
show()	Polygon	显示
hide()	Polygon	隐藏
zIndex()	Polygon	置顶
empty()		移除多边形在地图实例的坐标点
remove()		销毁当前实例

示例

javascript

// 实例对象
var polygon = new brtmap.Symbol.Polygon({
	opacity:0.8,  
	color:'#FF6600'
}).addTo(map);

// 设置位置  floorId 设为指定楼层
polygon.setLnglats([{lng:1, lat:1}, {lng:2, lat:2}, {lng:3, lat:3}], floorId);

2.5 Label

HtmlDivElement 类

构造函数	说明
brtmap.Symbol.Label(opts:LabelOptions)	创建HTML元素Label实例

LabelOptions	类型	说明
text	String	标签文字
size	Number	字体大小
color	String	字体颜色
offset	Array	字体偏移值 x,y
className	String	扩展类名(用css自定义控制)

方法	返回值	说明
addTo(Map)	Label	添加到地图实例
setLnglat(lnglat, floorId)	Label	设置文字标签坐标点
setText(String)	Label	设置文本内容
setAttr(Attr, Value)	Label	设置元素自定义属性
addClass(String)	Label	添加类名
removeClass(String)	Label	移除类名
show()	Label	显示
hide()	Label	隐藏
empty()		移除文字标签在地图实例的坐标点
remove()		销毁当前实例

示例

javascript

// 实例对象
var label = new brtmap.Symbol.Label({
	text: '智石科技',
	size: 12,
	color: '#0099FF'
}).addTo(map);

// 设置位置  floorId 设为指定楼层
label.setLnglat({lng, lat}, floorId);

2.5 DivMarker

HtmlDivElement 类

构造函数	说明
brtmap.Symbol.DivMarker(opts:DivMarkerOptions)	创建HTML元素Div实例

DivMarkerOptions	类型	说明
content	String	内容
offset	Array	Div偏移值 x,y
className	String	扩展类名(用css自定义控制)

方法	返回值	说明
addTo(Map)	DivMarker	添加到地图实例
setLnglat(lnglat, floorId)	DivMarker	设置Div坐标点
setContent(String)	DivMarker	设置Div内容
setAttr(Attr, Value)	DivMarker	设置元素自定义属性
addClass(String)	DivMarker	添加类名
removeClass(String)	DivMarker	移除类名
show()	DivMarker	显示
hide()	DivMarker	隐藏
empty()		移除Div在地图实例的坐标点
remove()		销毁当前实例

示例

javascript

// 实例对象
var divMarker = new brtmap.Symbol.DivMarker({
	content: '<div>DivMarker</div>',
	className: 'custom-div-marker'
}).addTo(map);

// 设置位置  floorId 设为指定楼层
divMarker.setLnglat({lng, lat}, floorId);

3、Search

搜索服务类，提供POI的位置查询服务。

构造函数	说明
brtmap.Search(options:Object)	创建查询服务实例

SearchOptions	类型	说明
buildingID	String	建筑ID `如果填写当前buildingID、token则addTo传入的地图对象建筑不生效`
token	String	建筑有效token

方法	返回值	说明
addTo(Map)	Search	添加到地图实例
query(opts:QueryOptions)		查询

QueryOptions	类型	说明
type	String	查询类型
floorId	String	查询楼层ID
value	String	模糊查询内容

Type	说明
name	匹配poiName
poiid	匹配poiId
cid	匹配categoryId
letter	匹配首字母

示例

javascript

// 实例对象
var $search = new brtmap.Search().addTo(map);

// 匹配name查询
$search.query({
    type: 'name',
    value: 'xxxxxx',
}, function (res) {
    console.log('res', res);
});

// 匹配poiId查询
$search.query({
    type: 'poiid',
    value: '0023xxxxxxxxxx',
}, function (res) {
    console.log('res', res);
});

// 匹配categoryId查询
$search.query({
    type: 'cid',
    value: '160013',
}, function (res) {
    console.log('res', res);
});

// 匹配首字母查询
$search.query({
    type: 'letter',
    value: 'zs',
}, function (res) {
    console.log('res', res);
});

// 扩展 按楼层筛选
$search.query({
    type: 'name',
    value: 'xxxx',
    floorId: '0023xxxxxF01'
}, function (res) {
    console.log('res', res);
});

4、Heatmap

热力图。以高亮的形式显示数据密集程度。根据密集程度的不同，图上会呈现不同的颜色，以直观的形式展现数据密度。

构造函数	说明
brtmap.Heatmap(opts:HeatmapOptions)	创建热力图实例

HeatmapOptions	类型	说明
radius	Number/Array	热力点半径(像素为单位),该值使热图更平滑
intensity	Number/Array	热图的强度，主要根据缩放级别调整热图
opacity	Number	热图点透明度 (0-1)
color	Array	密度值定义每个像素的颜色

方法	返回值	说明
addTo(Map)	Heatmap	添加到地图实例
setData(data)		设置热力数据

Data	说明
max	当前数据的最高密度
data	数据集合 `Object`

Object	说明
lng	经度
lat	纬度
count	密度值

示例

javascript

// 实例对象
var $heatmap = new brtmap.Heatmap({
    radius: [10, 30],
    intensity: [1, 5],
    opacity: 0.8,
    color: [
        0.05,'#7888D8',
        0.1, '#4DD835',
        0.2, '#B9D124',
        0.4, '#DEB92A',
        0.6, '#DE6F2A',
        1.0, '#FF3300'
    ]
}).addTo(map); 

//设置热图数据
$heatmap.setData({
    max: 200,   //最大密度
    data: [
        {
            lng: 123.123, // 经度
            lat:  30.123, // 纬度
            count: 20   // 当前点密度
    	},
    	{
            lng: 123.456,
            lat:  30.456,
            count: 100
    	},
    	...
    ]      
});

4、技术支持

到此，祝贺您，已经熟悉了地图开发过程！如果您尚未完成地图开发工作，或需要技术支持，请联系您的商务经理，或致电4000-999-023，智石全体同仁欢迎您的来访。

官方网站室内导航交流QQ群：212955437

室内地图API ​

简介 ​

产品特色 ​

轻捷的架构 ​

丰富的可视化效果 ​

灵活开放的接口设计 ​

准备工作 ​

快速上手 ​

1、引入智石地图API文件 ​

2、创建地图容器元素 ​

3、创建地图实例 ​

4、完整示例 ​

API - 参考手册 ​

1、Map ​

1.1 常用API示例 ​

setFloor ​

setUse3D ​

setLanguage ​

setFont ​

setFillColor ​

setRouteColor ​

requestRouteDistance ​

requestRoute ​

requestRouteSync ​

2、Symbol ​

2.1 Marker ​

示例 ​

2.2 Circle ​

示例 ​

2.3 Polyline ​

示例 ​

2.4 Polygon ​

示例 ​

2.5 Label ​

示例 ​

2.5 DivMarker ​

示例 ​

3、Search ​

示例 ​

4、Heatmap ​

示例 ​

4、技术支持 ​

室内地图API

简介

产品特色

轻捷的架构

丰富的可视化效果

灵活开放的接口设计

准备工作

快速上手

1、引入智石地图API文件

2、创建地图容器元素

3、创建地图实例

4、完整示例

API - 参考手册

1、Map

1.1 常用API示例

setFloor

setUse3D

setLanguage

setFont

setFillColor

setRouteColor

requestRouteDistance

requestRoute

requestRouteSync

2、Symbol

2.1 Marker

示例

2.2 Circle

示例

2.3 Polyline

示例

2.4 Polygon

示例

2.5 Label

示例

2.5 DivMarker

示例

3、Search

示例

4、Heatmap

示例

4、技术支持