Source: control/buffer.js

  1. import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser';
  2. import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
  3. import LinearRing from 'ol/geom/LinearRing';
  4. import {
  5. Point,
  6. LineString,
  7. Polygon,
  8. MultiPoint,
  9. MultiLineString,
  10. MultiPolygon,
  11. } from 'ol/geom';
  12. import Select from 'ol/interaction/Select';
  13. import Control from './control';
  14. import bufferSVG from '../../img/buffer.svg';
  15. /**
  16. * Control for creating buffers.
  17. * @extends {ole.Control}
  18. * @alias ole.BufferControl
  19. */
  20. class BufferControl extends Control {
  21. /**
  22. * @inheritdoc
  23. * @param {Object} [options] Control options.
  24. * @param {number} [options.hitTolerance] Select tolerance in pixels
  25. * (default is 10)
  26. * @param {boolean} [options.multi] Allow selection of multiple geometries
  27. * (default is false).
  28. * @param {ol.style.Style.StyleLike} [options.style] Style used when a feature is selected.
  29. */
  30. constructor(options) {
  31. super({
  32. title: 'Buffer geometry',
  33. className: 'ole-control-buffer',
  34. image: bufferSVG,
  35. buffer: 50,
  36. ...options,
  37. });
  38. /**
  39. * @type {ol.interaction.Select}
  40. * @private
  41. */
  42. this.selectInteraction = new Select({
  43. layers: this.layerFilter,
  44. hitTolerance:
  45. options.hitTolerance === undefined ? 10 : options.hitTolerance,
  46. multi: typeof options.multi === 'undefined' ? true : options.multi,
  47. style: options.style,
  48. });
  49. }
  50. /**
  51. * @inheritdoc
  52. */
  53. getDialogTemplate() {
  54. return `
  55. <label>Buffer width: &nbsp;
  56. <input type="text" id="buffer-width"
  57. value="${this.properties.buffer}"
  58. />
  59. </label>
  60. <input type="button" value="OK" id="buffer-btn" />
  61. `;
  62. }
  63. /**
  64. * Apply a buffer for seleted features.
  65. * @param {Number} width Buffer width in map units.
  66. */
  67. buffer(width) {
  68. const parser = new OL3Parser();
  69. parser.inject(
  70. Point,
  71. LineString,
  72. LinearRing,
  73. Polygon,
  74. MultiPoint,
  75. MultiLineString,
  76. MultiPolygon,
  77. );
  78. const features = this.selectInteraction.getFeatures().getArray();
  79. for (let i = 0; i < features.length; i += 1) {
  80. const jstsGeom = parser.read(features[i].getGeometry());
  81. const bo = new BufferOp(jstsGeom);
  82. const buffered = bo.getResultGeometry(width);
  83. features[i].setGeometry(parser.write(buffered));
  84. }
  85. }
  86. /**
  87. * @inheritdoc
  88. */
  89. activate() {
  90. this.map.addInteraction(this.selectInteraction);
  91. super.activate();
  92. document.getElementById('buffer-width')?.addEventListener('change', (e) => {
  93. this.setProperties({ buffer: e.target.value });
  94. });
  95. document.getElementById('buffer-btn')?.addEventListener('click', () => {
  96. const input = document.getElementById('buffer-width');
  97. const width = parseInt(input.value, 10);
  98. if (width) {
  99. this.buffer(width);
  100. }
  101. });
  102. }
  103. /**
  104. * @inheritdoc
  105. */
  106. deactivate() {
  107. this.map.removeInteraction(this.selectInteraction);
  108. super.deactivate();
  109. }
  110. }
  111. export default BufferControl;