ole/build/control/buffer.js

OpenLayers Editor

import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser';
import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
import LinearRing from 'ol/geom/LinearRing';
import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, } from 'ol/geom';
import Select from 'ol/interaction/Select';
import Control from './control';
import bufferSVG from '../../img/buffer.svg';
/**
 * Control for creating buffers.
 * @extends {Control}
 * @alias ole.BufferControl
 */
class BufferControl extends Control {
    /**
     * @inheritdoc
     * @param {Object} [options] Control options.
     * @param {number} [options.hitTolerance] Select tolerance in pixels
     *   (default is 10)
     * @param {boolean} [options.multi] Allow selection of multiple geometries
     *   (default is false).
     * @param {ol.style.Style.StyleLike} [options.style] Style used when a feature is selected.
     */
    constructor(options) {
        super(Object.assign({ title: 'Buffer geometry', className: 'ole-control-buffer', image: bufferSVG, buffer: 50 }, options));
        /**
         * @type {ol.interaction.Select}
         * @private
         */
        this.selectInteraction = new Select({
            layers: this.layerFilter,
            hitTolerance: options.hitTolerance === undefined ? 10 : options.hitTolerance,
            multi: typeof options.multi === 'undefined' ? true : options.multi,
            style: options.style,
        });
    }
    /**
     * @inheritdoc
     */
    getDialogTemplate() {
        return `
      <label>Buffer width: &nbsp;
        <input type="text" id="buffer-width"
          value="${this.properties.buffer}"
        />
      </label>
      <input type="button" value="OK" id="buffer-btn" />
    `;
    }
    /**
     * Apply a buffer for seleted features.
     * @param {Number} width Buffer width in map units.
     */
    buffer(width) {
        const parser = new OL3Parser();
        parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);
        const features = this.selectInteraction.getFeatures().getArray();
        for (let i = 0; i < features.length; i += 1) {
            const jstsGeom = parser.read(features[i].getGeometry());
            const bo = new BufferOp(jstsGeom);
            const buffered = bo.getResultGeometry(width);
            features[i].setGeometry(parser.write(buffered));
        }
    }
    /**
     * @inheritdoc
     */
    activate() {
        var _a, _b, _c;
        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(this.selectInteraction);
        super.activate();
        (_b = document.getElementById('buffer-width')) === null || _b === void 0 ? void 0 : _b.addEventListener('change', (e) => {
            this.setProperties({ buffer: e.target.value });
        });
        (_c = document.getElementById('buffer-btn')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', () => {
            const input = document.getElementById('buffer-width');
            const width = parseInt(input.value, 10);
            if (width) {
                this.buffer(width);
            }
        });
    }
    /**
     * @inheritdoc
     */
    deactivate() {
        var _a;
        (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeInteraction(this.selectInteraction);
        super.deactivate();
    }
}
export default BufferControl;