Merge pull request #13943 from MoonE/scaleline

Scaleline
2022-08-07 23:52:26 +02:00
parent 2c1c76c24e 03a16e3444
commit ef09482505
5 changed files with 110 additions and 143 deletions
--- a/examples/scale-line.css
+++ b/examples/scale-line.css
@@ -0,0 +1,15 @@
+#scaleBarOptions {
+  display: none;
+}
+
+input[type=range] {
+  vertical-align: middle;
+}
+
+.ol-scale-bar-inverted .ol-scale-singlebar-even {
+  background-color: var(--ol-background-color);
+}
+
+.ol-scale-bar-inverted .ol-scale-singlebar-odd {
+  background-color: var(--ol-subtle-foreground-color);;
+}
--- a/examples/scale-line.html
+++ b/examples/scale-line.html
@@ -7,6 +7,7 @@ docs: >
 tags: "scale-line, openstreetmap"
 ---
 <div id="map" class="map"></div>
+<label for="units">Units:</label>
 <select id="units">
  <option value="degrees">degrees</option>
  <option value="imperial">imperial inch</option>
@@ -15,18 +16,17 @@ tags: "scale-line, openstreetmap"
  <option value="metric" selected>metric</option>
 </select>

+<label for="type">Type:</label>
 <select id="type">
  <option value="scaleline">ScaleLine</option>
  <option value="scalebar">ScaleBar</option>
 </select>

-<select id="steps" style="display:none">
-  <option value=2>2 steps</option>
-  <option value=4 selected>4 steps</option>
-  <option value=6>6 steps</option>
-  <option value=8>8 steps</option>
-</select>
+<div id="scaleBarOptions">
+  <label for="steps">Steps:</label>
+  <input id="steps" type="range" value="4" min="1" max="8">

-<div id="showScaleTextDiv" style="display:none">
  <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
+
+  <label><input type="checkbox" id="invertColors"> Invert colors</label>
 </div>
--- a/examples/scale-line.js
+++ b/examples/scale-line.js
@@ -4,31 +4,32 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js';

+const scaleBarOptionsContainer = document.getElementById('scaleBarOptions');
 const unitsSelect = document.getElementById('units');
 const typeSelect = document.getElementById('type');
-const stepsSelect = document.getElementById('steps');
+const stepsRange = document.getElementById('steps');
 const scaleTextCheckbox = document.getElementById('showScaleText');
-const showScaleTextDiv = document.getElementById('showScaleTextDiv');
+const invertColorsCheckbox = document.getElementById('invertColors');

