如何将 KML 流式传输到 angular-cesium 中的 ac 层

Question

我有一个 angular-cesium 应用程序，我正在尝试将 kml 数据流式传输到 globe 层。我在 angular-cesium 文档中找不到任何教程或帮助。

这是我目前的情况：

app.ts

import { KmlService } from './kml.service';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { CesiumService, MapsManagerService } from 'angular-cesium';

import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  cesiumViewer;
  kml$;

  constructor(private Cesium: CesiumService,
              private viewersManager: MapsManagerService,
              private kmlService: KmlService) {}

  ngOnInit() {
    // console.log(this.cesiumViewer);
  }

  ngAfterViewInit() {
    this.kml$ = this.kmlService.getKml()
      .map((data) => data);
  }
}

app.html

<ac-map id="main-map">
  <ac-layer acFor="let kml of kml$">
  </ac-layer>
</ac-map>

kml.service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable()
export class KmlService {

  constructor(private http: HttpClient) { }

  getKml() {
    return this.http.get('http://172.16.1.254:8080/rest/kml/accept/all', { observe : 'body', responseType : 'text'});
  }

}

kml 输出是这样的：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>

<Style id="highlightAccepted"><IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/paddle/grn-stars.png</href></Icon></IconStyle></Style>
<Style id="normalAccepted">   <IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/paddle/grn-blank.png</href></Icon></IconStyle></Style>
<Style id="highlightDropped"> <IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/paddle/red-stars.png</href></Icon></IconStyle></Style>
<Style id="normalDropped">    <IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/paddle/red-blank.png</href></Icon></IconStyle></Style>
<Style id="highlightHome">    <IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/shapes/flag.png</href>     </Icon></IconStyle></Style>
<Style id="normalHome">       <IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/shapes/flag.png</href>     </Icon></IconStyle></Style>

<StyleMap id="acceptedStyleMap">
<Pair><key>normal</key><styleUrl>#normalAccepted</styleUrl></Pair>
<Pair><key>highlight</key><styleUrl>#highlightAccepted</styleUrl></Pair>
</StyleMap>

...etc...

这个错误，我认为这意味着我完全错了：

ERROR Error: ac-layer: must initialize [context] 
    at AcLayerComponent.webpackJsonp.../../../../angular-cesium/bundles/angular-cesium.umd.js.AcLayerComponent.initValidParams (angular-cesium.umd.js:2670)

Answer 1

目前angular-cesium不支持KML作为angular组件。但你可以使用纯铯 API.

class YourComponent {
 constructor(private mapsManagerService: MapsManagerService) {
   const viewer = mapsManagerService.getMap().getCesiumViewer()
   viewer.dataSources.add(
     Cesium.KmlDataSource.load(
       '../../SampleData/kml/bikeRide.kml',options
     )
   )
  }
}

在这里回答： https://github.com/TGFTech/angular-cesium/issues/123

如何将 KML 流式传输到 angular-cesium 中的 ac 层

How to stream KML into ac-layer in angular-cesium

kml

cesium

angular