mapcarrier v2.0.1

地图整合组件

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

配置项

事件常亮

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

EVENT

成员函数

数据格式

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' },
]