render (options) {
    if (!('container' in options)) {
      console.error('container must be provided for rendering images')
    }
    this[_map].setTarget(options.container)
    const view = this[_map].getView()
    const projection = view.getProjection()
    view.fit(projection.getExtent(), { size: this[_map].getSize() })

    // Style scale element (overriding default Openlayers CSS "ol-scale-line")
    const scaleElement = this[_controls].scale.element
    scaleElement.style.position = 'absolute'
    scaleElement.style.right = '.5em'
    scaleElement.style.bottom = '.5em'
    scaleElement.style.left = 'auto'
    scaleElement.style.padding = '2px'
    scaleElement.style.backgroundColor = 'rgba(255,255,255,.5)'
    scaleElement.style.borderRadius = '4px'
    scaleElement.style.margin = '1px'

    const scaleInnerElement = this[_controls].scale.innerElement_
    scaleInnerElement.style.color = 'black'
    scaleInnerElement.style.fontWeight = '600'
    scaleInnerElement.style.fontSize = '10px'
    scaleInnerElement.style.textAlign = 'center'
    scaleInnerElement.style.borderWidth = '1.5px'
    scaleInnerElement.style.borderStyle = 'solid'
    scaleInnerElement.style.borderTop = 'none'
    scaleInnerElement.style.borderRightColor = 'black'
    scaleInnerElement.style.borderLeftColor = 'black'
    scaleInnerElement.style.borderBottomColor = 'black'
    scaleInnerElement.style.margin = '1px'
    scaleInnerElement.style.willChange = 'contents,width'

    const overviewElement = this[_overviewMap].element
    const overviewmapElement = Object.values(overviewElement.children).find(
      c => c.className === 'ol-overviewmap-map'
    )
    overviewmapElement.style.border = '1px solid black'
    // Try to fit the overview map into the target control overlay container
    const height = Math.abs(this[_referenceExtents][1])
    const width = Math.abs(this[_referenceExtents][2])
    const rotation = this[_rotation] / Math.PI * 180
    const windowSize = _getWindowSize()
    const targetHeight = Math.ceil(windowSize[1] * 0.2)
    let resizeFactor
    let targetWidth
    if (rotation === 180 || rotation === 0) {
      resizeFactor = targetHeight / height
      targetWidth = width * resizeFactor
    } else {
      resizeFactor = targetHeight / width
      targetWidth = height * resizeFactor
    }
    overviewmapElement.style.width = `${targetWidth}px`
    overviewmapElement.style.height = `${targetHeight}px`

    const container = this[_map].getTargetElement()

    this[_drawingSource].on(VectorEventType.ADDFEATURE, (e) => {
      publish(
        container,
        EVENT.ROI_ADDED,
        this._getROIFromFeature(e.feature, this[_pyramidMetadata])
      )
    })

    this[_drawingSource].on(VectorEventType.CHANGEFEATURE, (e) => {
      if (e.feature !== undefined || e.feature !== null) {
        const geometry = e.feature.getGeometry()
        const type = geometry.getType()
        // The first and last point of a polygon must be identical. The last point
        // is an implementation detail and is hidden from the user in the graphical
        // interface. However, we must update the last point in case the first
        // point has been modified by the user.
        if (type === 'Polygon') {
          // NOTE: Polygon in GeoJSON format contains an array of geometries,
          // where the first element represents the coordinates of the outer ring
          // and the second element represents the coordinates of the inner ring
          // (in our case the inner ring should not be present).
          const layout = geometry.getLayout()
          const coordinates = geometry.getCoordinates()
          const firstPoint = coordinates[0][0]
          const lastPoint = coordinates[0][coordinates[0].length - 1]
          if (
            firstPoint[0] !== lastPoint[0] ||
            firstPoint[1] !== lastPoint[1]
          ) {
            coordinates[0][coordinates[0].length - 1] = firstPoint
            geometry.setCoordinates(coordinates, layout)
            e.feature.setGeometry(geometry)
          }
        }
      }
      publish(
        container,
        EVENT.ROI_MODIFIED,
        this._getROIFromFeature(e.feature, this[_pyramidMetadata])
      )
    })

    this[_drawingSource].on(VectorEventType.REMOVEFEATURE, (e) => {
      publish(
        container,
        EVENT.ROI_REMOVED,
        this._getROIFromFeature(e.feature, this[_pyramidMetadata])
      )
    })
  }
