地图整合组件

v1.0说明

mapcarrier是为了快速调用高德地图而整合的组件。

安装

npm install mapcarrier

快速使用

安装完成之后，即可使用 import 或 require 进行引用

import Map from 'mapcarrier';

const Page = () => {
    
    const map = new Map({
        container: document.getElementById('container'),
        width: 1024,
        height: 768,
        path: 'http://localhost:3000/',
        mapid: '',
        mapsecret: '',
        editor: true,
    })
    map.on(
        map.EVENT.MOUNTED,
        () => {
            map.setRelatedData(RelatedData)
            map.setStateList(StateList)
            //map.setShowList(ShowList)
            map.showAll()
        }
    )
    map.on(
        map.EVENT.CLICK_POINT,
        data => {}
    )
    map.render()

    return <div id="container"/>;
};

export default Page;

API

配置项

| 参数 | 说明 | 类型 | 默认值 | |-----------|------|-----|-------| | container | 必填，地图容器 | ReactNode | string | - | | path | 必填，地图云平台地址 | string | - | | mapid | 必填，地图参数 | string | - | | mapsecret | 必填，地图参数 | string | - | | width | 地图宽度 | number | 1024 | | height | 地图高度 | number | 768 | | editor | 地图是否显示编辑模式：true、编辑模式；false，展示模式 | boolean | false |

事件常亮

地图实例生成后，可获取实例中包含的事件常量
例如： ( new Map() ).EVENT.MOUNTED

EVENT

| 事件 | 说明 | |----|--------------------------------| |MOUNTED| 地图加载完成 | |CLICK_POINT| 地图点被点击触发的事件，callback参数为其关联数据信息 |

成员函数

| 函数名 | 说明 | 类型 | |----------------|---------|---------------------------| | on | 监听内部事件 | function(EVENT, callback) | | render | 渲染地图 | function( ) | | clear | 清除地图 | function( ) | | setWidth | 设置地图宽度 | function( number ) | | setHeight | 设置地图高度 | function( number ) | | setEditor | 设置地图模式 | function( boolean ) | | setMapid | 设置地图参数 | function( string ) | | setMapsecret | 设置地图参数 | function( string ) | | setPath | 设置云平台地址 | function( string ) | | setRelatedData | 设置关联数据 | function( data )，数据格式参见下方 | | setStateList | 设置节点状态 | function( data )，数据格式参见下方 | | setShowList | 设置可显示节点 | function( data )，数据格式参见下方 | | showAll | 显示所有节点 | function( ) |

数据格式

RelatedData

节点可选择的管理数据，子系统每次调用地图时都使用setRelatedData设置一次最新关联数据。

{ key: value, key: value, ... }
说明：
key : 数据分类
value : 数据类中的可选数据数组，每项内容中id、name为必须有的数据，其余可随意添加。

数据示例：

{
        "建筑": [
            { id: '1', name: '建筑1', group: '建筑' },
            { id: '2', name: '建筑2', group: '建筑' },
            { id: '3', name: '建筑3', group: '建筑' },
            { id: '4', name: '建筑4', group: '建筑' },
            { id: '5', name: '建筑5', group: '建筑' },
            { id: '6', name: '建筑6', group: '建筑' },
            { id: '7', name: '建筑7', group: '建筑' },
            { id: '8', name: '建筑8', group: '建筑' },
        ],
        "变电所": [
            { id: '1', name: '变电所1', group: '变电所' },
            { id: '2', name: '变电所2', group: '变电所' },
            { id: '3', name: '变电所3', group: '变电所' },
            { id: '4', name: '变电所4', group: '变电所' },
            { id: '5', name: '变电所5', group: '变电所' },
            { id: '6', name: '变电所6', group: '变电所' },
            { id: '7', name: '变电所7', group: '变电所' },
            { id: '8', name: '变电所8', group: '变电所' },
        ]
} 

ShowList

节点筛选显示数据
必须要 关联数据 中的 id、group

数据示例

[
    { id: '1', group: '建筑' },
    { id: '1', group: '变电所' },
]

StateList

状态数据
必须要 关联数据 中的 id、group
此外必须添加 state 字段，可填数据：blue，green，orange，purple，red

数据示例

[
    { id: '1', group: '建筑', state: 'green' },
    { id: '6', group: '建筑', state: 'orange' },
    { id: '3', group: '变电所', state: 'orange' },
]