Function stylefunction

  • stylefunction(
        olLayer: VectorLayer<any> | VectorTileLayer<any>,
        glStyle: any,
        sourceOrLayers: string | string[],
        resolutions: number[],
        spriteData?: any,
        spriteImageUrl?: string | Request | Promise<string | Request>,
        getFonts?: (arg0: string[], arg1: string) => string[],
        getImage?: (
            arg0: VectorLayer<any> | VectorTileLayer<any>,
            arg1: string,
        ) => string | HTMLCanvasElement | HTMLImageElement,
        ...args?: any,
    ): StyleFunction

  • Creates a style function from the glStyle object for all layers that use the specified source, which needs to be a "type": "vector" or "type": "geojson" source and applies it to the specified OpenLayers layer.

    Two additional properties will be set on the provided layer:

    • mapbox-source: The id of the Mapbox/MapLibre Style document's source that the OpenLayers layer was created from. Usually apply() creates one OpenLayers layer per Mapbox/MapLibre Style source, unless the layer stack has layers from different sources in between.
    • mapbox-layers: The ids of the Mapbox/MapLibre Style document's layers that are included in the OpenLayers layer.

    This function also works in a web worker. In worker mode, the main thread needs to listen to messages from the worker and respond with another message to make sure that sprite image loading works:

     worker.addEventListener('message', event => {
      if (event.data.action === 'loadImage') {
        const image = new Image();
        image.crossOrigin = 'anonymous';
        image.addEventListener('load', function() {
          createImageBitmap(image, 0, 0, image.width, image.height).then(imageBitmap => {
            worker.postMessage({
              action: 'imageLoaded',
              image: imageBitmap,
              src: event.data.src
            }, [imageBitmap]);
          });
        });
        image.src = event.data.src;
      }
    });

    Parameters

    • olLayer: VectorLayer<any> | VectorTileLayer<any>

      OpenLayers layer to apply the style to. In addition to the style, the layer will get two properties: mapbox-source will be the id of the glStyle's source used for the layer, and mapbox-layers will be an array of the ids of the glStyle's layers.

    • glStyle: any

      Mapbox/MapLibre Style object.

    • sourceOrLayers: string | string[]

      source key or an array of layer ids from the Mapbox/MapLibre Style object. When a source key is provided, all layers for the specified source will be included in the style function. When layer ids are provided, they must be from layers that use the same source.

    • resolutions: number[]

      Resolutions for mapping resolution to zoom level.

    • spriteData: any = defaultResolutions

      Sprite data from the url specified in the Mapbox/MapLibre Style object's sprite property. Only required if a sprite property is specified in the Mapbox/MapLibre Style object.

    • spriteImageUrl: string | Request | Promise<string | Request> = undefined

      Sprite image url for the sprite specified in the Mapbox/MapLibre Style object's sprite property. Only required if a sprite property is specified in the Mapbox/MapLibre Style object.

    • getFonts: (arg0: string[], arg1: string) => string[] = undefined

      Function that receives a font stack and the url template from the GL style's metadata['ol:webfonts'] property (if set) as arguments, and returns a (modified) font stack that is available. Font names are the names used in the Mapbox/MapLibre Style object. If not provided, the font stack will be used as-is. This function can also be used for loading web fonts.

    • OptionalgetImage: (
          arg0: VectorLayer<any> | VectorTileLayer<any>,
          arg1: string,
      ) => string | HTMLCanvasElement | HTMLImageElement = undefined

      Function that returns an image or a URL for an image name. If the result is an HTMLImageElement, it must already be loaded. The layer can be used to call layer.changed() when the loading and processing of the image has finished. This function can be used for icons not in the sprite or to override sprite icons.

    • ...args: any = undefined

    Returns StyleFunction

    Style function for use in ol.layer.Vector or ol.layer.VectorTile.

Settings

Member Visibility