npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vtx/ol-map-analysis

v1.0.63

Published

React components for Vortex

Downloads

108

Readme

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 | 图形类型: pointpolylinepolygon | string | 是 | | lngLats | 经纬度: "119.0248,25.6389", 多个: "119.0248,25.6389;119.0248,25.6389" | string | 是 | | coordType | 坐标系: wgs84bmapamap | string | 是 |

ImageLayer 图像图层

api

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

method

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

Util 工具类