Geomap: Geojson layer initial dynamic styling (#43308)

* support dynamic values in geojson

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
This commit is contained in:
nikki-kiga 2021-12-22 13:06:33 -08:00 committed by GitHub
parent 3d4fafcf70
commit c53e384cb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 8 deletions

View File

@ -9,7 +9,7 @@ import { ComparisonOperation, FeatureRuleConfig, FeatureStyleConfig } from '../.
import { Style } from 'ol/style';
import { FeatureLike } from 'ol/Feature';
import { GeomapStyleRulesEditor } from '../../editor/GeomapStyleRulesEditor';
import { defaultStyleConfig, StyleConfig } from '../../style/types';
import { defaultStyleConfig, StyleConfig, StyleConfigState } from '../../style/types';
import { getStyleConfigState } from '../../style/utils';
import { polyStyle } from '../../style/markers';
import { StyleEditor } from './StyleEditor';
@ -35,8 +35,9 @@ const defaultOptions: GeoJSONMapperConfig = {
};
interface StyleCheckerState {
poly: Style | Style[];
point: Style | Style[];
state: StyleConfigState;
poly?: Style | Style[];
point?: Style | Style[];
rule?: FeatureRuleConfig;
}
@ -84,8 +85,7 @@ export const geojsonLayer: MapLayerRegistryItem<GeoJSONMapperConfig> = {
if (r.style) {
const s = await getStyleConfigState(r.style);
styles.push({
point: s.maker(s.base),
poly: polyStyle(s.base),
state: s,
rule: r.check,
});
}
@ -94,8 +94,7 @@ export const geojsonLayer: MapLayerRegistryItem<GeoJSONMapperConfig> = {
if (true) {
const s = await getStyleConfigState(config.style);
styles.push({
point: s.maker(s.base),
poly: polyStyle(s.base),
state: s,
});
}
@ -108,7 +107,33 @@ export const geojsonLayer: MapLayerRegistryItem<GeoJSONMapperConfig> = {
if (check.rule && !checkFeatureMatchesStyleRule(check.rule, feature)) {
continue;
}
return isPoint ? check.point : check.poly;
// Support dynamic values
if (check.state.fields) {
const values = { ...check.state.base };
const { text } = check.state.fields;
if (text) {
values.text = `${feature.get(text)}`;
}
if (isPoint) {
return check.state.maker(values);
}
return polyStyle(values);
}
// Lazy create the style object
if (isPoint) {
if (!check.point) {
check.point = check.state.maker(check.state.base);
}
return check.point;
}
if (!check.poly) {
check.poly = polyStyle(check.state.base);
}
return check.poly;
}
return undefined; // unreachable
},

View File

@ -75,6 +75,7 @@ export const circleMarker = (cfg: StyleConfigValues) => {
});
};
// Does not have image
export const polyStyle = (cfg: StyleConfigValues) => {
return new Style({
fill: getFillColor(cfg),