How to use @terrestris/ol-util - 10 common examples

onDrop(e: AntTreeNodeDropEvent) {
    const dragLayer = MapUtil.getLayerByOlUid(this.props.map, e.dragNode.props.eventKey);
    const dragInfo = MapUtil.getLayerPositionInfo(dragLayer, this.props.map);
    const dragCollection = dragInfo.groupLayer.getLayers();
    const dropLayer = MapUtil.getLayerByOlUid(this.props.map, e.node.props.eventKey);
    const dropPos = e.node.props.pos.split('-');
    const location = e.dropPosition - Number(dropPos[dropPos.length - 1]);

    dragCollection.remove(dragLayer);

    const dropInfo = MapUtil.getLayerPositionInfo(dropLayer, this.props.map);
    const dropPosition = dropInfo.position;
    const dropCollection = dropInfo.groupLayer.getLayers();

    // drop before node
    if (location === -1) {
      if (dropPosition === dropCollection.getLength() - 1) {
        dropCollection.push(dragLayer);

onDrop(e: AntTreeNodeDropEvent) {
    const dragLayer = MapUtil.getLayerByOlUid(this.props.map, e.dragNode.props.eventKey);
    const dragInfo = MapUtil.getLayerPositionInfo(dragLayer, this.props.map);
    const dragCollection = dragInfo.groupLayer.getLayers();
    const dropLayer = MapUtil.getLayerByOlUid(this.props.map, e.node.props.eventKey);
    const dropPos = e.node.props.pos.split('-');
    const location = e.dropPosition - Number(dropPos[dropPos.length - 1]);

    dragCollection.remove(dragLayer);

    const dropInfo = MapUtil.getLayerPositionInfo(dropLayer, this.props.map);
    const dropPosition = dropInfo.position;
    const dropCollection = dropInfo.groupLayer.getLayers();

    // drop before node
    if (location === -1) {
      if (dropPosition === dropCollection.getLength() - 1) {
        dropCollection.push(dragLayer);
      } else {
        dropCollection.insertAt(dropPosition + 1, dragLayer);
      }

onDrop(e: AntTreeNodeDropEvent) {
    const dragLayer = MapUtil.getLayerByOlUid(this.props.map, e.dragNode.props.eventKey);
    const dragInfo = MapUtil.getLayerPositionInfo(dragLayer, this.props.map);
    const dragCollection = dragInfo.groupLayer.getLayers();
    const dropLayer = MapUtil.getLayerByOlUid(this.props.map, e.node.props.eventKey);
    const dropPos = e.node.props.pos.split('-');
    const location = e.dropPosition - Number(dropPos[dropPos.length - 1]);

    dragCollection.remove(dragLayer);

    const dropInfo = MapUtil.getLayerPositionInfo(dropLayer, this.props.map);
    const dropPosition = dropInfo.position;
    const dropCollection = dropInfo.groupLayer.getLayers();

    // drop before node
    if (location === -1) {
      if (dropPosition === dropCollection.getLength() - 1) {
        dropCollection.push(dragLayer);
      } else {

onDrop(e: AntTreeNodeDropEvent) {
    const dragLayer = MapUtil.getLayerByOlUid(this.props.map, e.dragNode.props.eventKey);
    const dragInfo = MapUtil.getLayerPositionInfo(dragLayer, this.props.map);
    const dragCollection = dragInfo.groupLayer.getLayers();
    const dropLayer = MapUtil.getLayerByOlUid(this.props.map, e.node.props.eventKey);
    const dropPos = e.node.props.pos.split('-');
    const location = e.dropPosition - Number(dropPos[dropPos.length - 1]);

    dragCollection.remove(dragLayer);

    const dropInfo = MapUtil.getLayerPositionInfo(dropLayer, this.props.map);
    const dropPosition = dropInfo.position;
    const dropCollection = dropInfo.groupLayer.getLayers();

    // drop before node
    if (location === -1) {
      if (dropPosition === dropCollection.getLength() - 1) {
        dropCollection.push(dragLayer);
      } else {
        dropCollection.insertAt(dropPosition + 1, dragLayer);
      }
      // drop on node
    } else if (location === 0) {
      if (dropLayer instanceof OlLayerGroup) {
        dropLayer.getLayers().push(dragLayer);
      } else {
        dropCollection.insertAt(dropPosition + 1, dragLayer);

createDrawInteraction = pressed => {
    const {
      drawType,
      map,
      onDrawEnd,
      onDrawStart,
      digitizeLayerName,
      drawInteractionConfig
    } = this.props;

    let geometryFunction;
    let type = drawType;

    // check whether the digitizeLayer is in map and set it from state if not
    let digitizeLayer = MapUtil.getLayerByName(map, digitizeLayerName);
    if (!digitizeLayer) {
      map.addLayer(this.state.digitizeLayer);
    }

    if (drawType === DigitizeButton.RECTANGLE_DRAW_TYPE) {
      geometryFunction = createBox();
      type = DigitizeButton.CIRCLE_DRAW_TYPE as DrawType;
    } else if (drawType === DigitizeButton.TEXT_DRAW_TYPE) {
      type = DigitizeButton.POINT_DRAW_TYPE as DrawType;
      this._digitizeFeatures.on('add', this.handleTextAdding);
    }

    const drawInteraction = new OlInteractionDraw({
      source: this.state.digitizeLayer.getSource(),
      type: type,
      geometryFunction: geometryFunction,

if (geom instanceof OlMultiPolygon) {
        geom = geom.getPolygons()[0];
      }

      if (geom instanceof OlMultiLinestring) {
        geom = geom.getLineStrings()[0];
      }

      let measureTooltipCoord = geom.getLastCoordinate();

      if (measureType === 'polygon') {
        output = MeasureUtil.formatArea(geom, map, decimalPlacesInTooltips);
        // attach area at interior point
        measureTooltipCoord = geom.getInteriorPoint().getCoordinates();
      } else if (measureType === 'line') {
        output = MeasureUtil.formatLength(geom, map, decimalPlacesInTooltips);
      } else if (measureType === 'angle') {
        output = MeasureUtil.formatAngle(geom, map, decimalPlacesInTooltips);
      }

      this._measureTooltipElement.innerHTML = output;
      this._measureTooltip.setPosition(measureTooltipCoord);
    }
  }

if (this._feature) {
      let output;
      let geom = this._feature.getGeometry();

      if (geom instanceof OlMultiPolygon) {
        geom = geom.getPolygons()[0];
      }

      if (geom instanceof OlMultiLinestring) {
        geom = geom.getLineStrings()[0];
      }

      let measureTooltipCoord = geom.getLastCoordinate();

      if (measureType === 'polygon') {
        output = MeasureUtil.formatArea(geom, map, decimalPlacesInTooltips);
        // attach area at interior point
        measureTooltipCoord = geom.getInteriorPoint().getCoordinates();
      } else if (measureType === 'line') {
        output = MeasureUtil.formatLength(geom, map, decimalPlacesInTooltips);
      } else if (measureType === 'angle') {
        output = MeasureUtil.formatAngle(geom, map, decimalPlacesInTooltips);
      }

      this._measureTooltipElement.innerHTML = output;
      this._measureTooltip.setPosition(measureTooltipCoord);
    }
  }

resolutions: testResolutions
      });
      const wrapper = TestUtil.mountComponent(ScaleCombo, {
        scales: [],
        map: map
      });

      // Reset the scales array, as getOptionsFromMap() will be called in
      // constructor.
      wrapper.setState({'scales': []});

      const scales = wrapper.instance().getOptionsFromMap();
      expect(scales).toBeInstanceOf(Array);
      expect(scales).toHaveLength(testResolutions.length);

      let roundScale = (Math.round(MapUtil.getScaleForResolution(
        testResolutions[testResolutions.length - 1] ,'m')));

      expect(scales[0]).toBe(roundScale);

      TestUtil.removeMap(map);
    });

const wrapper = TestUtil.mountComponent(ScaleCombo, {
        map: map,
        scales: [],
        resolutionsFilter
      });

      // Reset the scales array, as getOptionsFromMap() will be called in
      // constructor.
      wrapper.setState({'scales': []});

      const scales = wrapper.instance().getOptionsFromMap();
      expect(scales).toBeInstanceOf(Array);
      expect(scales).toHaveLength(expectedLength);

      let roundScale = MapUtil.roundScale(MapUtil.getScaleForResolution(
        testResolutions[testResolutions.length - 2] ,'m'));

      expect(scales[1]).toBe(roundScale);

      TestUtil.removeMap(map);
    });
  });

}

      if (geom instanceof OlMultiLinestring) {
        geom = geom.getLineStrings()[0];
      }

      let measureTooltipCoord = geom.getLastCoordinate();

      if (measureType === 'polygon') {
        output = MeasureUtil.formatArea(geom, map, decimalPlacesInTooltips);
        // attach area at interior point
        measureTooltipCoord = geom.getInteriorPoint().getCoordinates();
      } else if (measureType === 'line') {
        output = MeasureUtil.formatLength(geom, map, decimalPlacesInTooltips);
      } else if (measureType === 'angle') {
        output = MeasureUtil.formatAngle(geom, map, decimalPlacesInTooltips);
      }

      this._measureTooltipElement.innerHTML = output;
      this._measureTooltip.setPosition(measureTooltipCoord);
    }
  }