Introducción

En este artículo, exploraremos cómo extender OpenLayers con la biblioteca ol-maplibre-layer para cargar estilos de un servicio MVT (Mapbox Vector Tile), utilizando archivos de extensión .json.

La librería ol-maplibre-layer permite cargar un mapa de MapLibre GL como una capa de OpenLayers.

Maplibre GL JS es una biblioteca JavaScript de código abierto para el renderizado de mapas vectoriales. Surgió como una bifurcación de Mapbox GL JS después de que Mapbox cambió la licencia de su biblioteca.

🌐 Openlayers
🌐 ol-maplibre-layer
🌐 MapLibre GL

Entorno de Desarrollo

  1. Creación de un proyecto en vitejs npm create vite@latest.
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

  1. Eliminación del archivo counter tras comprobar que el entorno funciona correctamente (npm run dev).

  2. Instalar las bibliotecas necesarias npm i @geoblocks/ol-maplibre-layer ol maplibre-gl.

  3. Creación del mapa de openlayers.

  html,
  body,
  .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
import 'ol/ol.css';
import './style.css';

import Map from 'ol/Map.js';
import View from 'ol/View.js';

const map = new Map({
  target: 'map',
  layers: [],
  view: new View({
    center: [924582, 5950164],
    zoom: 8,
  }),
})

Creación de la capa mapLibre

Esta capa corresponde al mapa de MapLibre GL que se cargará como una capa de OpenLayers.

import {MapLibreLayer} from '@geoblocks/ol-maplibre-layer';

layers: [
  new MapLibreLayer({
    mapLibreOptions: {
      style:
        'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte_world.vt/style.json',
    },
  }),
],

Fuente de datos (.json)

📘 Doc MapLibre GL Archivo JSON

Ejemplo de JSON que acepta la propiedad style de MapLibre.

{
    "version": 8,
    "sources": {
        "my-source": {
            "type": "vector",
            "tiles": [
                "https://example.com/tiles/{z}/{x}/{y}.pbf"
            ]
        }
    },
    "layers": [
        {
            "id": "water",
            "type": "fill",
            "source": "my-source",
            "source-layer": "water",
            "paint": {
                "fill-color": "#0000FF",
                "fill-opacity": 0.3
            }
        },
        {
            "id": "buildings",
            "type": "fill",
            "source": "my-source",
            "source-layer": "building",
            "paint": {
                "fill-color": "#888888",
                "fill-opacity": 0.5
            }
        }
    ]
}

Métodos útiles para modificar los estilos y propiedades:.

const layer = new MapLibreLayer(params);
layer.mapLibreMap.setLayoutProperty(layer, property, value);
const layer = new MapLibreLayer(params);
layer.mapLibreMap.setPaintProperty(layer, property, value);

Error al importar la librería con Webpack .mjs

⚠️ Issue

Error al intentar importar la librería import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer' error por consola export 'MapLibreLayer' (imported as 'MapLibreLayer') was not found in '@geoblocks/ol-maplibre-layer' (module has no exports).

Añadir el siguiente código en la configuración de webpack para resolver el problema:

  module: {
    rules: [
      {
        test: /node_modules\/@geoblocks\/.*\.m?js/,
        type: "javascript/auto",
      },
      {
        test: /node_modules\/@geoblocks\/.*\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    ]