From 57ec64dd01cf51351bcfd0c0bf48750ac7b72102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Thu, 2 Jun 2022 09:17:18 +0200
Subject: [PATCH] retrieve opacity for features on map
---
.../FeatureType/SymbologySelector.vue | 2 +-
src/services/map-service.js | 19 +++++++++++++--
.../FeatureType/FeatureTypeSymbology.vue | 24 +++++++++++--------
3 files changed, 32 insertions(+), 13 deletions(-)
diff --git a/src/components/FeatureType/SymbologySelector.vue b/src/components/FeatureType/SymbologySelector.vue
index cefaec73..b2dc1389 100644
--- a/src/components/FeatureType/SymbologySelector.vue
+++ b/src/components/FeatureType/SymbologySelector.vue
@@ -107,7 +107,7 @@ export default {
html_name: 'couleur',
value: '#000000',
},
- opacity: 0,
+ opacity: 1,
}
};
},
diff --git a/src/services/map-service.js b/src/services/map-service.js
index 2c253118..7388587d 100644
--- a/src/services/map-service.js
+++ b/src/services/map-service.js
@@ -340,6 +340,19 @@ const mapService = {
}
},
+ retrieveFeatureOpacity: function (featureType, properties) {
+ const colorsStyle = featureType.colors_style;
+ if (featureType && colorsStyle && colorsStyle.custom_field_name) {
+ const currentValue = properties[colorsStyle.custom_field_name];
+ if (currentValue) {
+ const colorStyle = colorsStyle.opacities[currentValue];
+ return parseFloat(colorStyle ? colorStyle : featureType.opacity);
+ }
+ }
+ //* parseFloat is not necessary but used for precaution
+ return parseFloat(featureType.opacity);
+ },
+
addVectorTileLayer: function (url, projectId, featureTypes, formFilters) {
const format_cfg = {/*featureClass: Feature*/ };
const mvt = new MVT(format_cfg);
@@ -380,7 +393,9 @@ const mapService = {
color : '#000000';
const rgbaColor = asArray(colorValue);
- rgbaColor[3] = 0.5;//opacity
+ console.log({ featureType, properties });
+ //* set opacity from feature-type colors_style
+ rgbaColor[3] = this.retrieveFeatureOpacity(featureType, properties) || 0.5;//opacity
const hiddenStyle = new Style();
const defaultStyle = new Style(
@@ -493,7 +508,7 @@ const mapService = {
feature_type = feature.getProperties().feature_type ||
featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
}
- } else { //? TPS: I couldn't find when this code is used, is this still in use ?
+ } else { //? TPD: I couldn't find when this code is used, is this still in use ?
status = feature.status;
if (status) status = status.name;
date_maj = feature.updated_on;
diff --git a/src/views/FeatureType/FeatureTypeSymbology.vue b/src/views/FeatureType/FeatureTypeSymbology.vue
index dac30e57..57f43bb3 100644
--- a/src/views/FeatureType/FeatureTypeSymbology.vue
+++ b/src/views/FeatureType/FeatureTypeSymbology.vue
@@ -99,7 +99,10 @@
feature_type.colors_style.value.icons[option] :
null
"
- :init-opacity="feature_type.colors_style.opacity"
+ :init-opacity="feature_type.colors_style.value ?
+ feature_type.colors_style.value.opacities[option] :
+ null
+ "
:geom-type="feature_type.customfield_set.geomType"
@set="setColorsStyle"
/>
@@ -150,10 +153,12 @@ export default {
fields: [],
colors: {},
icons: {},
+ opacities: {},
custom_field_name: '',
value: {
colors: {},
- icons: {}
+ icons: {},
+ opacities: {},
}
},
},
@@ -240,12 +245,15 @@ export default {
]),
initForm() {
- this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
- this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
+ this.form.color = JSON.parse(JSON.stringify(this.feature_type.color)); //? wouldn't be better to use lodash: https://medium.com/@pmzubar/why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript-b28ac5e36521
+ this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon)); //? since the library is already imported ?
this.form.colors_style = {
...this.form.colors_style,
...JSON.parse(JSON.stringify(this.feature_type.colors_style))
};
+ if (!this.form.colors_style.value['opacities']) { //* if the opacity values were never setted (would be better to find out why)
+ this.form.colors_style.value['opacities'] = {};
+ }
if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
this.selectedCustomfield =
this.feature_type.customfield_set.find(
@@ -256,8 +264,6 @@ export default {
setDefaultStyle(e) {
const { color, icon, opacity } = e.value;
- console.log({ color, icon, opacity });
- console.log('this.form', this.form);
this.form.color = color.value;
this.form.icon = icon;
this.form.opacity = opacity;
@@ -266,14 +272,12 @@ export default {
setColorsStyle(e) {
const { name, value } = e;
const { color, icon, opacity } = value;
- console.log({ color, icon, opacity });
- console.log(this.form.colors_style.colors);
- console.log(this.form.colors_style.colors[name]);
this.form.colors_style.colors[name] = color;
this.form.colors_style.icons[name] = icon;
- //this.form.colors_style.icons[name] = icon;
+ this.form.colors_style.opacities[name] = opacity;
this.form.colors_style.value.colors[name] = color;
this.form.colors_style.value.icons[name] = icon;
+ this.form.colors_style.value.opacities[name] = opacity; //? why do we need to duplicate values ? for MVT ?
},
sendFeatureSymbology() {
--
GitLab