如何在geojson mapbox中创建悬停效果

Question

我正在使用 MAP-BOX 在屏幕上绘制地图。我想对鼠标悬停产生一些影响。 我使用geojson 源和react-map-gl 作为包装器创建了行。 我想在鼠标悬停时为线条设置一些不透明度。

export const layer = {
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
      'line-join': 'round',
      'line-cap': 'round'
  },
  'paint': {
      'line-color': '#E95617',
      'line-width': 2,
      'line-dasharray':[1,2,3]
  }
}

export const route1={
    
  type: "Feature",
  properties: {
      id="route1"
  },
  geometry: {
    type: "LineString",
    coordinates: [
        [76.994168,31.780632],
        [76.993894,31.781929],
        [76.997771,31.783204 ],
        //------ more data
    ]
  }
} 

import ReactMapGL,{Source, Layer} from "react-map-gl";
const Routes=()=>{
    return <ReactMapGL {...props}>
        <Source type="geojson" data={tempdata.route1}>
            <Layer {...tempdata.layer}/>
        </Source>

        <Source type="geojson" data={tempdata.route2}>
            <Layer {...tempdata.layer1}/>
        </Source>
    </ReactMapGL>
}

当我打开浏览器控制台并查找 id route and route 然后它报告我为空。我没有看到任何将类名添加到 geojson 源的示例或文档。 如何创建悬停效果？

Answer 1

要添加悬停效果，您需要使用他们的 Feature-state API。首先，这里是 [链接（https://docs.mapbox.com/help/tutorials/create-interactive-hover-effects-with-mapbox-gl-js/） 到 Mapbox 的一个很好的运行，但我会完成以下步骤

我没有使用过react-map-gl，但我希望这仍然适用，因为上面的评论建议您需要使用 Mapbox API 来设置它。

我认为您需要将 id 属性放在 properties 属性之外。另外 Mapbox id 必须是整数。

因此，这样的事情可能会起作用：

const sourceData = {
  type: "Feature",
  properties: {
      id=1
  },
 id:1
  geometry: {
    type: "LineString",
    coordinates: [
        [76.994168,31.780632],
        [76.993894,31.781929],
        [76.997771,31.783204 ],
        //------ more data
    ]
  }
} 

这可能会解决大部分问题。

第二部分是你没有悬停效果。您可以将其添加到首先设置图层的代码中。

    map.addLayer({
      id: <name of the layer>,
      type: "fill",
      source: <name of the source> ,
      paint: {
        "fill-color": ["get", "colour"],
        "fill-opacity": [
          "case",
          ["boolean", ["feature-state", "hover"], false],
          1,
          0.4,
        ],
      },
    });

这是应用悬停不透明度更改的代码。没有悬停时默认为 false，因此默认应用 0.4，然后悬停时不透明度为 1。

"fill-opacity": [
          "case",
          ["boolean", ["feature-state", "hover"], false],
          1,
          0.4,
        ],

要进行此设置，请按以下步骤操作：

1. 创建地图引用挂钩

 const mapContainerRef = useRef(null);

1. 在页面渲染上设置地图参考

  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [lng, lat],
      zoom: zoom,
    });
},[])

3. Add your map source and layer
```javascript
useEffect(()=>{

map.addSource
map.addLayer

},[map])

正如我所说，来自 Mapbox 的可靠 walkthrough 使用其原生 API 和更简单的 feature-state api 文档（这是悬停效果所使用的）。