Mam kod JavaScript, który używa openLayer3. Muszę zaimplementować ten kod w projekcie angular2, w Maszynopisie.Używanie openlayer3 w maszynopisie/kątowym2
Ktoś wie, jak używać openlayera z angular2/maszynie do pisania?
dziękuję,
John
1. Wariant A (Praca z Kątowymi CLI)
Dodaj Openlayers3 w .angular-cli.json (znajduje się w katalogu głównym projektu):
...
"styles": [
"../node_modules/openlayers/dist/ol.css"
],
"scripts": [
"../node_modules/openlayers/dist/ol.js"
],
...
1 Opcja B (Nie działa z Angularnym interfejsem CLI)
Dodaj Openlayers3 do swojego index.html ("zwykłe" sposób):
<script src="node_modules/openlayers/dist/ol.js"></script> <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css">
2. Dostęp ol z pliku maszynopisu:
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
// This is necessary to access ol3!
declare var ol: any;
@Component({
selector: 'my-app',
template: `
<h3> The map </h3>
<div #mapElement id="map" class="map"> </div>
`
// The "#" (template reference variable) matters to access the map element with the ViewChild decorator!
})
export class AppComponent implements AfterViewInit {
// This is necessary to access the html element to set the map target (after view init)!
@ViewChild("mapElement") mapElement: ElementRef;
public map: any;
constructor(){
var osm_layer: any = new ol.layer.Tile({
source: new ol.source.OSM()
});
// note that the target cannot be set here!
this.map = new ol.Map({
layers: [osm_layer],
view: new ol.View({
center: ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
}
// After view init the map target can be set!
ngAfterViewInit() {
this.map.setTarget(this.mapElement.nativeElement.id);
}
}
Co do typowania mogą być zainteresowani DefinitelyTyped projektu - można tam znaleźć OpenLayers/openlayers.d.ts - prawdopodobnie trzeba zrozumieć tsd, folder konwertyty itp.
Jeśli chodzi o AngularJS 2, biorąc pod uwagę, że wciąż znajduje się on w fazie beta, doświadczenie mówi, że jesteś w większości samodzielny. Wciąż googlowanie może wskazywać np. https://gist.github.com/borchsenius/5a1ec0b48b283ba65021.
Zwykłe podejście jest pierwszym, aby zrozumieć sposób AngularJS 2 zgodnie z już istniejącymi przykładami. Powinieneś wkrótce zauważyć wiele zdrowego rozsądku w sposobie, w jaki wyglądają różne integracje. Następnie spróbuj dostosować to, co chcesz w odpowiedni sposób. Wtedy jest jeszcze większa część, aby dać więcej i podzielić się wiedzą :)
Pomocne mogą być również znajomość istniejących rozwiązań AngularJS 1.x takich jak this article.
Boczna uwaga na to, że typy typu openlayers są niekompletne. Trochę się do tego przyczyniłem, ale daleko jej do ukończenia. Koniecznie sprawdź dokumentację. Nie polegaj na intellisense. Jeśli znajdziesz metodę lub właściwość, której potrzebujesz, która nie znajduje się w pliku definicji, upewnij się, że ją dodasz i wyślij żądanie pobrania! – rgvassar
Dobra wiadomość i dobrze wiedzieć. W rzeczywistości jest to sposób, w jaki ewoluują typologie dla nietkniętego świata JS. Próbuję zrobić to samo, gdy używam innych typów, które są niekompletne. – ciekawy
Można użyć angular2-OpenLayers, dostępny jako pakiet npm lub tutaj : https://github.com/quentin-ol/angular2-openlayers
Działa to dobrze, jednak adresy URL do ładowania danych kml ze źródeł nie są bezpośrednie. Angular przyjmuje adres URL jako adres nawigacji, a nie adres systemu plików. –