Icon Symbolizer width and height

Edit

图标符号器宽度和高度

vector 86 style 27 icon 9 marker 6 width 1 height 1

Width:

Height:

Scale approx.:

使用图标的宽度和高度属性的示例。

使用图标宽度和高度属性的示例。通过上方的输入框调整实际的宽度和高度。

main.js

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Point from 'ol/geom/Point.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Icon from 'ol/style/Icon.js';
import Style from 'ol/style/Style.js';

const widthInput = document.getElementById('width-input');
const heightInput = document.getElementById('height-input');
const clearWidthButton = document.getElementById('clear-width-button');
const clearHeightButton = document.getElementById('clear-height-button');
const scaleSpan = document.getElementById('scale');

const iconFeature = new Feature({
  geometry: new Point([0, 0]),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});
const iconStyle = new Style({
  image: new Icon({
    src: 'data/icon.png',
    width: Number(widthInput.value),
    height: Number(heightInput.value),
  }),
});
iconFeature.setStyle(iconStyle);

widthInput.addEventListener('input', (event) => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      width: Number(event.target.value),
      height: currentIcon.getHeight(),
    }),
  );
  iconFeature.setStyle(iconStyle);
});
heightInput.addEventListener('input', (event) => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      height: Number(event.target.value),
      width: currentIcon.getWidth(),
    }),
  );
  iconFeature.setStyle(iconStyle);
});
clearWidthButton.addEventListener('click', () => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      height: currentIcon.getHeight(),
    }),
  );
  iconFeature.setStyle(iconStyle);
  widthInput.value = String(Math.round(iconStyle.getImage().getWidth()));
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
  iconFeature.setStyle(iconStyle);
});
clearHeightButton.addEventListener('click', () => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      width: currentIcon.getWidth(),
    }),
  );
  iconFeature.setStyle(iconStyle);
  heightInput.value = String(Math.round(iconStyle.getImage().getHeight()));
  iconFeature.setStyle(iconStyle);
});

const vectorSource = new VectorSource({
  features: [iconFeature],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const map = new Map({
  layers: [vectorLayer],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 3,
  }),
});
map.on(
  'rendercomplete',
  () => (scaleSpan.innerText = formatScale(iconStyle.getImage().getScale())),
);

function formatScale(scale) {
  return Array.isArray(scale)
    ? '[' + scale?.map((v) => v.toFixed(2)).join(', ') + ']'
    : scale;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Icon Symbolizer width and height</title>
    <link rel="stylesheet" href="https://openlayers.vip/apidoc/resources/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"><div id="popup"></div></div>

    <div class="controls">
      <div style="margin: 1em 0;">
        <label for="width">Width:</label>
        <input id="width-input" name="width" type="number" value="40"/>
        <button id="clear-width-button">clear</button>
      </div>
      <div style="margin: 1em 0;">
        <label for="height">Height:</label>
        <input id="height-input" name="height" type="number" value="40"/>
        <button id="clear-height-button">clear</button>
      </div>
      <div style="margin: 1em 0;">
        <label for="height">Scale approx.:</label>
        <span id="scale"></span>
      </div>
    </div>

    <script src="https://openlayers.vip/apidoc/resources/bootstrap.bundle.min.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "icon-width",
  "dependencies": {
    "ol": "10.9.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}