1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
/**
* @see https://github.com/Raruto/leaflet-elevation/issues/251
*
* @example
* ```js
* L.control.Elevation({
* altitude: true,
* distance: true,
* handlers: [ 'Altitude', 'Distance', 'LinearGradient', ],
* linearGradient: {
* attr: 'z',
* path: 'altitude',
* range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
* min: 'elevation_min',
* max: 'elevation_max',
* },
* })
* ```
*/
export function LinearGradient() {
if (!this.options.linearGradient) {
return {};
}
const _ = L.Control.Elevation.Utils;
/**
* Initialize gradient color palette.
*/
const get_palette = function ({range, min, max, depth = 256}) {
const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, depth);
canvas.width = 1;
canvas.height = depth;
for (let i in range) {
gradient.addColorStop(i, range[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1, depth);
const { data } = ctx.getImageData(0, 0, 1, depth);
return {
/**
* Gets the RGB values of a given z value of the current palette.
*
* @param {number} value - Value to get the color for, should be between min and max.
* @returns {string} The RGB values as `rgb(r, g, b)` string
*/
getRGBColor(value) {
const idx = Math.floor(Math.min(Math.max((value - min) / (max - min), 0), 0.999) * depth) * 4;
return 'rgb(' + [data[idx], data[idx + 1], data[idx + 2]].join(',') + ')';
}
};
};
const { preferCanvas } = this.options;
const { attr, path: path_name, range, min, max } = L.extend({
attr: 'z',
path: 'altitude',
range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
min: 'elevation_min',
max: 'elevation_max',
}, (true === this.options.linearGradient) ? {} : this.options.linearGradient);
const gradient_id = path_name + '-gradient-' + _.randomId();
const legend_id = 'legend-' + gradient_id;
// Charte profile gradient
this.on('elechart_axis', () => {
if (!this._data.length) return;
const chart = this._chart;
const path = chart._paths[path_name];
const { defs } = chart._chart.utils;
const palette = get_palette({
min: isFinite(this.track_info[min]) ? this.track_info[min] : 0,
max: isFinite(this.track_info[max]) ? this.track_info[max] : 1,
range,
});
let gradient;
if (preferCanvas) {
/** ref: `path.__fillStyle` within L.Control.Elevation.Utils::drawCanvas(ctx, path) */
path.__fillStyle = gradient = chart._context.createLinearGradient(0, 0, chart._width(), 0);
} else {
defs.select('#' + gradient_id).remove();
gradient = defs.append('svg:linearGradient').attr('id', gradient_id);
gradient.addColorStop = function(offset, color) { gradient.append('svg:stop').attr('offset', offset).attr('stop-color', color) };
path.attr('fill', 'url(#' + gradient_id + ')').classed('area', false);
}
// Generate gradient for each segment picking colors from palette
for (let i = 0, data = this._data; i < data.length; i++) {
gradient.addColorStop((i) / data.length, palette.getRGBColor(data[i][attr]));
}
});
// Legend item gradient
this.on('elechart_updated', () => {
const chart = this._chart;
const { defs } = chart._chart.utils;
defs.select('#' + legend_id).remove();
const legendGradient = defs.append('svg:linearGradient').attr('id', legend_id);
Object.keys(range).sort().forEach(i => legendGradient.append('svg:stop').attr('offset', i).attr('stop-color', range[i]));
chart._container
.select('.legend-' + path_name + ' > rect')
.attr('fill', 'url(#' + legend_id + ')')
.classed('area', false);
});
return { };
}
|
