智石时空可视化-API文档
室内地图API
简介
智石科技室内地图 JavaScript API，是由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站或移动端中构建功能丰富、交互性强的室内地图应用程序。除了基本地图功能的接口外，室内地图JavaScript API还提供了诸如室内搜索、室内路线规划等数据服务，您可以根据自己的需要进行选择性使用。
产品特色
-
轻捷的架构
(1) API文件小，简单易用(2) 模块化地图功能，各模块按需加载 -
丰富的可视化效果
(1) 地图拖拽、缩放平滑流畅(2) 点标记、信息窗体效果绚丽 -
灵活开放的接口设计
(1) 支持用户自定义点标记、信息窗口等的样式(2) 支持用户自定义插件工具，灵活的进行地图操作
准备工作
了解了室内地图基础流程后，接下来进行室内地图开发的准备工作。
- 您需要成为智石的用户（ 注册智石账户 );
- 获取BuildlingID、Token，请在（开放平台＞建筑与地图＞建筑管理）中查看;
快速上手
-
1、引入智石地图API文件
-
2、创建地图容器元素
-
3、创建地图实例
-
4、完整示例
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
-
setUse3D
-
setLanguage
-
setFont
-
setFillColor
-
setRouteColor
-
requestRouteDistance
-
requestRoute
-
requestRouteSync
属性
loadSyncRoutes:true
时有效
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() | 销毁当前实例 |
-
示例
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() | 销毁当前实例 |
-
示例
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() | 销毁当前实例 |
-
示例
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() | 销毁当前实例 |
-
示例
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() | 销毁当前实例 |
-
示例
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() | 销毁当前实例 |
-
示例
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 | 匹配首字母 |
-
示例
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 | 密度值 |
-
示例