File

projects/angular-cesium/src/lib/angular-cesium/components/ac-html/ac-html.component.ts

Description

This is an html implementation. The ac-html element must be a child of ac-map element. Usage:

 *  <ac-html [props]="{position: position, show: true}">;
 *    <p>html element</p>
 *  </ac-html>
 *

Implements

DoCheck OnDestroy OnInit

Metadata

selector ac-html
styles :host { position: absolute; z-index: 100; }
template
<ng-content></ng-content>

Index

Properties
Methods
Inputs

Constructor

constructor(cesiumService: CesiumService, elementRef: ElementRef, renderer: Renderer2)
Parameters :
Name Type Optional
cesiumService CesiumService No
elementRef ElementRef No
renderer Renderer2 No

Inputs

props

Type : any

Methods

add
add()
Returns : void
hideElement
hideElement()
Returns : void
ngDoCheck
ngDoCheck()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
remove
remove()
Returns : void
setScreenPosition
setScreenPosition(screenPosition: any)
Parameters :
Name Type Optional
screenPosition any No
Returns : void

Properties

Private isDraw
isDraw:
Default value : false
preRenderEventListener
preRenderEventListener: function
Type : function
import { Component, DoCheck, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { CesiumService } from '../../services/cesium/cesium.service';

/**
 *  This is an html implementation.
 *  The ac-html element must be a child of ac-map element.
 *  __Usage:__
 *  ```
 *  <ac-html [props]="{position: position, show: true}">;
 *    <p>html element</p>
 *  </ac-html>
 *  ```
 */

@Component({
  selector: 'ac-html',
  template: `<ng-content></ng-content>`,
  styles: [`:host {
                position: absolute;
                z-index: 100;
				}`]
})
export class AcHtmlComponent implements DoCheck, OnDestroy, OnInit {


  @Input() props: any;
  private isDraw = false;
  preRenderEventListener: () => void;

  constructor(private cesiumService: CesiumService, private elementRef: ElementRef, private renderer: Renderer2) {
  }

  setScreenPosition(screenPosition: any) {
    if (screenPosition) {
      this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${screenPosition.y}px`);
      this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${screenPosition.x}px`);
    }
  }

  ngOnInit(): void {
    this.cesiumService.getMap().getMapContainer().appendChild(this.elementRef.nativeElement);
    if (this.props.show === false) {
      this.hideElement();
    }
  }

  remove() {
    if (this.isDraw) {
      this.isDraw = false;
      this.cesiumService.getScene().preRender.removeEventListener(this.preRenderEventListener);
      this.hideElement();
    }
  }

  hideElement() {
    this.renderer.setStyle(this.elementRef.nativeElement, 'display', `none`);
  }

  add() {
    if (!this.isDraw) {
      this.isDraw = true;
      this.preRenderEventListener = () => {
        const screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.cesiumService.getScene(),
          this.props.position);
        this.setScreenPosition(screenPosition);
      };
      this.renderer.setStyle(this.elementRef.nativeElement, 'display', `block`);
      this.cesiumService.getScene().preRender.addEventListener(this.preRenderEventListener);
    }
  }

  ngDoCheck() {
    if (this.props.show === undefined || this.props.show) {
      this.add();
    } else {
      this.remove();
    }
  }

  ngOnDestroy(): void {
    this.remove();
  }
}
:host {
                position: absolute;
                z-index: 100;
				}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""