地图盒-gl-传单在反应-传单与TypeScript？

Question

我正在努力使渲染mapbox向量瓷砖内的反应-传单？描述的这个实现工作正常，但我使用的是TypeScript。

所以我的文件是这样的：

import * as L from "leaflet";
import {} from "mapbox-gl-leaflet";
import * as PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";

class MapBoxGLLayer extends GridLayer {
  createLeafletElement(props) {
    return L.mapboxGL(props);
  }
}

/*
* Props are the options supported by Mapbox Map object
* Find options here:https://www.mapbox.com/mapbox-gl-js/api/#new-mapboxgl-map-options-
*/
MapBoxGLLayer.propTypes = {
  accessToken: PropTypes.string.isRequired,
  style: PropTypes.string
};

MapBoxGLLayer.defaultProps = {
  style: "mapbox://styles/mapbox/streets-v9"
};

export default withLeaflet(MapBoxGLLayer);

但是，我得到了以下错误：

‘import("c:/Users/.../node_modules/@types/leaflet/index")'.ts(2339)’类型中不存在属性'mapboxGL‘

所以传单没有mapboxGL的定义(因为mapboxGL不是它的一部分)--但是我如何创建或引用mapboxGL的定义，允许我调用L.mapboxGL(道具)？

Answer 1

要解决此错误，需要安装mapbox-gl-leaflet，例如：

npm install --save @types/mapbox-gl-leaflet

最后但并非最不重要的是，类型定义是，目前与react-leaflet v2并不完全兼容，需要进行一些额外的调整。由于当前版本的@types/react-leaflet以react-leaflet v1为目标，因此缺少来自第2版的一些类型定义(更多细节请参考这条线 )，例如withLeaflet HOC。好消息是已经提交了一个按下，它增加了对第2版的支持(但尚未批准)。

无论如何，缺少的withLeaflet类型def可以这样声明：

declare module "react-leaflet" {
  const withLeaflet: <T>(component: T) => T;
}

最后，组件可以这样实现：

import * as L from "leaflet";
import "mapbox-gl-leaflet";

declare module "react-leaflet" {
  const withLeaflet: <T>(component: T) => T;
}


import {Children, MapLayer, withLeaflet} from "react-leaflet";


export interface IMapboxGLProps extends L.MapboxGLOptions {
  children?: Children;
}


class MapBoxGLLayer extends MapLayer<IMapboxGLProps,{}> {

  public static defaultProps = {
    style: "mapbox://styles/mapbox/streets-v9"
  };

  public createLeafletElement(props:IMapboxGLProps)  {
    return L.mapboxGL(props);
  }

  public render() {
    return null
  }
}

export default withLeaflet(MapBoxGLLayer);

这是一个演示