# ol-map

## 分析组件实现代码参考示例

```js
/**
 * 条件相关
 * @description: 用于展示条件查询、绘制控件等
 */
const Search = () => {
    const { map } = useProps();

    return <></>;
};

/**
 * 结果
 * @description: 用于展示分析结果列表、结果图层等
 */
const Result = () => {
    const { map } = useProps();

    return <></>;
};

/**
 * 分析类
 * @description: 用于实现分析功能
 */
class AnalysisClass extends EventEmitter {
    constructor(props) {
        this.map = props.map;

        this.key = 'XXX'; // 相应的分析标识
    }

    // true 激活｜false 取消激活
    setActive(active) {}

    // 销毁
    destroy() {}
}

/**
 * 分析
 * @description: 仅控制相关子组件的展示，不应有业务逻辑处理
 */
const Analysis = () => {
    const { map } = useProps();
    const [result, setResult] = useState({ show: false });

    const analysis = useRef();

    useEffect(() => {
        analysis.current = new AnalysisClass({ map });

        // 添加分析控件
        map.addAnalysis(analysis.current);

        return () => {
            // 移除分析控件
            map.removeAnalysis(analysis.current);
        };
    }, []);

    return (
        <>
            <Search setResult={setResult} />

            {result?.show && <Result />}
        </>
    );
};
```

基于 openlayers 封装的地图库

## 整体思路

## 组件列表

-   地图 Map
    -   底图切换
        -   天地图-矢量
        -   天地图-卫星
    -   绘制 Draw
        -   点
        -   线
        -   面
        -   圆
    -   图层 Layer
        -   图形图层
        -   影像图层
-   工具栏
    -   搜索
    -   工具
        -   测距
        -   测面
        -   框选
        -   圈选
        -   多边形选择
        -   地图书签
        -   地图下载
        -   地图打印
        -   空间定位查询
        -   比例尺
        -   鹰眼
    -   视图
        -   默认视角
        -   放大
        -   缩小
    -   分析
        -   管网基础分析
            -   缓冲区分析
            -   联通性分析
            -   流向性分析
            -   横截面分析
            -   纵断面分析
        -   管网结构智能诊断
            -   爆管关阀分析
            -   消防栓分析
            -   纳污范围分析
            -   污染源分析
            -   大口径分析
        -   管网智能分析
            -   孤立区域诊断
            -   环状管网诊断
            -   逆坡识别诊断
            -   流向异常诊断
            -   大管套小管诊断
    -   图层
        -   全选
        -   行政区划
        -   ......

### 地图

#### method

| 方法                        | 作用                     |
| --------------------------- | ------------------------ |
| getLayerByFeature(feature)  | 通过图形查询所属图层     |
| getLayerByKey(keys)         | 根据 keys 查找展示的图层 |
| getVisibleLayersByKeys(key) | 根据 keys 查找展示的图层 |
| showTip(content)            | 展示提示                 |
| hideTip()                   | 隐藏提示                 |
| showModal(params)           | 展示弹窗                 |

### FeatureLayer 图形图层

#### 示例

```jsx
// 加载 geoserver
let layer = new FeatureLayer({
    url: '/geoserver/zhsw/wms',
    params: {
        service: 'WFS',
        version: '1.0.0',
        request: 'GetFeature',
        maxFeatures: 99999,
        outputFormat: 'application/json',
        typeName: 'zhsw:putian_network_access_enterprise',
        QUERY_LAYERS: 'zhsw:putian_network_access_enterprise',
        ...params,
    },
    style: 'RWQY',
    zIndex: 5,
    key: 'SS_RWQY',
    name: '入网企业',
    autoRefresh: true,
    template: feature => {
        return <div>{feature.values_.name}</div>;
    },
});

map.addLayer(layer);
```

```jsx
// 加载 接口
let layer = new FeatureLayer({
    url: '/cloud/zhsw-jcss/api/device/list',
    params: {
        deviceTypeId: 'WATER_METER',
    },
    style: 'YWJ',
    zIndex: 5,
    key: 'SB_YWJ',
    name: '液位计',
    labelField: 'deviceFactoryName',
    autoRefresh: true, // 自动刷新
    template: feature => {
        return <PopupTemplate feature={feature} map={map} />;
    },
});

map.addLayer(layer);
```

```jsx
// 加载 数据
let layer = new FeatureLayer({
    data: {
        name: 'xxx液位计',
        geometryInfo: { coordType: 'wgs84', type: 'point', lngLats: '119.0248,25.6389' },
    }, // []
    style: 'YWJ',
    zIndex: 5,
    key: 'SB_YWJ',
    name: '液位计',
    labelField: 'name',
    autoRefresh: true, // 自动刷新
    template: feature => {
        return <PopupTemplate feature={feature} map={map} />;
    },
});

map.addLayer(layer);
```

#### api

| 参数          | 说明                                                                         | 类型      | 是否必填 |
| ------------- | ---------------------------------------------------------------------------- | --------- | -------- |
| url           | 图层接口                                                                     | string    | 否       |
| method        | 请求方式                                                                     | string    | 否       |
| params        | 请求参数                                                                     | object    | 否       |
| sourceOptions | 数据源图层其他参数                                                           | object    | 否       |
| data          | 直接通过 json 数据渲染，可忽略上面的请求，但注意必须包含 `geometryInfo` 字段 | object    | 否       |
| features      | 直接通过图形数据渲染，可忽略上面的请求                                       | object    | 否       |
| key           | 图层标识                                                                     | string    | 是       |
| name          | 图层名称                                                                     | string    | 是       |
| labelField    | 标签取值字段                                                                 | string    | 是       |
| style         | 图层样式，传入字符串时会直接从 MapIcon 中加载                                | string    | 是       |
| template      | 缩略看板                                                                     | ReactNode | 否       |
| autoRefresh   | 自动刷新标识                                                                 | string    | 否       |

#### method

| 方法                                 | 说明                   |
| ------------------------------------ | ---------------------- |
| refresh()                            | 刷新图层               |
| loadData(data)                       | 加载数据               |
| loadUrlData(url, params, method)     | 通过接口请求加载数据   |
| loadFeatures(features)               | 加载图形               |
| getFeatureByFieldValue(field, value) | 通过字段及内容查找图形 |

#### geometryInfo 说明

| 字段      | 说明                                                                  | 类型   | 是否必填 |
| --------- | :-------------------------------------------------------------------- | ------ | -------- |
| type      | 图形类型: `point`、`polyline`、`polygon`                              | string | 是       |
| lngLats   | 经纬度: "119.0248,25.6389", 多个: "119.0248,25.6389;119.0248,25.6389" | string | 是       |
| coordType | 坐标系: `wgs84`、`bmap`、`amap`                                       | string | 是       |

### ImageLayer 图像图层

#### api

| 参数          | 说明               | 类型      | 是否必填 |
| ------------- | ------------------ | --------- | -------- |
| url           | 图层接口           | string    | 否       |
| method        | 请求方式           | string    | 否       |
| params        | 请求参数           | object    | 否       |
| sourceOptions | 数据源图层其他参数 | object    | 否       |
| key           | 图层标识           | string    | 是       |
| name          | 图层名称           | string    | 是       |
| labelField    | 标签取值字段       | string    | 是       |
| template      | 缩略看板           | ReactNode | 否       |

#### method

| 方法                       | 说明                     |
| -------------------------- | ------------------------ |
| getFeatureInfo(event, map) | 获取鼠标点击时的图形信息 |

### Util 工具类
