Wondering what’s next for npm?Check out our public roadmap! »

    indoor-positioning-map

    1.2.2 • Public • Published

    indoor-positioning-map

    React component to show custom indoor map with openlayers or leaflet

    NPM JavaScript Style Guide

    安装

    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

    Keywords

    none

    Install

    npm i indoor-positioning-map

    DownloadsWeekly Downloads

    4

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    13.2 MB

    Total Files

    6

    Last publish

    Collaborators

    • avatar