cs-super-map
基于cs-map，超图提供的cesium，使用方法同cs-map
整体思路
组件列表
- 地图 Map
- 工具栏
- 搜索
- 工具
- 测距
- 测面
- 框选
- 圈选
- 多边形选择
- 地图书签
- 地图下载
- 地图打印
- 空间定位查询
- 比例尺
- 鹰眼
- 视图
- 分析
- 管网基础分析
- 缓冲区分析
- 联通性分析
- 流向性分析
- 横截面分析
- 纵断面分析
- 管网结构智能诊断
- 爆管关阀分析
- 消防栓分析
- 纳污范围分析
- 污染源分析
- 大口径分析
- 管网智能分析
- 孤立区域诊断
- 环状管网诊断
- 逆坡识别诊断
- 流向异常诊断
- 大管套小管诊断
- 图层
地图
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 工具类