mmomtchev / rlayers

React Component Library for OpenLayers
ISC License
173 stars 36 forks source link

[Help] How to get <RStyle> work in custom addon layer #303

Closed itsdapi closed 1 month ago

itsdapi commented 1 month ago

Sorry for posting help in issues.

I am making a custom loader for PMTiles, but I am struggle to make the <RStyle /> work. Currently I am passing the style to the VectorTile. My reference is the GeoTiff example.

import { PMTilesVectorSource } from "ol-pmtiles";
import { VectorTile } from "ol/layer";
import React from "react";
import { RContextType, RLayer, RLayerProps, RStyle } from "rlayers";
import { RStyleLike } from "rlayers/style";

export interface RLayerPMTVectorLayerProps extends RLayerProps {
  style?: RStyleLike,
  url: string;
}

export class RLayerPMTVectorLayer extends RLayer<RLayerPMTVectorLayerProps> {
  ol: VectorTile;
  source!: PMTilesVectorSource;

  constructor(
    props: Readonly<RLayerPMTVectorLayerProps>,
    context?: React.Context<RContextType>,
  ) {
    super(props, context);
    // console.log('props', props)
    this.createSource();
    this.ol = new VectorTile({
      ...props,
      style: RStyle.RStyle.getStyle(props.style as RStyleLike),
      source: this.source,
    });
    this.eventSources = [this.ol, this.source];
  }

  createSource(): void {
    this.source = new PMTilesVectorSource({
      url: this.props.url,
    });
    this.eventSources = [this.ol, this.source];
  }

  refresh(prevProps?: RLayerPMTVectorLayerProps): void {
    super.refresh(prevProps);
    if (prevProps?.url !== this.props.url) {
      this.source.refresh();
    }
  }
}
itsdapi commented 1 month ago

nvm I found this working

  render(): JSX.Element {
    return (
      <div className="_rlayers_RLayerVectorTile">
        <RContext.Provider
          value={
            {
              ...this.context,
              layer: this.ol,
              vectortilelayer: this.ol,
              rLayer: this,
              // rLayerVectorTile: this
            } as RContextType
          }
        >
          {this.props.children}
        </RContext.Provider>
      </div>
    );
  }