时间戳

首页 > 解决方案 > 如何在 Deck.gl 的 IconLayer 中渲染自定义 svg

reactjs - 如何在 Deck.gl 的 IconLayer 中渲染自定义 svg

问题描述

当满足特定条件时，我正在尝试在 iconLayer 中呈现自定义 svg，在此示例中，https: //deck.gl/gallery/icon-layer我的 getIcon 选项是

getIcon: (d) => ({
      url: './glow.svg',
      width: 128,
      height: 128
    }),

我认为 url 是我要渲染的图像的路径但是，地图上没有显示任何内容。

完整的组件是

import { IconLayer } from "@deck.gl/layers";
import icons from "../assets/images/monsoon_icons.png";

const COLORS = {
  ...colors
};

const ICON_MAPPING = {
  circle: { x: 0, y: 0, width: 70, height: 70, mask: true },
  rectangle: { x: 70, y: 0, width: 70, height: 70, mask: true },
  triangle: { x: 140, y: 0, width: 70, height: 70, mask: true },
  star: { x: 210, y: 0, width: 70, height: 70, mask: true },
};

export const RenderLayers = (props) => {
  let { data } = props;

  if(props.isSaved) {
    return [
      new IconLayer({
        ...other icon props
        // iconMapping: ICON_MAPPING,
        getIcon: (d) => ({
          url: './glow.svg',
          width: 128,
          height: 128
        }),
       ...other icon props,
      }),
  
      new IconLayer({
         ...other icon props
        // iconMapping: ICON_MAPPING,
        getIcon: (d) => ({
          url: './glow.svg',
          width: 128,
          height: 128
        }),
       ...other icon props,
      }),
    ];
  };

  if (!data?.length) {
    console.log("NO DATA TO MAP");
    return;
  };

  return [
    new IconLayer({
      ...normal icon layer props
      })
  ];
};

标签： reactjsmapbox-gldeck.gl

解决方案

您需要将 svg 转换为数据 URL。

按照官方的 deck.gl 示例：

import yourSvg from 'whatever/path';

function svgToDataURL(svg) {
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}

new IconLayer({
  getIcon: () => ({
    url: svgToDataURL(yourSvg),
    width: 24,
    height: 24
  }),
})

此外，您可以在此处查看完整的工作示例 。

干杯!

推荐阅读