comparison client/src/components/map/styles.js @ 3335:59db0b5921c5

client: added layer for fairway availability diagrams with demo diagrams
author Markus Kottlaender <markus@intevation.de>
date Mon, 20 May 2019 17:34:43 +0200
parents 00548f0e81c3
children 8c435f9a85bb
comparison
equal deleted inserted replaced
3334:8c96b7379aea 3335:59db0b5921c5
169 }) 169 })
170 ); 170 );
171 } 171 }
172 if (feature.get("fa_critical") && !isLegend) { 172 if (feature.get("fa_critical") && !isLegend) {
173 s.push(styles.red1); 173 s.push(styles.red1);
174 }
175 return s;
176 },
177 bottleneckFairwayAvailability(feature, resolution, isLegend) {
178 let s = [];
179 if (isLegend) {
180 s.push(
181 new Style({
182 image: new Icon({
183 src: require("@/assets/fa-diagram.png"),
184 anchor: [0.5, 0.5],
185 scale: 1
186 })
187 })
188 );
189 }
190 if (feature.get("fa_critical") && feature.get("fa_data")) {
191 let frame = `<rect x='0' y='0' width='40' height='104' stroke-width='0' fill='white'/>`;
192 let lnwl = `<rect x='2' y='22' width='18' height='80' stroke-width='0' fill='aqua'/>`;
193 let range1 = `<rect x='20' y='2' width='18' height='10' stroke-width='0' fill='hotpink'/>`;
194 let range2 = `<rect x='20' y='12' width='18' height='30' stroke-width='0' fill='darksalmon'/>`;
195 let range3 = `<rect x='20' y='42' width='18' height='60' stroke-width='0' fill='blue'/>`;
196 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='104'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
197 s.push(
198 new Style({
199 geometry: new Point([
200 feature.getGeometry().getExtent()[0],
201 feature.getGeometry().getExtent()[1] +
202 (feature.getGeometry().getExtent()[3] -
203 feature.getGeometry().getExtent()[1])
204 ]),
205 image: new Icon({
206 src: svg,
207 anchor: [1, 1],
208 scale: resolution > 50 ? 0.75 : 1
209 })
210 })
211 );
174 } 212 }
175 return s; 213 return s;
176 }, 214 },
177 dma(feature, resolution) { 215 dma(feature, resolution) {
178 if (resolution < 10) { 216 if (resolution < 10) {