刘文柱

# 物流园区SDK

# 物流园区Auth权限校验模块

@baidu-map/logistics-park-auth 版本信息：

# 引入项目

# 1.CDN

<script src="https://unpkg.com/@baidu-map/logistics-park-auth@[版本号]/dist/index.umd.min.js"></script>
1

# 2.npm

npm install @baidu-map/logistics-park-auth --save
1
yarn add @baidu-map/logistics-park-auth
1

# 快速开始

在 uni-app 中使用示例

<template>
    <view>
        <text>logistics-park-auth</text>
    </view>
</template>
<script>
    export default {
        methods: {
            onMessage(options) {
                console.log('ID,Y,SK==', options);
            },
        },
    };
</script>
<script module="auth" lang="renderjs">
    import Auth from "@baidu-map/logistics-park-auth"
    export default {
      mounted() {
        new Auth({
          prefixPath: "prefixPath",
          resakey:"resakey",
          publicKeyId:"publicKeyId",
          onReady: (({ID,Y,SK})) => {
          this.$ownerInstance.callMethod('onMessage', {ID,Y,SK})
        },
          onRefreshAuthKey: ({ID,Y,SK}) => {
            this.$ownerInstance.callMethod('onMessage', {ID,Y,SK})
          }
      })
    }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# API

# Auth

构造函数

new Auth( AuthOptions );

# AuthOptions

实例化传入的对象包含以下属性：

参数名 说明 类型 是否必填 默认值
prefixPath 请求路径前缀 string 否 ""
resakey 公钥 string 是 无
publicKeyId 公钥 ID string 是 无
onReady 初始化完成时的回调函数 ( authKey: AuthKey
) => void		 否 无
onRefreshAuthKey 刷新 authKey 完成时的回调函数 ( authKey: AuthKey
) => void		 否 无

# 静态方法

Auth 含有以下静态方法：

名称 说明 类型
getPoiDetail 获取点击点 poi 详情，isPrivatePoi 表示是否为私有 poi ( poi: Poi
, isPrivatePoi?: boolean ) => Promise.resolve({ privatePoi: boolean, [key: string]: any})
searchPoi 根据关键字获取 poi 详情 ( keyword: string ) => Promise.resolve(results: any[])

# 实例方法

Auth 的实例对象含有以下方法：

名称 说明 类型
getAuthKey 获取 AuthKey ( ) => AuthKey
stopRefresh 停止对 authKey 的刷新 ( ) => void

# AuthKey

名称 说明 类型
ID 密钥的标识 string
Y 对称密钥 string
SK 和 ID 一起，采用云的签名算法，生成请求签名 string

# Poi

名称 说明 类型
uid poi 点的 uid，获取方式可以参考下面代码 getIconByClickPosition string
ak 百度地图 JSAPI 的 ak string

getIconByClickPosition 的使用说明在 这里 (opens new window) 查找

var map = new BMapGL.Map('domID');
map.addEventListener('click', function (e) {
    const { name, uid, position } = map.getIconByClickPosition(e) || {};
});
1
2
3
4

# 物流园区2D底图展示模块

2d 底图依赖权限模块，需要在权限加载完成之后进行底图的渲染

@baidu-map/logistics-park-map 版本信息：

# 引入项目

# 1.CDN

<script src="https://unpkg.com/@baidu-map/logistics-park-map@[版本号]/dist/index.umd.min.js"></script>
1

# 2.npm

npm install @baidu-map/logistics-park-map --save
1
yarn add @baidu-map/logistics-park-map
1

# 快速开始

# 基本例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script
            type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=mapak"
        ></script>
        <style>
            #content {
                width: 100vw;
                height: 100vh;
            }
        </style>
    </head>

    <body>
        <div id="content"></div>
        <script src="https://unpkg.com/@baidu-map/logistics-park-auth@2.0.0/dist/index.umd.min.js"></script>
        <script src="https://unpkg.com/@baidu-map/logistics-park-map@2.0.0/dist/index.umd.min.js"></script>
        <script>
            const _map = new BMapGL.Map(document.getElementById('content'), {
                maxZoom: 23,
                enableIconClick: true,
            });
            _map.centerAndZoom(new BMapGL.Point(106.52830194662107, 38.23834139133826), 12);
            _map.enableScrollWheelZoom(true);
            _map.addControl(new BMapGL.ScaleControl());
            _map.addControl(new BMapGL.ZoomControl());
            _map.addControl(new BMapGL.NavigationControl3D());
            const config = {
                prefixPath: '',
                resakey: 'resakey',
                publicKeyId: 'publicKeyId',
            };
            new BDAuth({
                ...config,
                onReady: () => {
                    new BDMap({
                        map: _map,
                        BMapGL: BMapGL,
                        Auth: BDAuth,
                    });
                },
                onRefreshAuthKey: (data) => {},
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# React 中使用

import { useEffect, useRef } from 'react';
import Auth from '@baidu-map/logistics-park-auth';
import BDMap from '@baidu-map/logistics-park-map';
const BMapGL = window.BMapGL;
const config = {
    prefixPath: '',
    resakey: 'resakey',
    publicKeyId: 'publicKeyId',
};
const App = () => {
    const mapContainer = useRef();

    useEffect(() => {
        const _map = new BMapGL.Map(mapContainer.current, {
            maxZoom: 23,
            enableIconClick: true,
        });
        _map.centerAndZoom(new BMapGL.Point(106.52830194662107, 38.23834139133826), 12);
        _map.enableScrollWheelZoom(true);
        _map.addControl(new BMapGL.ScaleControl());
        _map.addControl(new BMapGL.ZoomControl());
        _map.addControl(new BMapGL.NavigationControl3D());

        let bdmap;
        const authLogistics = new Auth({
            ...config,
            onReady: () => {
                bdmap = new BDMap({
                    map: _map,
                    BMapGL: BMapGL,
                    Auth: Auth,
                });
            },
            onRefreshAuthKey: (data) => {},
        });

        return () => {
            authLogistics.uninstall();
            bdmap.uninstall();
        };
    }, []);

    return <div style={{ height: '100vh', width: '100vw' }} ref={mapContainer}></div>;
};

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# API

# BDMap

构造函数

new BDMap( BDMapOptions );

# BDMapOptions

实例化传入的对象包含以下属性：

名称 说明 类型 是否必填
map 百度地图 JS API 的地图实例 - 创建地图实例 (opens new window) object 是
BMapGL 百度地图 JS API 的 BMapGL 库 object 是
Auth 权限构造函数 Auth 是
parkCode 与客户约定的园区编号，没有值查询全部 string 否
onMapReady 底图准备完成的回调函数 ( ) => void 否

# 物流园区3D底图展示模块

3d 底图依赖权限模块，需要在权限加载完成之后进行底图的渲染

@baidu-map/logistics-park-3dmap 版本信息：

# 引入项目

# 1.CDN

<script src="https://unpkg.com/@baidu-map/logistics-park-3dmap@[版本号]/dist/index.umd.min.js"></script>
1

# 2.npm

npm install @baidu-map/logistics-park-3dmap --save
1
yarn add @baidu-map/logistics-park-3dmap
1

# 快速开始

# 基本例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script
            type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=mapak"
        ></script>
        <style>
            #content {
                width: 100vw;
                height: 100vh;
            }
        </style>
    </head>

    <body>
        <div id="content"></div>
        <script src="https://unpkg.com/@baidu-map/logistics-park-auth@2.0.0/dist/index.umd.min.js"></script>
        <script src="https://unpkg.com/@baidu-map/logistics-park-3dmap@2.0.0/dist/index.umd.min.js"></script>
        <script>
            const _map = new BMapGL.Map(document.getElementById('content'), {
                maxZoom: 23,
                enableIconClick: true,
            });
            _map.centerAndZoom(new BMapGL.Point(106.52830194662107, 38.23834139133826), 12);
            _map.enableScrollWheelZoom(true);
            _map.addControl(new BMapGL.ScaleControl());
            _map.addControl(new BMapGL.ZoomControl());
            _map.addControl(new BMapGL.NavigationControl3D());
            const config = {
                prefixPath: '',
                resakey: 'resakey',
                publicKeyId: 'publicKeyId',
            };
            new BDAuth({
                ...config,
                onReady: () => {
                    new logisticsPark3Dmap({
                        map: _map,
                        BMapGL: BMapGL,
                        Auth: BDAuth,
                    });
                },
                onRefreshAuthKey: (data) => {},
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 在 React 中使用

import { useEffect, useRef } from 'react';
import Auth from '@baidu-map/logistics-park-auth';
import ThreeMap from '@baidu-map/logistics-park-3dmap';
const BMapGL = window.BMapGL;
const config = {
    prefixPath: '',
    resakey: 'resakey',
    publicKeyId: 'publicKeyId',
};
const App = () => {
    const mapContainer = useRef();

    useEffect(() => {
        const _map = new BMapGL.Map(mapContainer.current, {
            maxZoom: 23,
            enableIconClick: true,
        });
        _map.centerAndZoom(new BMapGL.Point(106.52830194662107, 38.23834139133826), 12);
        _map.enableScrollWheelZoom(true);
        _map.addControl(new BMapGL.ScaleControl());
        _map.addControl(new BMapGL.ZoomControl());
        _map.addControl(new BMapGL.NavigationControl3D());

        let threeMap;
        const authLogistics = new Auth({
            ...config,
            onReady: () => {
                threeMap = new ThreeMap({
                    map: _map,
                    Auth: Auth,
                });
            },
            onRefreshAuthKey: (data) => {},
        });

        return () => {
            authLogistics.uninstall();
            threeMap.uninstall();
        };
    }, []);

    return <div style={{ height: '100vh', width: '100vw' }} ref={mapContainer}></div>;
};

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# API

# ThreeMap

构造函数

new ThreeMap( ThreeMapOptions );

# ThreeMapOptions

实例化传入的对象包含以下属性：

名称 说明 类型 是否必填
map 百度地图 JS API 的地图实例 - 创建地图实例 (opens new window) object 是
Auth 权限构造函数 Auth 是
parkCode 与客户约定的园区编号，没有值查询全部 string 否
onMapReady 底图准备完成的回调函数 ( ) => void 否

# 物流园区Road道路管理模块

道路管理依赖权限模块，需要在权限加载完成之后进行道路的渲染

@baidu-map/logistics-park-road 版本信息：

# 引入项目

# 1.CDN

<script src="https://unpkg.com/@baidu-map/logistics-park-road@[版本号]/dist/index.umd.min.js"></script>
1

# 2.npm

npm install @baidu-map/logistics-park-road --save
1
yarn add @baidu-map/logistics-park-road
1

# 快速开始

# 基本使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script
            type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=mapak"
        ></script>
        <script
            type="text/javascript"
            src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.min.js"
        ></script>
        <style>
            #content {
                width: 100vw;
                height: 100vh;
            }
        </style>
    </head>

    <body>
        <div id="content"></div>
        <script src="https://unpkg.com/@baidu-map/logistics-park-auth@2.0.0/dist/index.umd.min.js"></script>
        <script src="https://unpkg.com/@baidu-map/logistics-park-road@2.0.0/dist/index.umd.min.js"></script>
        <script>
            const _map = new BMapGL.Map(document.getElementById('content'), {
                maxZoom: 23,
                enableIconClick: true,
            });
            _map.centerAndZoom(new BMapGL.Point(106.52830194662107, 38.23834139133826), 12);
            _map.enableScrollWheelZoom(true);
            _map.addControl(new BMapGL.ScaleControl());
            _map.addControl(new BMapGL.ZoomControl());
            _map.addControl(new BMapGL.NavigationControl3D());
            const config = {
                prefixPath: '',
                resakey: 'resakey',
                publicKeyId: 'publicKeyId',
            };
            new BDAuth({
                ...config,
                onReady: () => {
                    new BDRoad({
                        map: _map,
                        mapvgl: mapvgl,
                        BMapGL: BMapGL,
                        Auth: BDAuth,
                        renderOptions: {
                            showRender: true,
                        },
                    });
                },
                onRefreshAuthKey: (data) => {},
            });
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 在 React 中使用

import { useEffect, useRef } from 'react';
import Auth from '@baidu-map/logistics-park-auth';
import Road from '@baidu-map/logistics-park-road';
const BMapGL = window.BMapGL;
const mapvgl = window.mapvgl;
const config = {
    prefixPath: '',
    resakey: 'resakey',
    publicKeyId: 'publicKeyId',
};
const App = () => {
    const mapContainer = useRef();

    useEffect(() => {
        const _map = new BMapGL.Map(mapContainer.current, {
            maxZoom: 23,
            enableIconClick: true,
        });
        _map.centerAndZoom(new BMapGL.Point(106.52830194662107, 38.23834139133826), 12);
        _map.enableScrollWheelZoom(true);
        _map.addControl(new BMapGL.ScaleControl());
        _map.addControl(new BMapGL.ZoomControl());
        _map.addControl(new BMapGL.NavigationControl3D());

        const authLogistics = new Auth({
            ...config,
            onReady: () => {
                new Road({
                    map: _map,
                    mapvgl: mapvgl,
                    BMapGL: BMapGL,
                    Auth: Auth,
                    renderOptions: {
                        showRender: true,
                    },
                });
            },
            onRefreshAuthKey: (data) => {},
        });

        return () => {
            authLogistics.uninstall();
        };
    }, []);

    return <div style={{ height: '100vh', width: '100vw' }} ref={mapContainer}></div>;
};

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# API

# BDRoad

构造函数

new BDRoad( BDRoadOptions );

# BDRoadOptions

实例化传入的对象包含以下属性：

参数名 说明 类型 是否必填
map 百度地图 JS API 的地图实例 - 创建地图实例 (opens new window) object 是
BMapGL 百度地图 JS API 的 BMapGL 库 object 是
Auth 权限构造函数 Auth 是
parkCode 与客户约定的园区编号，没有值查询全部 string 否
renderOptions 包含 1 个属性，是否渲染到底图上 { showRender?: boolean }

# 实例方法

BDRoad 的实例对象含有以下方法：

名称 说明 类型
getView 获取 mapvgl.View 的实例对象，操作方法见文档 mapvgl.View (opens new window) ( ) => Object

← 量投npm →