/**
   * Renders the images in the specified viewport container.
   *
   * @param {object} options - Rendering options.
   * @param {(string|HTMLElement)} options.container - HTML Element in which the viewer should be injected.
   */
Renders the images in the specified viewport container.
@param {object} options - Rendering options.
@param {(string|HTMLElement)} options.container - HTML Element in which the viewer should be injected.
Renders the images in the specified viewport container . @param { object } options - Rendering options . @param { ( string|HTMLElement ) } options . container - HTML Element in which the viewer should be injected .
render (options) {
    if (!('container' in options)) {
      console.error('container must be provided for rendering images')
    }
    this[_map].setTarget(options.container)
    const view = this[_map].getView()
    const projection = view.getProjection()
    view.fit(projection.getExtent(), { size: this[_map].getSize() })
    const scaleElement = this[_controls].scale.element
    scaleElement.style.position = 'absolute'
    scaleElement.style.right = '.5em'
    scaleElement.style.bottom = '.5em'
    scaleElement.style.left = 'auto'
    scaleElement.style.padding = '2px'
    scaleElement.style.backgroundColor = 'rgba(255,255,255,.5)'
    scaleElement.style.borderRadius = '4px'
    scaleElement.style.margin = '1px'
    const scaleInnerElement = this[_controls].scale.innerElement_
    scaleInnerElement.style.color = 'black'
    scaleInnerElement.style.fontWeight = '600'
    scaleInnerElement.style.fontSize = '10px'
    scaleInnerElement.style.textAlign = 'center'
    scaleInnerElement.style.borderWidth = '1.5px'
    scaleInnerElement.style.borderStyle = 'solid'
    scaleInnerElement.style.borderTop = 'none'
    scaleInnerElement.style.borderRightColor = 'black'
    scaleInnerElement.style.borderLeftColor = 'black'
    scaleInnerElement.style.borderBottomColor = 'black'
    scaleInnerElement.style.margin = '1px'
    scaleInnerElement.style.willChange = 'contents,width'
    const overviewElement = this[_overviewMap].element
    const overviewmapElement = Object.values(overviewElement.children).find(
      c => c.className === 'ol-overviewmap-map'
    )
    overviewmapElement.style.border = '1px solid black'
    const height = Math.abs(this[_referenceExtents][1])
    const width = Math.abs(this[_referenceExtents][2])
    const rotation = this[_rotation] / Math.PI * 180
    const windowSize = _getWindowSize()
    const targetHeight = Math.ceil(windowSize[1] * 0.2)
    let resizeFactor
    let targetWidth
    if (rotation === 180 || rotation === 0) {
      resizeFactor = targetHeight / height
      targetWidth = width * resizeFactor
    } else {
      resizeFactor = targetHeight / width
      targetWidth = height * resizeFactor
    }
    overviewmapElement.style.width = `${targetWidth}px`
    overviewmapElement.style.height = `${targetHeight}px`
    const container = this[_map].getTargetElement()
    this[_drawingSource].on(VectorEventType.ADDFEATURE, (e) => {
      publish(
        container,
        EVENT.ROI_ADDED,
        this._getROIFromFeature(e.feature, this[_pyramidMetadata])
      )
    })
    this[_drawingSource].on(VectorEventType.CHANGEFEATURE, (e) => {
      if (e.feature !== undefined || e.feature !== null) {
        const geometry = e.feature.getGeometry()
        const type = geometry.getType()
        if (type === 'Polygon') {
          const layout = geometry.getLayout()
          const coordinates = geometry.getCoordinates()
          const firstPoint = coordinates[0][0]
          const lastPoint = coordinates[0][coordinates[0].length - 1]
          if (
            firstPoint[0] !== lastPoint[0] ||
            firstPoint[1] !== lastPoint[1]
          ) {
            coordinates[0][coordinates[0].length - 1] = firstPoint
            geometry.setCoordinates(coordinates, layout)
            e.feature.setGeometry(geometry)
          }
        }
      }
      publish(
        container,
        EVENT.ROI_MODIFIED,
        this._getROIFromFeature(e.feature, this[_pyramidMetadata])
      )
    })
    this[_drawingSource].on(VectorEventType.REMOVEFEATURE, (e) => {
      publish(
        container,
        EVENT.ROI_REMOVED,
        this._getROIFromFeature(e.feature, this[_pyramidMetadata])
      )
    })
  }
