如何将自定义图标添加到 `react-map-gl/maplibre` 的 LayerProps 中？

Question

我无法将自定义图标标记应用到我的

LayerProps

。 我想使用

lucid-react

中的图标作为

unclusteredPointLayer

。 到目前为止我已经尝试过： 我用

type: "symbol"

代替了圆圈，但没能成功。

这是工作代码，但没有自定义标记：

import { Outlet, useLoaderData } from "@remix-run/react";
import {
  Layer,
  LayerProps,
  MapProvider,
    NavigationControl,
  Map as ReactMap,
  Source,
} from "react-map-gl/maplibre";

import "maplibre-gl/dist/maplibre-gl.css";
import Header from "~/components/map/header";
import {
  getAllPlaygrounds,
  getAllPlaygroundsAsGeoJSON,
} from "~/models/playground.server";

export async function loader() {
  const playgrounds = await getAllPlaygroundsAsGeoJSON();
  const plainPlaygrounds = await getAllPlaygrounds();

  return {
    playgrounds: playgrounds,
    plainPlaygrounds: plainPlaygrounds,
  };
}

export const clusterLayer: LayerProps = {
  id: "clusters",
  type: "circle",
  source: "playgrounds",
  filter: ["has", "point_count"],
  paint: {
    "circle-color": [
      "step",
      ["get", "point_count"],
      "#51bbd6",
      100,
      "#f1f075",
      750,
      "#f28cb1",
    ],
    "circle-radius": ["step", ["get", "point_count"], 20, 100, 30, 750, 40],
  },
};

export const clusterCountLayer: LayerProps = {
  id: "cluster-count",
  type: "symbol",
  source: "playgrounds",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{point_count_abbreviated}",
    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
    "text-size": 12,
  },
};

export const unclusteredPointLayer: LayerProps = {
  id: "unclustered-point",
  type: "circle",
  source: "playgrounds",
  filter: ["!", ["has", "point_count"]],
  paint: {
    "circle-color": "#11b4da",
    "circle-radius": 4,
    "circle-stroke-width": 1,
    "circle-stroke-color": "#fff",
  },
};

export default function Explore() {
  const data = useLoaderData<typeof loader>();

  return (
    <div className="">
      <MapProvider>
        <Header />
        <ReactMap
          id="map"
          initialViewState={{
            longitude: 7.67,
            latitude: 51.988,
            zoom: 11,
          }}
          style={{
            width: "100%",
            height: "100%",
            position: "fixed",
            top: 0,
            left: 0,
          }}
          mapStyle={
            "https://api.maptiler.com/maps/streets/style.json?key=" +
            ENV.MAPTILER_KEY
          }
          attributionControl={true}
        >
          <Source
            id="my-data"
            type="geojson"
            data={data.playgrounds}
            cluster={true}
            clusterMaxZoom={14}
            clusterRadius={50}
          >
            <Layer {...clusterLayer} />
            <Layer {...clusterCountLayer} />
            <Layer {...unclusteredPointLayer} />
          </Source>
          <NavigationControl position="bottom-right" showCompass={false} />
          <Outlet />
        </ReactMap>
      </MapProvider>
    </div>
  );
}

有人有一些建议吗？

非常感谢！！

Answer 1

查看mapbox文档，使用“symbol”作为类型是正确的轨道，请参阅https://docs.mapbox.com/style-spec/reference/layers/#symbol了解正确用法：

您可以使用

"icon-image"

指定自定义图像。

react-map-gl

文档，它描述了

Layer

和LayerProps作为mapbox图层API的包装器，所以mapbox文档会更有帮助。