angular openlayer - как я могу использовать функции анимации маркеров в моем случае? - PullRequest
Новая
       46

angular openlayer - как я могу использовать функции анимации маркеров в моем случае?

0 голосов
/ 20 января 2020

привет, у меня есть python клиент, и от него случайные координаты x и y передаются на сервер nodejs, затем на стороне angular с открытым слоем, я опубликую sh с кодом ниже

map.component.ts 

import { Component, OnInit, Input, Output, SimpleChanges, EventEmitter } from '@angular/core';
import * as ol from 'openlayers';
import { AppStateService } from '../state/appstate.service';
import { DataService } from 'src/core/data.service';
import {Subscription, timer} from 'rxjs';
import {featureloader} from 'openlayers';
const INITIAL_OPACITY = 1;
const DIMMED_OPACITY = 0.3;
@Component({
  selector: 'map',
  template: `<div id="map"></div>`,
  styleUrls: ['map.component.css']
})
export class MapComponent implements OnInit {
  private map: ol.Map;
  stockQuote: number;
  sub: Subscription;
  constructor(private appStateService: AppStateService, private dataService: DataService) {
  }
  ngOnInit() {
    this.map = new ol.Map({
      layers: [
        new ol.layer.Tile({ source: new ol.source.OSM(), opacity: INITIAL_OPACITY }),
      ],
      target: document.getElementById('map'),
      view: new ol.View({
        projection: 'EPSG:4326', // map type
        center: [32.7399307, 39.9066235],
        zoom: 6,
      })
    });
    this.appStateService.getDim().subscribe(
      x => {
        if (x) {
          this.map.getLayers().getArray()[0].setOpacity(INITIAL_OPACITY);
        } else {
          this.map.getLayers().getArray()[0].setOpacity(DIMMED_OPACITY);
        }
      }
    )

    this.sub = this.dataService.getQuotes()
      .subscribe(value => {
        //console.log('osmannn : ', value);
        var long = value['long'];
        var lat = value['lat'];

        var source = new ol.source.Vector({});
        var layer = new ol.layer.Vector({ source: source });
        this.map.addLayer(layer);
        var marker = new ol.Feature({
          zoom: 8,

          geometry: new ol.geom.Point([lat, long]
          )
        });

        function delay(ms:number){
          return new Promise( resolve => setTimeout(resolve, ms) );
        }
        (async () => {
            // Do something before delay
            source.addFeature(marker)
            await delay(1000);
            // Do something after
            source.removeFeature(marker)
        })();
      });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Хотите анимировать линию между маркерами? Как я могу это сделать ? я хочу что-то вроде этой ссылки https://openlayers.org/en/latest/examples/feature-move-animation.html

...