mcfxkh-Web/src/views/Home/MapCtrl/mapstyle/realsklayer.js

170 lines
3.8 KiB
JavaScript

import clone from "clone";
import { SkRealPromise } from "../../../../models/_/real";
import { parseGeoJSON } from "../../../../utils/tools";
import { InfoPopNames } from "../../InfoPops";
import BaseLayer from "./baselayer";
const SourceName = '实时水库';
function textField({ skNormalLabelInvisible }) {
const tmp = [
'concat',
['case', ['==', ['get', 'rzWarning'], 1], '+', ''],
['get', 'strarz'],
'm'
];
return [
'step',
['zoom'],
skNormalLabelInvisible ? [
'case',
['==', ['get', 'rzWarning'], 1], ['concat', ['get', 'strarz'], 'm'],
''
] : tmp,
12, [
'format',
['get', 'stnm'], { 'font-scale': 0.9, 'text-color': '#fff' },
'\n', {},
tmp,
]
];
}
const Style = {
id: '水库',
type: 'symbol',
source: SourceName,
minzoom: 1,
maxzoom: 18,
layout: {
'icon-allow-overlap': true,
'text-allow-overlap': true,
'icon-image': [
'case',
['!=', ['get', 'rzState'], 1], '水库-离线',
['==', ['get', 'rzWarning'], 1], '水库-超汛限',
'水库'
],
'icon-size': [
'interpolate', ['linear'], ['zoom'],
10,
['case',
['!=', ['get', 'rzState'], 1], 0.4,
['==', ['get', 'rzWarning'], 1], 0.7,
0.7],
14, 0.7,
],
'text-size': [
'interpolate', ['linear'], ['zoom'],
10, ['case', ['==', ['get', 'rzWarning'], 1], 11, 8],
14, 14,
],
'text-font': ['Roboto Black'],
'text-field': undefined,
'text-anchor': 'top',
'text-offset': [0, 0.8],
'visibility': 'none',
},
paint: {
'text-color': [
'case',
['!=', ['get', 'rzState'], 1], '#888',
['>=', ['get', 'rz'], ['get', 'fsltdz']], '#f00',
'#0f0'
],
'text-halo-color': '#062040',
'text-halo-width': 1
}
};
export default class RealSkLayer extends BaseLayer {
static LayerName = 'RealSkLayer';
static SourceName = SourceName;
getStyle() {
const ret = clone(Style);
ret.layout['text-field'] = textField(this._layerSettings);
this._setStyleVisibility(ret);
return ret;
}
getName() {
return RealSkLayer.LayerName;
}
getSubLayers() {
return [Style.id];
}
getRefreshInterval() {
return 60 * 1000;
}
async doRefreshLayer(mapCtrl) {
const ms = mapCtrl.getSource(SourceName);
let data = await SkRealPromise.get();
if (Array.isArray(data)) {
data.forEach(o => {
const strarz = o.rz - o.fsltdz;
if (!isNaN(strarz)) {
o.strarz = strarz.toFixed(2);
}
});
}
data.map((item)=>{
if(item.stnm==='夏家山水库'){
}
})
const list = data.filter(o=>{
if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){
return false
}else{
return true
}
})
ms.setData(parseGeoJSON(list));
return true;
}
setLayerSettings(mapCtrl, settings) {
const { skNormalLabelInvisible } = settings || {};
if (this._layerSettings.skNormalLabelInvisible !== skNormalLabelInvisible) {
mapCtrl.setLayoutProperty(Style.id, 'text-field', textField({ skNormalLabelInvisible }))
this._layerSettings = { skNormalLabelInvisible };
}
}
getFeatureTip(record) {
return record.stnm;
}
featureClicked(properties, dispatch) {
if (properties.stnm === '小玉潭水库') {
/*
dispatch.runtime.setInfoDlg({
layerId: 'Three', properties: properties
});
*/
window.open('http://www.baidu.com')
} else {
dispatch.runtime.setFeaturePop({
type: InfoPopNames.RealSkPop,
properties,
coordinates: [properties.lgtd, properties.lttd],
offsetPop: true,
});
}
}
}