在 Mapbox / React js 中添加多个样式层

Question

我在 React 中使用 mapbox gl 在地图上绘制多边形。想填充这些多边形，还要调整多边形的边框宽度。我的理解是作为填充是不能调整边框宽度的属性，所以必须创建一个单独的线型。

我遇到的问题是，当我尝试添加额外的样式来设置线宽时，它不起作用。显然，根据下面的代码，第一个样式层是被渲染的，而第二个不是：“STYLE LAYERS #'S 1 AND 2”。如果我将它放在第一个位置，我可以得到要渲染的线条样式，但是我没有得到填充层，反之亦然。

对此有什么想法吗？

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

  useEffect(() => {
    if (!map.current) return;
    map.current.on("move", () => {
      console.log(map.current.getCenter().lng.toFixed(4));
      setLng(map.current.getCenter().lng.toFixed(4));
      setLat(map.current.getCenter().lat.toFixed(4));
      setZoom(map.current.getZoom().toFixed(2));
    });
  });

  useEffect(() => {
    if (!map.current) return;
    map.current.on("load", () => {
      dataArray.map((item) => {
        map.current.addSource(item.name, {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: item.data,
            },
            properties: {
              name: item.name,
            },
          },
        });

        //STYLE LAYER #1
        map.current.addLayer({
          id: item.name,
          type: "fill",
          source: item.name, 
          layout: {},
          paint: {
            "fill-color": "#aaa",
            "fill-opacity": 0.25,
            "fill-outline-color": "#000",
          },
        });

        //STYLE LAYER #2
        map.current.addLayer({
          id: item.name,
          type: "line",
          source: item.name, 
          layout: {},
          paint: {
            "line-color": "#000",
            "line-width": 2,
          },
        });
      });
    });

Answer 1

每一层都需要有一个唯一的 ID（参见：https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/）。因此，您可以将“-border”附加到线层 ID。

在 Mapbox / React js 中添加多个样式层

Adding multiple style layers in Mapbox / React js

polygon

mapbox

reactjs