/**
* 条件相关
* @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
- 工具栏
- 搜索
- 工具
- 测距
- 测面
- 框选
- 圈选
- 多边形选择
- 地图书签
- 地图下载
- 地图打印
- 空间定位查询
- 比例尺
- 鹰眼
- 视图
- 分析
- 管网基础分析
- 缓冲区分析
- 联通性分析
- 流向性分析
- 横截面分析
- 纵断面分析
- 管网结构智能诊断
- 爆管关阀分析
- 消防栓分析
- 纳污范围分析
- 污染源分析
- 大口径分析
- 管网智能分析
- 孤立区域诊断
- 环状管网诊断
- 逆坡识别诊断
- 流向异常诊断
- 大管套小管诊断
- 图层
方法 |
作用 |
getLayerByFeature(feature) |
通过图形查询所属图层 |
getLayerByKey(keys) |
根据 keys 查找展示的图层 |
getVisibleLayersByKeys(key) |
根据 keys 查找展示的图层 |
showTip(content) |
展示提示 |
hideTip() |
隐藏提示 |
showModal(params) |
展示弹窗 |
// 加载 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);
参数 |
说明 |
类型 |
是否必填 |
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 |
否 |
方法 |
说明 |
refresh() |
刷新图层 |
loadData(data) |
加载数据 |
loadUrlData(url, params, method) |
通过接口请求加载数据 |
loadFeatures(features) |
加载图形 |
getFeatureByFieldValue(field, value) |
通过字段及内容查找图形 |
字段 |
说明 |
类型 |
是否必填 |
type |
图形类型: point 、polyline 、polygon
|
string |
是 |
lngLats |
经纬度: "119.0248,25.6389", 多个: "119.0248,25.6389;119.0248,25.6389" |
string |
是 |
coordType |
坐标系: wgs84 、bmap 、amap
|
string |
是 |
参数 |
说明 |
类型 |
是否必填 |
url |
图层接口 |
string |
否 |
method |
请求方式 |
string |
否 |
params |
请求参数 |
object |
否 |
sourceOptions |
数据源图层其他参数 |
object |
否 |
key |
图层标识 |
string |
是 |
name |
图层名称 |
string |
是 |
labelField |
标签取值字段 |
string |
是 |
template |
缩略看板 |
ReactNode |
否 |
方法 |
说明 |
getFeatureInfo(event, map) |
获取鼠标点击时的图形信息 |