🐛 [BUG]MapLibre 不显示地图

[foxyZeng]

代码如下

import { LarkMap, LayerPopup, PointLayer, ScaleControl, ZoomControl } from '@antv/larkmap';
import type { LarkMapProps, LayerPopupProps, PointLayerProps } from '@antv/larkmap';
import {MapLibre} from "@antv/l7";

const config: LarkMapProps = {
  map: new MapLibre({
    zoom: 10,
    style: 'https://api.maptiler.com/maps/streets/style.json?key=YbCPLULzWdf1NplssEIc',
    minZoom: 0,
    maxZoom: 18,
  }),
}

我这么设置MapLibre，结果地图显示不了，然后控制台报错 Uncaught ReferenceError: _wrapNativeSuper is not defined 只显示了背景，没地图

[foxyZeng]

完整代码

import React, { useEffect, useState } from "react";
import { LarkMap, LayerPopup, PointLayer, ScaleControl, ZoomControl } from '@antv/larkmap';
import type { LarkMapProps, LayerPopupProps, PointLayerProps } from '@antv/larkmap';
import {MapLibre} from "@antv/l7";

const config: LarkMapProps = {
  map: new MapLibre({
    zoom: 10,
    style: 'https://api.maptiler.com/maps/streets/style.json?key=YbCPLULzWdf1NplssEIc',
    minZoom: 0,
    maxZoom: 18,
  }),
};

const items: LayerPopupProps['items'] = [
  {
    layer: 'PolygonLayer',
    fields: [
      {
        field: 'province',
        formatField: '省份',
      },
      {
        field: 'busStop',
        formatField: '城市',
      },
      {
        field: 'address',
        formatField: '站点',
      },
      {
        field: 'lng',
        formatField: '经度',
      },{
        field: 'lat',
        formatField: '纬度',
      },
    ]
  }
];

const pointLayerProps: Omit<PointLayerProps, 'source'> = {
  id: 'myPointLayer',
  shape: 'circle',
  size: 7,
  color: {
    field: 'address',
    value: ['#34B6B7', '#CEF8D6'],
  },
  state: {
    active: {
      color: 'pink', // 设置鼠标划过点的颜色
    },
  },
  autoFit: true,
  style: {
    opacity: 0.7,
  },
  blend: 'normal',
};

const RealTimeTradeMap: React.FC = () => {
  const [data, setData] = useState({
    data: [],
    parser: {
      type: 'json',
      x: 'lng',
      y: 'lat',
    },
  });

  useEffect(() => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/d5ec85b7-3ac6-4987-924a-3952d7e31bcb.json')
      .then((res) => res.json())
      .then((dataArr) => {
        setData({ ...data, data: dataArr });
      });
  }, []);

  return (
    <LarkMap {...config} style={{ height: '60vh' }}>
      <PointLayer {...pointLayerProps} source={data} id="PolygonLayer" />
      <ScaleControl />
      <ZoomControl />
      <LayerPopup
        closeButton={false}
        closeOnClick={false}
        anchor="bottom-left"
        title={<div>图层数据</div>}
        trigger="hover"
        items={items}
      />
    </LarkMap>
  )
}

export default RealTimeTradeMap;