如何在react-map-gl中实现点击添加多边形拉伸图层？

嘿，刚接触React和MapboxGL的话确实容易在react-map-gl的声明式逻辑里卡壳，毕竟和纯MapboxGL的命令式调用思路不太一样～我来给你说说怎么实现点击多边形添加拉伸效果的需求：

react-map-gl是基于React的声明式组件库，所以不能像纯MapboxGL那样直接调用map.addLayer()，核心思路是用React状态来控制图层的显示与隐藏，具体步骤如下：

1. 维护选中多边形的状态 #

在你的地图组件里，先声明一个状态来存储点击选中的多边形要素：

import React, { useState } from 'react';
import ReactMapGL, { Layer, Source } from 'react-map-gl';

const YourMapComponent = () => {
  // 存储选中的多边形要素，初始为null表示没有选中
  const [selectedPolygon, setSelectedPolygon] = useState(null);
  // 其他地图状态（比如viewport）...

2. 给多边形图层添加点击监听 #

在你现有的多边形填充图层上，添加onClick事件，当用户点击时把选中的要素存入状态：

<Source id="your-polygon-data" type="geojson" data={你的多边形GeoJSON数据}>
  <Layer
    id="base-polygons"
    type="fill"
    paint={{
      'fill-color': '#888',
      'fill-opacity': 0.5
    }}
    onClick={(event) => {
      // 确保点击到了多边形要素
      if (event.features.length > 0) {
        // 更新状态，存储选中的要素
        setSelectedPolygon(event.features[0]);
      }
    }}
  />
</Source>

3. 根据状态条件渲染拉伸图层 #

当selectedPolygon有值时，渲染一个fill-extrusion类型的图层，实现拉伸效果：

{/* 只有选中多边形时才渲染拉伸图层 */}
{selectedPolygon && (
  <Source
    id="selected-polygon-source"
    type="geojson"
    data={selectedPolygon}
  >
    <Layer
      id="polygon-extrusion"
      type="fill-extrusion"
      paint={{
        'fill-extrusion-color': '#ff4500',
        'fill-extrusion-height': 600, // 自定义拉伸高度
        'fill-extrusion-opacity': 0.7
      }}
    />
  </Source>
)}

额外说明 #

• 这种方式完全符合React的声明式逻辑：状态变化时，React会自动帮你添加/移除对应的图层，不需要手动调用Mapbox的API。
• 如果需要取消拉伸效果，可以加个重置按钮，点击时把selectedPolygon设为null即可。
• 如果你希望多个多边形都能显示拉伸，只需要把状态改成数组，点击时往数组里添加/移除要素就行。

备注：内容来源于stack exchange，提问作者BrunoAT