indoor-positioning-map

v1.2.2

Published

2 years ago

React component to show custom indoor map with openlayers or leaflet

Downloads

0High
0Medium
0Low

liubx1988

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

indoor-positioning-map

安装

使用

调用文档

进入室内环境，显示多楼层室内地图，提供楼层选择

返回室外地图

显示室内地图并定位到指定坐标

显示定位点

在地图上标记多个用户

在地图上打标记

地图导航

显示地图热图

显示地图历史轨迹

地图操作

回调事件 (需要在手机应用上有对于方法)

License