122 lines
2.5 KiB
JavaScript
122 lines
2.5 KiB
JavaScript
import { DcpjPromise } from "../../../../models/_/dcpj";
|
|
import { parseGeoJSON } from "../../../../utils/tools";
|
|
import { DCPJ_TYPES } from "../../consts";
|
|
import { openRecordPop } from "../_";
|
|
import BaseLayer from "./baselayer";
|
|
|
|
function lineStyle() {
|
|
return {
|
|
id: DCPJ_TYPES.dike,
|
|
source: DCPJ_TYPES.dike,
|
|
minzoom: 1,
|
|
type: 'line',
|
|
layout: {},
|
|
paint: {
|
|
'line-color': [
|
|
'case',
|
|
['==', ['get', 'DGRAD'], 5], '#cd72eb',
|
|
'#f2502c'
|
|
],
|
|
'line-width': [
|
|
'case',
|
|
['==', ['get', 'DGRAD'], 1], 2.6,
|
|
['==', ['get', 'DGRAD'], 2], 2.6,
|
|
['==', ['get', 'DGRAD'], 3], 2.0,
|
|
['==', ['get', 'DGRAD'], 4], 1.8,
|
|
['==', ['get', 'DGRAD'], 5], 1.6,
|
|
2
|
|
],
|
|
}
|
|
};
|
|
}
|
|
|
|
function palingStyle() {
|
|
return {
|
|
id: 'dikePaling',
|
|
source: DCPJ_TYPES.dike,
|
|
minzoom: 10,
|
|
type: 'line',
|
|
layout: {},
|
|
paint: {
|
|
'line-color': [
|
|
'case',
|
|
['==', ['get', 'DGRAD'], 5], '#cd72eb',
|
|
'#f2502c'
|
|
],
|
|
//'line-offset': ["interpolate", ["exponential", 1.5], ["zoom"], 10, 3, 18, 12],
|
|
'line-width': ["interpolate", ["exponential", 1.5], ["zoom"], 10, 6, 18, 24],
|
|
|
|
"line-dasharray": [0.2, 0.8]
|
|
}
|
|
};
|
|
}
|
|
|
|
function labelStyle() {
|
|
return {
|
|
id: 'dikeLabel',
|
|
type: 'symbol',
|
|
source: DCPJ_TYPES.dike,
|
|
minzoom: 9,
|
|
layout: {
|
|
"symbol-placement": 'line',
|
|
'text-size': 14,
|
|
'text-font': ['Roboto Black'],
|
|
'text-field': ['get', 'NAME'],
|
|
'text-anchor': 'center',
|
|
'text-max-width': 6,
|
|
'text-offset': [0, 1.3],
|
|
},
|
|
'paint': {
|
|
'text-color': '#fcf26e',
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
export default class DcpjDikeLayer extends BaseLayer {
|
|
|
|
getStyle(index) {
|
|
let ret;
|
|
if (index === 'label') {
|
|
ret = labelStyle();
|
|
} else if (index === 'paling') {
|
|
ret = palingStyle();
|
|
} else if (index === 'line') {
|
|
ret = lineStyle();
|
|
} else {
|
|
return null
|
|
}
|
|
|
|
this._setStyleVisibility(ret);
|
|
return ret;
|
|
}
|
|
|
|
getName() {
|
|
return 'Dcpj_dikeLayer';
|
|
}
|
|
|
|
getSubLayers() {
|
|
return [DCPJ_TYPES.dike, 'dikePaling', 'dikeLabel'];
|
|
}
|
|
|
|
getRefreshInterval() {
|
|
return 0;
|
|
}
|
|
|
|
async doRefreshLayer(mapCtrl) {
|
|
const ms = mapCtrl.getSource(DCPJ_TYPES.dike);
|
|
|
|
const data = await DcpjPromise['dike'].get();
|
|
ms.setData(parseGeoJSON(data));
|
|
return true;
|
|
}
|
|
|
|
getFeatureTip(record) {
|
|
return record.NAME;
|
|
}
|
|
|
|
featureClicked(properties, dispatch) {
|
|
openRecordPop(dispatch, 'dike', properties)
|
|
}
|
|
}
|