es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

OpenLayers carga un vector tile desde un archivo binario.

18 Jul, 2023 Programación

Quiero cargar un mosaico de vector en formato binario en OpenLayers y me quedé atascado en la tileLoadFunction. Parece que no puedo establecer los datos del mosaico manualmente. Necesito utilizar la tileLoadFunction ya que se debe pasar una clave de API al servidor de mosaicos para autenticación. Esto es lo que tengo hasta ahora:

“`lang=typescript
let http = HttpClient;

<pre><code><br />“`typescript
let layer = new VectorTileLayer();
layer.setSource(
new VectorTileSource({
format: new MVT(),
url: ‘TILE_SERVER_URL’,
tileLoadFunction: (tile, src) => {
// Establecer encabezados
const headers = new HttpHeaders({
accept: ‘application/binary’,
‘authentication_id’: environment.auth_token,
});

// Obtener los mosaicos
this.http
.get(src, {
headers: headers,
responseType: ‘blob’,
})
.subscribe((data) => {
if (data !== undefined) {
console.log(data);
let vector_tile = tile as VectorTile;
const format = new MVT();
// Establecer las características de la siguiente manera no es válido
// vector_tile.setFeatures(format.readFeatures(data, {}));
} else {
tile.setState(TileState.ERROR);
}
});
},
})
);

He intentado encontrar ejemplos similares, pero desafortunadamente nada me ha señalado en la dirección correcta.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cargar una malla de vectores en formato binario en OpenLayers y establecer los datos en la malla manualmente utilizando la función tileLoadFunction, puedes probar el siguiente código:

    “`lang=typescript
    // Importar los módulos necesarios
    import { HttpClient, HttpHeaders, HttpErrorResponse } from ‘@angular/common/http’;
    import { VectorTileLayer, VectorTileSource } from ‘ol/layer’;
    import { MVT } from ‘ol/format’;
    import { TileState } from ‘ol/Tile’;

    // Configurar HttpClient
    let http = HttpClient;

    // Crear una nueva capa de VectorTileLayer y establecer su fuente
    let layer = new VectorTileLayer();
    layer.setSource(
    new VectorTileSource({
    format: new MVT(),
    url: ‘URL_DEL_SERVIDOR_DE_MALLAS’,
    tileLoadFunction: (tile, src) => {
    // Establecer encabezados para la autenticación con clave de API
    const headers = new HttpHeaders({
    ‘accept’: ‘application/binary’,
    ‘authentication_id’: environment.auth_token,
    });

      // Obtener los datos de la malla binaria desde el servidor
  this.http
    .get(src, {
      headers: headers,
      responseType: 'blob',
    })
    .subscribe((data) => {
      // Si se devuelven datos correctamente
      if (data !== undefined) {
        const format = new MVT();
        // Leer los elementos de la malla desde los datos binarios
        tile.setFeatures(format.readFeatures(data, {
          dataProjection: 'EPSG:3857',
          featureProjection: 'EPSG:3857' // O tu proyección deseada
        }));
      } else {
        tile.setState(TileState.ERROR);
      }
    },
    (err: HttpErrorResponse) => {
      console.error(err); // Registrar cualquier error en la consola
      tile.setState(TileState.ERROR); // Establecer el estado de la malla en error si ocurre un error
    });
},

    })
    );
    “`

    Asegúrate de reemplazar URL_DEL_SERVIDOR_DE_MALLAS con la URL del servidor de mallas que deseas utilizar y establece la proyección adecuada para tus elementos en las opciones de readFeatures.

Comments are closed.