@vtx/ol-map-analysis-v2

ol-map

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

/**
 * 条件相关
 * @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 图形图层

示例

// 加载 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);

// 加载 接口
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);

// 加载 数据
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 工具类