map-icon

基于 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 工具类