在 react-leaflet 中渲染 mapbox 矢量图块？答案

【问题标题】：Render mapbox vector tiles inside react-leaflet?在 react-leaflet 中渲染 mapbox 矢量图块？
【发布时间】：2018-12-28 01:33:12
【问题描述】：

有没有办法使用来自react-leaflet 的矢量图块？

我知道Leaflet.VectorGrid，但它不是为 react-leaflet 编写的？

【问题讨论】：

标签： react-leaflet

【解决方案1】：

对于react-leaflet v2，导出用HOC withLeaflet() 包裹的MapBoxGLLayer 组件以使其工作。

步骤：

1.安装mapbox-gl-leaflet。

npm i mapbox-gl-leaflet

2.添加mapbox-gl js和css到index.html

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />

3.添加这个组件。

import L from "leaflet";
import {} from "mapbox-gl-leaflet";
import 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);

4.使用MapBoxGLLayer 组件。

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <MapBoxGLLayer
            accessToken={MAPBOX_ACCESS_TOKEN}
            style="mapbox://styles/mapbox/streets-v9"
          />
        </Map>
      </div>
    );
  }
}

在此处找到工作代码（添加您自己的 mapbox 令牌）：https://codesandbox.io/s/ooypokn26y

【讨论】：

这对我很有帮助。唯一的事情是应该，我相信，是
@MurliPrajapati 我正试图围绕以下内容： import L from "leaflet";从“mapbox-gl-leaflet”导入{}； ... return L.mapboxGL(props);所以'L'引用传单，它没有 .mapboxGL() 函数 - 这是从 mapbox-gl-leaflet 中提取的吗？（试图理解，以便我可以转换为 TypeScript）
@BruceM L.mapboxGL() 函数由mapbox-gl-leaflet 提供。这个库将该函数添加到全局变量L。你可以看这里：github.com/mapbox/mapbox-gl-leaflet/blob/…
非常感谢 - 一旦我添加了 TypeScript 类型文件，它就开始工作了
嘿！任何想法如何添加语言检测支持 @mapbox/mapbox-gl-language ？只是想找到如何访问 map.AddControl

【解决方案2】：

react-leaflet issue 中有一些非常好的矢量图块示例（下面转载了 mapbox-gl 示例）。

// @flow

import L from 'leaflet'
import {} from 'mapbox-gl-leaflet'
import {PropTypes} from 'react'
import { GridLayer } from 'react-leaflet'

export default class MapBoxGLLayer extends GridLayer {
  static propTypes = {
    opacity: PropTypes.number,
    accessToken: PropTypes.string.isRequired,
    style: PropTypes.string,
    zIndex: PropTypes.number,
  }

  createLeafletElement(props: Object): Object {
    return L.mapboxGL(props)
  }
}

以及上述组件的用法：

<Map>
  <MapBoxGLLayer
    url={url}
    accessToken={MAPBOX_ACCESS_TOKEN}
    style='https://style.example.com/style.json'
  />
</Map>

注意：您可能还需要 npm install mapbox-gl 并导入该库并分配给全局 window.mapboxgl = mapboxgl 以避免 mapboxgl 未定义的问题。

【讨论】：

当我尝试访问扩展的 GridLayer 时，我收到了 Cannot read property 'layerContainer' of undefined。所以消息说：无法读取 MapBoxGLLayer.get (MapLayer.js:77) 处未定义的属性 'layerContainer'。有什么建议吗？

【解决方案3】：

您可以通过扩展 MapLayer 组件来创建custom component。您可以在我贡献给 here 的项目中看到如何在 react-leaflet 1.0 中完成此操作的示例。

【讨论】：