ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

scaleBarColors a new option for scalebar colors

Browse Source
This commit is contained in:
jeanpierre
2022-07-15 19:14:46 +02:00
parent 492458a141
commit d3861b0922
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/ol/control/ScaleLine.js
View File

@@ -65,6 +65,9 @@ const DEFAULT_DPI = 25.4 / 0.28;
* when `bar` is `true`. * when `bar` is `true`.
* @property {number|undefined} [dpi=undefined] dpi of output device such as printer. Only applies * @property {number|undefined} [dpi=undefined] dpi of output device such as printer. Only applies
* when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed. * when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed.
* @property {array<string>} [scaleBarColors=['#ffffff','#000000']] 2 colors to alternate the steps colors of the scalebar. Only applies
* when `bar` is `true`. If undefined the default will be white and black ['#ffffff','#000000'].
*/ */
/** /**
@@ -189,6 +192,12 @@ class ScaleLine extends Control {
* @type {number|undefined} * @type {number|undefined}
*/ */
this.dpi_ = options.dpi || undefined; this.dpi_ = options.dpi || undefined;
/**
* @private
* @type {array|['#ffffff','#000000']}
*/
this.scaleBarColors_ = options.scaleBarColors || ['#ffffff','#000000'];
} }
/** /**
@@ -346,7 +355,7 @@ class ScaleLine extends Control {
} }
let html; let html;
if (this.scaleBar_) { if (this.scaleBar_) {
html = this.createScaleBar(width, count, suffix); html = this.createScaleBar(width, count, suffix, scaleBarColors);
} else { } else {
html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix; html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
} }
@@ -372,14 +381,15 @@ class ScaleLine extends Control {
* @param {number} width The current width of the scalebar. * @param {number} width The current width of the scalebar.
* @param {number} scale The current scale. * @param {number} scale The current scale.
* @param {string} suffix The suffix to append to the scale text. * @param {string} suffix The suffix to append to the scale text.
* @param {array<string>} color The 2 colors of the scalebar.
* @return {string} The stringified HTML of the scalebar. * @return {string} The stringified HTML of the scalebar.
*/ */
createScaleBar(width, scale, suffix) { createScaleBar(width, scale, suffix, color) {
const mapScale = const mapScale =
'1 : ' + Math.round(this.getScaleForResolution()).toLocaleString(); '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
const scaleSteps = []; const scaleSteps = [];
const stepWidth = width / this.scaleBarSteps_; const stepWidth = width / this.scaleBarSteps_;
let backgroundColor = '#ffffff'; let backgroundColor = color[0];
for (let i = 0; i < this.scaleBarSteps_; i++) { for (let i = 0; i < this.scaleBarSteps_; i++) {
if (i === 0) { if (i === 0) {
// create the first marker at position 0 // create the first marker at position 0
@@ -411,12 +421,8 @@ class ScaleLine extends Control {
} }
scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix)); scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix));
} }
// switch colors of steps between black and white // switch colors of steps
if (backgroundColor === '#ffffff') { backgroundColor = (backgroundColor === color[0]) ? color[1] : color[0];
backgroundColor = '#000000';
} else {
backgroundColor = '#ffffff';
}
} }
let scaleBarText; let scaleBarText;