Problem with Load Map using OpenLayers

Ionic Framework
1

I am developing an app with Ionic, Capacitor and OpenLayers, but when I try to load a new layer in map, this layer does not appear. I can see that the layer was loaded in map using console, all features are presented inside the layer source. I don’t know what is happening because in the same version with Cordova this function works.

I tried to load this layers one by one, when the user click in a checkbox, and then I tried load all layers programatically when the map load.


Map.page.html

<ion-menu side="start" menuId="layersMenu" contentId="main" type="overlay">

	<ion-content color="primary" id="main">
		<div *ngFor="let layer of layers">
			<ion-item color="primary"> 
				<ion-label>{{layer.name}}</ion-label>
				<ion-checkbox color="dark" (ionChange)="toggleLayer(layer.id)" checked="{{layer.visibility}}"></ion-checkbox>
			</ion-item>
		</div>
	</ion-content>

</ion-menu>

Map.page.ts

/** Change layer visibility on the page */
toggleLayer(id){
	this.storageService.fetch('layers', id).then(result => {
		this.datashare.activeLayer(result);
	});
}

Datashare.service.ts

/** Active selected layer */
activeLayer(layer : Layer) : void {
	return this.activeLayerSubject.next(layer)
}
activeLayerObservable(): Observable<Layer> {
	return this.activeLayerSubject;
}

Openlayers.component.ts

/** Observable to active layer in browser */
this.activeLayerSubscription = this.datashare.activeLayerObservable().subscribe(layer => {
		this.loadLayer(layer);
});

/** Load selected layer */
loadLayer(layer: Layer): void {
	if (this.platform.is('cordova')) {
		this.checkFileInDeviceStorage(layer).then(result => {
			layer = layer as Layer;
			if (result) {
				this.readFileInDeviceStorage(layer.path).then(fileAsText => {
					this.createLayer(fileAsText, layer.name);
				});
			} else {
				this.presentToast("Não existe arquivo neste diretório: <br>" + layer.path);
			}
		});
	}
}

/** Create layer in map */
createLayer(fileAsText: string, name: string): void {
	let newVectorSource = new VectorSource({})
	let newVectorLayer = new VectorLayer({
		source: newVectorSource,
		zIndex: 55,
		visible: true
	});
	newVectorLayer.set('name', name);

	let format = new KML({});

	newVectorSource.addFeatures(format.readFeatures(fileAsText, {
		featureProjection: 'EPSG:3857',
		dataProjection: 'EPSG:4626'
	}));

	this.map.addLayer(newVectorLayer);
}

Ionic Info

Ionic:

   Ionic CLI                     : 6.12.4 (C:\Users\cliente\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.5.5
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10

OpenLayers:

   v6.5.0

Console

image
image1341×628 20 KB

Features in console using map.getLayers()