tsg-web/src/models/map/index.ts

298 lines
7.3 KiB
TypeScript

import { createModel } from "@rematch/core";
import { RootModel } from "..";
import { CameraTarget, LayerSettings, LayerVisibleSettings, MapCtrlState } from "../_";
import { parseGeoJSONFeature } from "../../utils/tools";
function initState() {
return {
layerVisible: {
AdcdLayer: true,//行政区划
AdcdBorderInLayer: true,//乡镇边界
AdcdAllLayer: false,//县行政区划图层
HeLiuZhuJiLayer:false,//12条河流注记
RealDrpLayer: false,//雨量监测
RealDrpAllLayer: false,//监测站网-雨情站点
HdswLayer: false,//河道水位监测
HdswAllLayer: false,//监测站网-水位站点
ShuiKuLayer: false,//水库监测
ShuiDianZhanLayer: false,//水电站
TangYanBaLayer:false,//塘(堰)坝
YFZHDLayer:false,//易发灾害点
QSYDWLayer:false,//企事业单位
AZDLayer:false,//安置点
YsgcLayer:false,//引水工程
GongShuiLayer:false, //供水
SLLayer:false, //渗流
SYLayer:false, //渗压
WYLayer:false, //位移
BouaLayer: true,//咸丰县边界
BouaInLayer: false,//咸丰县边界_省内
BouaOutLayer: false,//咸丰县边界_省外
BouaOutsideLayer:true,//咸丰县以外边界
highroadLayer:true,//省级公路
jcsjLayer:true,//监测数据
FzdxLayer: false,
OfflineMap: true,//离线地图
SatelliteImage: false,//卫星影像
PicStLayer: false,
XjHdswLayer: false,
XxjyswzLayer: false,
SmallSkRiskLayer: false,
XjRealDrpLayer: false,
WxqLayer: false,
RainLayer: false,
RainLayerRadar: false,
RainLayerRh: false,
WarnLayer: true,
ForecastLayer: true,
RhbjqLayer: false,
HLLayer: true,
HLLayer2: true,
HL2Layer: true,
XLYLayer: false,
RadarLayer: false,
RainLayerDx: false,
ContourLayer: false,
ContourLayerLoop: false,
RivlLayer: true,
GQLayer: true,
ZQLayer: true,
SZLayer: true,
ControledSZLayer: true,
AdcdBorderLayer_422826100: false,//高乐山镇
// AdcdBorderLayer_422826106: false,//曲江镇
AdcdBorderLayer_422826200: false,//曲江镇
AdcdBorderLayer_422826101: false,//忠堡镇
AdcdBorderLayer_422826102: false,//坪坝营镇
AdcdBorderLayer_422826103: false,//朝阳寺镇
AdcdBorderLayer_422826104: false,//清坪镇
AdcdBorderLayer_422826201: false,//唐崖镇
AdcdBorderLayer_422826202: false,//活龙坪乡
AdcdBorderLayer_422826203: false,//小村乡
AdcdBorderLayer_422826204: false,//黄金洞乡
AdcdBorderLayer_422826400: false,//大路坝区
Dcpj_danadLayer: false,//危险区
Dcpj_placementLayer: false,//安置点
Dcpj_transferLayer: false,//转移路线
Dcpj_flrvvlgLayer: false,//沿河居民户
Dcpj_bsnssinfoLayer: false,//企事业单位
Dcpj_bridgeLayer: false,//桥梁
Dcpj_culvertLayer: false,//路涵
Dcpj_sluiceLayer: false,//水闸
Dcpj_daminfoLayer: false,//塘(堰)坝
Dcpj_dikeLayer: false,//堤防
Dcpj_wbrinfoLayer: false,//无线预警广播
},
layerSetting: {
dem: true,
dom: true,
},
yqz:{
SH:true,
SW:false,
QX:false,
SK:false,
},
sqz:{
SH:true,
SW:false,
SK:false,
},
zhongxingSk:true,
cameraTarget: undefined,
mode: '2d',
markerSetting: {}, // type -> { id -> obj }
rightStack: [],
search: "",
clickRainLayer: false,
clickContourLayer: false,
map: null,
clickLoopBtn: false
};
}
export const map = createModel<RootModel>()({
state: initState() as MapCtrlState,
reducers: {
// 新增只关闭业务图层的方法(保留基础底图)
closeBusinessLayers(state): MapCtrlState{
const s = { ...state };
const businessLayersClosed: Record<string, boolean> = {};
// 关闭特定的业务图层
const businessLayers = [
"HdswLayer", "RealDrpLayer", "SYLayer", "TuRangLayer", "PicStLayer", 'AZDLayer', "QSYDWLayer", 'YHJMHLayer',
"ShuiKuLayer"
];
businessLayers.forEach(layer => {
businessLayersClosed[layer] = false;
});
s.layerVisible = {
...s.layerVisible,
...businessLayersClosed,
};
return s;
},
setMap(state, map) {
return {
...state,
map
};
},
setClickLoopBtn(state, val) {
return {
...state,
clickLoopBtn: val
}
},
setLayerVisible(state, vo: LayerVisibleSettings): MapCtrlState {
const s = { ...state };
s.layerVisible = {
...s.layerVisible,
...vo,
};
return s;
},
setLayerSetting(state, so: LayerSettings): MapCtrlState {
const s = { ...state };
s.layerSetting = {
...s.layerSetting,
...so,
};
return s;
},
setYqz(state, val) {
return {
...state,
yqz: val
}
},
setSqz(state, val) {
return {
...state,
sqz: val
}
},
setCameraTarget(state, o: CameraTarget): MapCtrlState {
return { ...state, cameraTarget: o }
},
setMode(state, val) {
return {
...state,
mode: val
}
},
setClickRainLayer(state, val) {
return {
...state,
mode: val
}
},
setClickContourLayer(state, val) {
return {
...state,
mode: val
}
},
// 不直接调用,控件底层用
setMarkerSetting(state: any, so) {
const s = { ...state };
s.markerSetting = {
...s.markerSetting,
...so,
};
return s;
},
reset() {
return initState();
},
setRightStack(state: any, { name, open }) {
if (!name) {
return state;
}
const rightStack = (state.rightStack || []).filter((o: any) => o !== name);
if (open) {
rightStack.push(name);
}
return { ...state, rightStack };
},
setSearch(state, search) {
return {
...state,
search
};
},
setZhongxingSk(state, zhongxingSk) {
return {
...state,
zhongxingSk
};
},
},
effects: dispatch => ({
highlightFeatures(records) {
records = records.map((o: any) => {
if (!o || !o.type || !o.props) {
return null;
}
const feature = parseGeoJSONFeature(o.props);
console.log("148+++", feature);
if (!feature || !feature.properties) {
console.error('invalid record to highlight');
return null;
}
feature.properties = o;
return feature;
}).filter(Boolean);
dispatch.runtime.setLayerSetting({ highlight: records })
},
// 新增只关闭业务图层的effect方法
closeBusinessLayersEffect() {
dispatch.map.closeBusinessLayers();
},
resetMap() {
dispatch.map.reset();
},
openHighlights(ctx) {
const { title, records } = ctx;
if (!title || !records) {
this.setSearch(null);
this.setRightStack({ name: 'search', open: false });
return;
}
this.setSearch({
mode: 'select',
records,
title,
});
this.setRightStack({ name: 'search', open: true });
},
})
});