@naivemap/mapbox-gl-echarts-layer/dist/index.es.js

A Mapbox GL JS layer to integrate Apache ECharts' Lines and Scatter charts.

import { getCoordinateSystemDimensions as s, registerCoordinateSystem as a, init as h } from "echarts";
const d = "gl-layer-echarts";
class n {
  id;
  dimensions = ["x", "y"];
  _map;
  _mapOffset = [0, 0];
  constructor(e, t) {
    this.id = e, this._map = t;
  }
  create(e) {
    e.eachSeries((t) => {
      t.get("coordinateSystem") === this.id && (t.coordinateSystem = new n(this.id, this._map));
    });
  }
  dataToPoint(e) {
    const t = this._map.project(e), i = this._mapOffset;
    return [t.x - i[0], t.y - i[1]];
  }
  pointToData(e) {
    const t = this._mapOffset, i = this._map.unproject([e[0] + t[0], e[1] + t[1]]);
    return [i.lng, i.lat];
  }
}
class c {
  _container;
  _map;
  _ec;
  _coordSystemName;
  _ecOption;
  constructor(e) {
    this._coordSystemName = d + "-" + Math.random().toString(16).substring(2), this._ecOption = e;
  }
  onAdd(e) {
    if (this._map = e, this._createLayerContainer(), !s(this._coordSystemName)) {
      const t = new n(this._coordSystemName, this._map);
      a(this._coordSystemName, t);
    }
  }
  onRemove() {
    this._ec?.dispose(), this._removeLayerContainer();
  }
  setOption(e, t) {
    this._ecOption = e, this._ec?.setOption(e, t);
  }
  render() {
    if (this._container || this._createLayerContainer(), !this._ec) {
      this._ec = h(this._container), this._prepareECharts(), this._ec.setOption(this._ecOption);
      return;
    }
    if (this._map.isMoving()) {
      this._ec.clear();
      return;
    }
    this._ec.resize({
      width: this._map.getCanvas().width,
      height: this._map.getCanvas().height
    }), this._prepareECharts(), this._ec.setOption(this._ecOption);
  }
  _prepareECharts() {
    const e = this._ecOption.series;
    if (e)
      for (let t = e.length - 1; t >= 0; t--)
        e[t].coordinateSystem = this._coordSystemName;
  }
  _createLayerContainer() {
    const e = this._map.getCanvasContainer();
    this._container = document.createElement("div"), this._container.style.width = this._map.getCanvas().style.width, this._container.style.height = this._map.getCanvas().style.height, e.appendChild(this._container);
  }
  _removeLayerContainer() {
    this._container && this._container.parentNode?.removeChild(this._container);
  }
}
function _(r) {
  if (Array.isArray(r))
    return r;
  const e = r?.defaultProjectionData?.mainMatrix;
  if (e)
    return e;
  throw new Error("Unable to resolve projection matrix from render arguments.");
}
function p(r, e) {
  let t;
  return {
    id: e.id,
    type: "custom",
    renderingMode: e.renderingMode ?? "2d",
    onAdd(i, o) {
      t = i, r.onAdd(i, o);
    },
    onRemove(i, o) {
      r.onRemove(i, o), t = void 0;
    },
    render(i, o) {
      if (!t)
        throw new Error("Layer adaptor render invoked before onAdd.");
      r.render({
        map: t,
        gl: i,
        matrix: (e.resolveMatrix ?? _)(o),
        rawArgs: o,
        prepareStencilMask: e.prepareStencilMask ? () => e.prepareStencilMask(t) : void 0
      });
    }
  };
}
const m = p;
class g {
  id;
  /**
   * @ignore
   */
  type;
  /**
   * @ignore
   */
  renderingMode;
  _core;
  _adaptor;
  /**
   * @param id - A unique layer id
   * @param ecOption - The ECharts option object used to configure the visualization.
   * @see https://echarts.apache.org/en/option.html
   */
  constructor(e, t) {
    this.id = e, this.type = "custom", this.renderingMode = "2d", this._core = new c(t), this._adaptor = m(this._core, {
      id: e,
      renderingMode: this.renderingMode
    });
  }
  /**
   * @ignore
   */
  onAdd(e, t) {
    this._adaptor.onAdd(e, t);
  }
  /**
   * @ignore
   */
  onRemove(e, t) {
    this._adaptor.onRemove(e, t);
  }
  /**
   * Updates the ECharts visualization with a new configuration.
   * This is the primary method for dynamically changing the displayed data or styles.
   *
   * @param option - The new ECharts option object to apply.
   * @param notMerge - If true, the new options will completely replace the existing ones.
   *                   If false or undefined, the new options will be merged with the old ones.
   *                   Defaults to `false`.
   * @see https://echarts.apache.org/en/api.html#echartsInstance.setOption
   */
  setOption(e, t) {
    this._core.setOption(e, t);
  }
  /**
   * @ignore
   */
  render(e, t) {
    this._adaptor.render(e, t);
  }
}
export {
  g as default
};