render ( options ) { if ( ! ( 'container' in options ) ) { console . error ( 'container must be provided for rendering images' ) } this [ _map ] . setTarget ( options . container ) const view = this [ _map ] . getView ( ) const projection = view . getProjection ( ) view . fit ( projection . getExtent ( ) , { size : this [ _map ] . getSize ( ) } ) const scaleElement = this [ _controls ] . scale . element scaleElement . style . position = 'absolute' scaleElement . style . right = '.5em' scaleElement . style . bottom = '.5em' scaleElement . style . left = 'auto' scaleElement . style . padding = '2px' scaleElement . style . backgroundColor = 'rgba(255,255,255,.5)' scaleElement . style . borderRadius = '4px' scaleElement . style . margin = '1px' const scaleInnerElement = this [ _controls ] . scale . innerElement_ scaleInnerElement . style . color = 'black' scaleInnerElement . style . fontWeight = '600' scaleInnerElement . style . fontSize = '10px' scaleInnerElement . style . textAlign = 'center' scaleInnerElement . style . borderWidth = '1.5px' scaleInnerElement . style . borderStyle = 'solid' scaleInnerElement . style . borderTop = 'none' scaleInnerElement . style . borderRightColor = 'black' scaleInnerElement . style . borderLeftColor = 'black' scaleInnerElement . style . borderBottomColor = 'black' scaleInnerElement . style . margin = '1px' scaleInnerElement . style . willChange = 'contents,width' const overviewElement = this [ _overviewMap ] . element const overviewmapElement = Object . values ( overviewElement . children ) . find ( c => c . className === 'ol-overviewmap-map' ) overviewmapElement . style . border = '1px solid black' const height = Math . abs ( this [ _referenceExtents ] [ 1 ] ) const width = Math . abs ( this [ _referenceExtents ] [ 2 ] ) const rotation = this [ _rotation ] / Math . PI * 180 const windowSize = _getWindowSize ( ) const targetHeight = Math . ceil ( windowSize [ 1 ] * 0.2 ) let resizeFactor let targetWidth if ( rotation === 180 || rotation === 0 ) { resizeFactor = targetHeight / height targetWidth = width * resizeFactor } else { resizeFactor = targetHeight / width targetWidth = height * resizeFactor } overviewmapElement . style . width = ` ${ targetWidth } ` overviewmapElement . style . height = ` ${ targetHeight } ` const container = this [ _map ] . getTargetElement ( ) this [ _drawingSource ] . on ( VectorEventType . ADDFEATURE , ( e ) => { publish ( container , EVENT . ROI_ADDED , this . _getROIFromFeature ( e . feature , this [ _pyramidMetadata ] ) ) } ) this [ _drawingSource ] . on ( VectorEventType . CHANGEFEATURE , ( e ) => { if ( e . feature !== undefined || e . feature !== null ) { const geometry = e . feature . getGeometry ( ) const type = geometry . getType ( ) if ( type === 'Polygon' ) { const layout = geometry . getLayout ( ) const coordinates = geometry . getCoordinates ( ) const firstPoint = coordinates [ 0 ] [ 0 ] const lastPoint = coordinates [ 0 ] [ coordinates [ 0 ] . length - 1 ] if ( firstPoint [ 0 ] !== lastPoint [ 0 ] || firstPoint [ 1 ] !== lastPoint [ 1 ] ) { coordinates [ 0 ] [ coordinates [ 0 ] . length - 1 ] = firstPoint geometry . setCoordinates ( coordinates , layout ) e . feature . setGeometry ( geometry ) } } } publish ( container , EVENT . ROI_MODIFIED , this . _getROIFromFeature ( e . feature , this [ _pyramidMetadata ] ) ) } ) this [ _drawingSource ] . on ( VectorEventType . REMOVEFEATURE , ( e ) => { publish ( container , EVENT . ROI_REMOVED , this . _getROIFromFeature ( e . feature , this [ _pyramidMetadata ] ) ) } ) }
Renders the images in the specified viewport container.
Renders the images in the specified viewport container .
// Style scale element (overriding default Openlayers CSS "ol-scale-line") // Try to fit the overview map into the target control overlay container // The first and last point of a polygon must be identical. The last point // is an implementation detail and is hidden from the user in the graphical // interface. However, we must update the last point in case the first // point has been modified by the user. // NOTE: Polygon in GeoJSON format contains an array of geometries, // where the first element represents the coordinates of the outer ring // and the second element represents the coordinates of the inner ring // (in our case the inner ring should not be present).