indoor-positioning-map
v1.2.2
Published
React component to show custom indoor map with openlayers or leaflet
Downloads
70
Readme
indoor-positioning-map
React component to show custom indoor map with openlayers or leaflet
安装
npm install --save indoor-positioning-map
使用
import React, { Component } from 'react'
import InddorMap from 'indoor-positioning-map'
class Example extends Component {
render () {
return (
<InddorMap />
)
}
}
调用文档
进入室内环境,显示多楼层室内地图,提供楼层选择
window.loadIndoor([
{
id: xxx,
address: xxx,
latitude: xxx,
longitude: xxx,
floor: xxx,
polygonLayerId: xxx,
poiLayerId: xxx,
routeLayerId: xxx,
xmin: xxx,
ymin: xxx,
xmax: xxx,
ymax: xxx
}
]);
address:地图所在位置
latitude, longitude: 显示的地图中心坐标
floor: 显示的地图所在楼层
polygonLayerId: 室内地图对应图层id,
poiLayerId: POI对应图层id,
routeLayerId: 导航路径对应图层id,
xmin/ymin/xmax/ymax:地图范围边界
Example:
window.loadIndoor([
{
floor: 1,
id: 1,
address: "北京市海淀xxx产业园",
latitude: 3660825.8273595027,
longitude: 13539962.969968095,
polygonLayerId: "idc_center:idc_center_1_polygon",
poiLayerId: "idc_center:idc_center_1_poi",
routeLayerId: "idc_center:idc_center_1_route",
xmin: 13539924,
ymin: 3660807.25,
xmax: 13540008,
ymax: 3660845
}
]);
返回室外地图
window.loadOutdoor();
Example:
window.loadOutdoor();
显示室内地图并定位到指定坐标
window.loadMap(
{
id: xxx,
address: xxx,
latitude: xxx,
longitude: xxx,
floor: xxx,
polygonLayerId: xxx,
poiLayerId: xxx,
routeLayerId: xxx,
xmin: xxx,
ymin: xxx,
xmax: xxx,
ymax: xxx
}
);
address:地图所在位置
latitude, longitude: 显示的地图中心坐标
floor: 显示的地图所在楼层
polygonLayerId: 室内地图对应图层id,
poiLayerId: POI对应图层id,
routeLayerId: 导航路径对应图层id,
xmin/ymin/xmax/ymax:地图范围边界
Example:
window.loadMap(
{
floor: 1,
id: 1,
address: "北京市海淀xxx产业园",
latitude: 3660825.8273595027,
longitude: 13539962.969968095,
polygonLayerId: "idc_center:idc_center_1_polygon",
poiLayerId: "idc_center:idc_center_1_poi",
routeLayerId: "idc_center:idc_center_1_route",
xmin: 13539924,
ymin: 3660807.25,
xmax: 13540008,
ymax: 3660845
}
);
显示定位点
window.loadPosition(
{
floor: xxx,
latitude: xxx,
longitude: xxx,
direction: xxx,
projection: xxx
},
follow
);
floor: 位置所在楼层
latitude: 位置的经度
longitude: 位置的纬度
direction: 位置的方向
projection: 可选,坐标系统,默认是 EPSG:3857 (EPSG:4326 / EPSG:3857)
follow: 中心点是否跟随位置移动,默认是不跟随
Example:
window.loadPosition(
{
floor: 1,
latitude: 3660890,
longitude: 13539971,
direction: 90,
projection: EPSG:3857
},
true
);
在地图上标记多个用户
window.loadUsers([
{
floor:xxx,
latitude: xxx,
longitude: xxx,
projection: xxx,
title: "xxx",
subtitle: "xxx",
popup: true
}
]);
输入为数组,可以同时显示多个目标 latitude, longitude: 要显示目标的坐标
floor: 所在楼层
projection: 可选,坐标系统,默认是 EPSG:3857 (EPSG:4326 / EPSG:3857)
title: 弹框主标题
subtitle: 弹框副标题
popup: 是否显示弹框 (ture / false)
Example:
window.loadUsers([
{
floor:1,
latitude: 12969332.23871,
longitude: 4838049.78712,
projection: EPSG:3857
}
]);
在地图上打标记
window.loadMarker(
{
floor:xxx,
latitude: xxx,
longitude: xxx,
projection: xxx
}
]);
输入为数组,可以同时显示多个目标 latitude, longitude: 要显示目标的坐标
floor: 所在楼层
projection: 可选,坐标系统,默认是 EPSG:3857 (EPSG:4326 / EPSG:3857)
Example:
window.loadMarker(
{
floor:1,
latitude: 12969332.23871,
longitude: 4838049.78712,
projection: EPSG:3857
}
);
地图导航
window.loadRoutes(
{
floor: xxx,
longitude: xxx,
latitude: xxx,
projection: xxx
},
{
floor: xxx,
longitude: xxx,
latitude: xxx,
projection: xxx
}
);
第一个参数为起点位置,第二个参数位终点位置
floor: 所在楼层
longitude: 经度
latitude: 纬度
projection: 可选,坐标系统,默认是 EPSG:3857 (EPSG:4326 / EPSG:3857)
Example:
window.loadRoutes(
{
floor: 1,
longitude: 13539937.198286774,
latitude: 3660896.772479681,
projection: EPSG:3857
},
{
floor: 1,
longitude: 13539952.147962471,
latitude: 3660897.033446588,
projection: EPSG:3857
}
);
显示地图热图
window.loadHeatmap(
{
layerId: xxx,
start_time: xxx,
end_time: xxx
}
);
layerId: 热图的对应id
start_time: 起始时间
end_time: 结束时间
Example:
window.loadHeatmap(
{
layerId: 'idc_center:position_history_cluster',
start_time: '2018-07-01',
end_time: '2018-07-08'
}
);
显示地图历史轨迹
window.loadHistory(
{
layerId: xxx,
start_time: xxx,
end_time: xxx
}
);
layerId: 历史轨迹图的对应id
start_time: 起始时间
end_time: 结束时间
Example:
window.loadHistory(
{
layerId: 'idc_center:position_history',
start_time: '2018-07-01',
end_time: '2018-07-08'
}
);
地图操作
移动到某一坐标
window.move(longitude, latitude, projection)
旋转(横竖切换)
window.rotate()
视图移动到当前位置
window.center()
根据室内地图的bounds移动缩放视图
window.bounds()
放大/缩小地图
window.zoom(x)
window.zoomIn()
window.zoomOut()
显示/隐藏兴趣点
window.togglePoi()
回调事件 (需要在手机应用上有对于方法)
单击地图事件,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onSingleClick(
JSON.stringify({
longitude: xxx,
latitude: xxx,
projection: 'EPSG:3857',
floor: xxx
})
)
双击地图事件,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onDoubldeClick(
JSON.stringify({
longitude: xxx,
latitude: xxx,
projection: 'EPSG:3857',
floor: xxx
})
)
长按地图事件,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onLongClick(
JSON.stringify({
longitude: xxx,
latitude: xxx,
projection: 'EPSG:3857',
floor: xxx
})
)
单击地图标记事件,返回该标记包含的室内地图列表,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onMapMarkerClick(
JSON.stringify([
{
id: xxx,
address: xxx,
latitude: xxx,
longitude: xxx,
floor: xxx,
polygonLayerId: xxx,
poiLayerId: xxx,
routeLayerId: xxx,
xmin: xxx,
ymin: xxx,
xmax: xxx,
ymax: xxx
}, ...
])
)
单击用户标记事件,返回用户标记信息,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onFeatureClick(
JSON.stringify({
longitude: xxx,
latitude: xxx,
floor: xxx,
projection: PROJECTION_3857,
title: xxx,
subtitle:xxx
})
)
单击标记事件,返回标记信息,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onMarkerClick(
JSON.stringify({
longitude: xxx,
latitude: xxx,
floor: xxx,
projection: PROJECTION_3857,
title: xxx,
subtitle:xxx
})
)
运行导航指令后,返回的文字提醒信息,回调参数为 Json 字符串,需要先解码 (Android / iOS)
onRouteResult(
JSON.stringify(result)
)
Test Case
window.loadMap(
{
floor: 1,
id: 1,
address: "北京市海淀区xx产业园",
latitude: 3660825.8273595027,
longitude: 13539962.969968095,
polygonLayerId: "idc_center:idc_center_1_polygon",
poiLayerId: "idc_center:idc_center_1_poi",
routeLayerId: "idc_center:idc_center_1_route",
xmin: 13539924,
ymin: 3660807.25,
xmax: 13540008,
ymax: 3660845
}
);
window.loadUsers([
{
floor:1,
latitude: 12969332.23871,
longitude: 4838049.78712,
projection: EPSG:3857
}
]);
window.loadPosition(
{
floor: 1,
latitude: 3660890,
longitude: 13539971,
direction: 90,
projection: EPSG:3857
},
false
);
window.loadRoutes(
{
floor: 1,
longitude: 13539937.198286774,
latitude: 3660896.772479681,
projection: EPSG:3857
},
{
floor: 1,
longitude: 13539952.147962471,
latitude: 3660897.033446588,
projection: EPSG:3857
}
);
License
MIT © liubx