mapbox-gl-leaflet в ответном листочке с использованием TypeScript? - PullRequest
Новая
       31

mapbox-gl-leaflet в ответном листочке с использованием TypeScript?

0 голосов
/ 27 февраля 2019

Я пытаюсь описать эту реализацию в Отображать векторные листы 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);

Однако я получаю следующую ошибку:

Свойство 'mapboxGL' не существует для типа 'typeof import ("c: / Users /.../ node_modules / @types / leaflet / index ") '. ts (2339)

Таким образом, в листовке нет определения для mapboxGL (что имеет смысл, так как mapboxGL не является его частью) - но как мне это сделать?создать или ссылаться на определение для mapboxGL, которое позволяет мне вызывать L.mapboxGL (props)?

1 Ответ

0 голосов
/ 27 февраля 2019

Для устранения этой ошибки необходимо установить определения типа для mapbox-gl-leaflet, например: 

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

И, наконец, не менее важно, react-leaflet определения типа не полностью совместимы с react-leaflet v2 на данный момент, и требуется дополнительная настройка.Поскольку текущая версия из @types/react-leaflet нацелена на react-leaflet v1, некоторые определения типов из версии 2 отсутствуют (для получения более подробной информации см. эту ветку ),например withLeaflet HOC.Хорошей новостью является PR , в котором добавлена ​​поддержка версии 2, которая уже была отправлена ​​(но еще не утверждена)

В любом случае отсутствующий тип определения withLeaflet может бытьобъявлено так: 

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);

Вот демоверсия

...