@vtx/map-icon NPM

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	否