-let scaleType = 'scaleline';
-let scaleBarSteps = 4;
-let scaleBarText = true;
 let control;

 function scaleControl() {
-  if (scaleType === 'scaleline') {
+  if (typeSelect.value === 'scaleline') {
    control = new ScaleLine({
      units: unitsSelect.value,
    });
-    return control;
+    scaleBarOptionsContainer.style.display = 'none';
+  } else {
+    control = new ScaleLine({
+      units: unitsSelect.value,
+      bar: true,
+      steps: parseInt(stepsRange.value, 10),
+      text: scaleTextCheckbox.checked,
+      minWidth: 140,
+    });
+    onInvertColorsChange();
+    scaleBarOptionsContainer.style.display = 'block';
  }
-  control = new ScaleLine({
-    units: unitsSelect.value,
-    bar: true,
-    steps: scaleBarSteps,
-    text: scaleBarText,
-    minWidth: 140,
-  });
  return control;
 }
 const map = new Map({
@@ -45,34 +46,21 @@ const map = new Map({
  }),
 });

-function onChange() {
+function reconfigureScaleLine() {
+  map.removeControl(control);
+  map.addControl(scaleControl());
+}
+function onChangeUnit() {
  control.setUnits(unitsSelect.value);
 }
-function onChangeType() {
-  scaleType = typeSelect.value;
-  if (typeSelect.value === 'scalebar') {
-    stepsSelect.style.display = 'inline';
-    showScaleTextDiv.style.display = 'inline';
-    map.removeControl(control);
-    map.addControl(scaleControl());
-  } else {
-    stepsSelect.style.display = 'none';
-    showScaleTextDiv.style.display = 'none';
-    map.removeControl(control);
-    map.addControl(scaleControl());
-  }
+function onInvertColorsChange() {
+  control.element.classList.toggle(
+    'ol-scale-bar-inverted',
+    invertColorsCheckbox.checked
+  );
 }
-function onChangeSteps() {
-  scaleBarSteps = parseInt(stepsSelect.value, 10);
-  map.removeControl(control);
-  map.addControl(scaleControl());
-}
-function onChangeScaleText() {
-  scaleBarText = scaleTextCheckbox.checked;
-  map.removeControl(control);
-  map.addControl(scaleControl());
-}
-unitsSelect.addEventListener('change', onChange);
-typeSelect.addEventListener('change', onChangeType);
-stepsSelect.addEventListener('change', onChangeSteps);
-scaleTextCheckbox.addEventListener('change', onChangeScaleText);
+unitsSelect.addEventListener('change', onChangeUnit);
+typeSelect.addEventListener('change', reconfigureScaleLine);
+stepsRange.addEventListener('input', reconfigureScaleLine);
+scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
+invertColorsCheckbox.addEventListener('change', onInvertColorsChange);
--- a/src/ol/control/ScaleLine.js
+++ b/src/ol/control/ScaleLine.js
@@ -39,7 +39,8 @@ const DEFAULT_DPI = 25.4 / 0.28;

 /**
 * @typedef {Object} Options
- * @property {string} [className='ol-scale-line'] CSS Class name.
+ * @property {string} [className] CSS class name. The default is `ol-scale-bar` when configured with
+ * `bar: true`. Otherwise the default is `ol-scale-line`.
 * @property {number} [minWidth=64] Minimum width in pixels at the OGC default dpi. The width will be
 * adjusted to match the dpi used.
 * @property {number} [maxWidth] Maximum width in pixels at the OGC default dpi. The width will be
@@ -79,15 +80,11 @@ class ScaleLine extends Control {
  constructor(opt_options) {
    const options = opt_options ? opt_options : {};

-    const className =
-      options.className !== undefined
-        ? options.className
-        : options.bar
-        ? 'ol-scale-bar'
-        : 'ol-scale-line';
+    const element = document.createElement('div');
+    element.style.pointerEvents = 'none';

    super({
-      element: document.createElement('div'),
+      element: element,
      render: options.render,
      target: options.target,
    });
@@ -107,6 +104,13 @@ class ScaleLine extends Control {
     */
    this.un;

+    const className =
+      options.className !== undefined
+        ? options.className
+        : options.bar
+        ? 'ol-scale-bar'
+        : 'ol-scale-line';
+
    /**
     * @private
     * @type {HTMLElement}
@@ -334,12 +338,9 @@ class ScaleLine extends Control {
      previousDecimalCount = decimalCount;
      ++i;
    }
-    let html;
-    if (this.scaleBar_) {
-      html = this.createScaleBar(width, count, suffix);
-    } else {
-      html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
-    }
+    const html = this.scaleBar_
+      ? this.createScaleBar(width, count, suffix)
+      : count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;

    if (this.renderedHTML_ != html) {
      this.innerElement_.innerHTML = html;
@@ -365,87 +366,54 @@ class ScaleLine extends Control {
   * @return {string} The stringified HTML of the scalebar.
   */
  createScaleBar(width, scale, suffix) {
+    const resolutionScale = this.getScaleForResolution();
    const mapScale =
-      '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
-    const scaleSteps = [];
-    const stepWidth = width / this.scaleBarSteps_;
-    let backgroundColor = 'ol-scale-singlebar-odd';
-    for (let i = 0; i < this.scaleBarSteps_; i++) {
-      if (i === 0) {
-        // create the first marker at position 0
-        scaleSteps.push(this.createMarker('absolute', i));
-      }
+      resolutionScale < 1
+        ? Math.round(1 / resolutionScale).toLocaleString() + ' : 1'
+        : '1 : ' + Math.round(resolutionScale).toLocaleString();
+    const steps = this.scaleBarSteps_;
+    const stepWidth = width / steps;
+    const scaleSteps = [this.createMarker('absolute')];
+    for (let i = 0; i < steps; ++i) {
+      const cls =
+        i % 2 === 0 ? 'ol-scale-singlebar-odd' : 'ol-scale-singlebar-even';
      scaleSteps.push(
        '<div>' +
          '<div ' +
-          'class="ol-scale-singlebar ' +
-          backgroundColor +
-          '" ' +
-          'style=' +
-          '"width: ' +
-          stepWidth +
-          'px;"' +
+          `class="ol-scale-singlebar ${cls}" ` +
+          `style="width: ${stepWidth}px;"` +
          '>' +
          '</div>' +
-          this.createMarker('relative', i) +
-          /*render text every second step, except when only 2 steps */
-          (i % 2 === 0 || this.scaleBarSteps_ === 2
+          this.createMarker('relative') +
+          // render text every second step, except when only 2 steps
+          (i % 2 === 0 || steps === 2
            ? this.createStepText(i, width, false, scale, suffix)
            : '') +
          '</div>'
      );
-      if (i === this.scaleBarSteps_ - 1) {
-        {
-          /*render text at the end */
-        }
-        scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix));
-      }
-      // switch style of steps
-      backgroundColor =
-        backgroundColor === 'ol-scale-singlebar-odd'
-          ? 'ol-scale-singlebar-even'
-          : 'ol-scale-singlebar-odd';
    }
+    // render text at the end
+    scaleSteps.push(this.createStepText(steps, width, true, scale, suffix));

-    let scaleBarText;
-    if (this.scaleBarText_) {
-      scaleBarText =
-        '<div ' +
-        'class="ol-scale-text" ' +
-        'style="width: ' +
-        width +
-        'px;">' +
+    const scaleBarText = this.scaleBarText_
+      ? `<div class="ol-scale-text" style="width: ${width}px;">` +
        mapScale +
-        '</div>';
-    } else {
-      scaleBarText = '';
-    }
-    const container =
-      '<div ' +
-      'style="display: flex;">' +
-      scaleBarText +
-      scaleSteps.join('') +
-      '</div>';
-    return container;
+        '</div>'
+      : '';
+    return scaleBarText + scaleSteps.join('');
  }

  /**
   * Creates a marker at given position
-   * @param {string} position The position, absolute or relative
-   * @param {number} i The iterator
+   * @param {'absolute'|'relative'} position The position, absolute or relative
   * @return {string} The stringified div containing the marker
   */
-  createMarker(position, i) {
+  createMarker(position) {
    const top = position === 'absolute' ? 3 : -10;
    return (
      '<div ' +
      'class="ol-scale-step-marker" ' +
-      'style="position: ' +
-      position +
-      ';' +
-      'top: ' +
-      top +
-      'px;"' +
+      `style="position: ${position}; top: ${top}px;"` +
      '></div>'
    );
  }
@@ -469,19 +437,11 @@ class ScaleLine extends Control {
      '<div ' +
      'class="ol-scale-step-text" ' +
      'style="' +
-      'margin-left: ' +
-      margin +
-      'px;' +
-      'text-align: ' +
-      (i === 0 ? 'left' : 'center') +
-      '; ' +
-      'min-width: ' +
-      minWidth +
-      'px;' +
-      'left: ' +
-      (isLast ? width + 'px' : 'unset') +
-      ';"' +
-      '>' +
+      `margin-left: ${margin}px;` +
+      `text-align: ${i === 0 ? 'left' : 'center'};` +
+      `min-width: ${minWidth}px;` +
+      `left: ${isLast ? width + 'px' : 'unset'};` +
+      '">' +
      lengthString +
      '</div>'
    );
@@ -500,7 +460,7 @@ class ScaleLine extends Control {
    );
    const dpi = this.dpi_ || DEFAULT_DPI;
    const inchesPerMeter = 1000 / 25.4;
-    return parseFloat(resolution.toString()) * inchesPerMeter * dpi;
+    return resolution * inchesPerMeter * dpi;
  }

  /**
--- a/src/ol/ol.css
+++ b/src/ol/ol.css
@@ -41,20 +41,16 @@
  transition: all 0.25s;
 }

-.ol-scale-singlebar-even {
-  background-color: var(--ol-subtle-foreground-color);
-}
-
-.ol-scale-singlebar-odd {
-  background-color: var(--ol-background-color);
-}
-
 .ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
 }

+.ol-scale-bar-inner {
+  display: flex;
+}
+
 .ol-scale-step-marker {
  width: 1px;
  height: 15px;
@@ -89,6 +85,14 @@
  border: 1px solid var(--ol-foreground-color);
 }

+.ol-scale-singlebar-even {
+  background-color: var(--ol-subtle-foreground-color);
+}
+
+.ol-scale-singlebar-odd {
+  background-color: var(--ol-background-color);
+}
+
 .ol-unsupported {
  display: none;
 }