问题标签 [react-simple-maps]

我正在使用 react-simple-maps 在美国地图上放置标记

我可以添加自定义图像的唯一方法是使用<image>标签。但是我需要图像是动态的并且能够应用自定义动画。

我尝试使用 ::before、::after 以及使用 css 背景图像，但似乎无法更改它。

有没有办法做到这一点？或者有没有更好的方法在<svg> <g>标签下添加图像？

谢谢

当我想显示墨西哥地图时我遇到了这个问题 正如你所看到的没有完全显示，我不想放大，我只想让地图居中显示并且完整

到目前为止，这是我的代码。

我用react-simple-maps制作了一张地球地图，尽我所能优化渲染，但复杂的 json 仍然很慢。

重现步骤

1. 拖动/缩放地球，检查性能
2. 将顶部无线电输入更改为区域（更复杂的 json）
3. 拖动/缩放地球（如果可以的话）

如何避免“屏幕外渲染”？

有没有办法在拖动地球时提高渲染性能？

我最后一次尝试：

我正在使用 react-simple-maps librery 创建地图

这是我到目前为止的代码

但是当你选择一个州时，有什么办法可以摆脱这个边界？

我能够显示完整的美国地图，并且可以过滤地理位置以仅显示我想要的州，但我无法弄清楚如何放大过滤后的州。

例如，我正在从https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json过滤地理位置，只显示大西洋中部的州，但视口只是隐藏了其他状态，但保持缩放，就好像所有状态都是可见的。

我传入了一个 stateList 数组，我用它来根据需要过滤地理位置。

所以目前我正在使用 react-simple-map 制作带有标记的地图。它需要这种 json 格式：

然后我尝试像这样更改.net中的标签：

发生的是 0 & 1 有错误。

无论如何使它成为整数。

In my use case I need to create interactive farm maps where I can select fields. I'm trying to do this using the react-simple-maps component.

what was done

I created the farm Shapfile map in QGIS. Converted to TopoJSON using Mapshaper as per this tutorial.

However the map does not render correctly, see CodeSandbox.

What can I be missing?

Is this the best component to use in this case?

Map error

TopoJSON Map

React Simple Map component

我一直在玩 react-simple-maps 并且能够使用 lats 和 longs 添加标记。我大约 80% 的标记在美国，所以我在这里使用这张地图： https ://codesandbox.io/s/usa-state-labels-map-fvi5o?from-embed

我遇到的问题是，当我将我的数据集传递给它时，如果它运行到美国以外的某个位置，它将失败，但我似乎找不到任何可以让我忽略这些标记的东西。我什至尝试将渲染内容放在 try catch 块中，但它仍然会失败。我认为下面的代码在我的函数组件中只会忽略错误/无效的坐标，但它不会。是否可以忽略错误或无效的坐标？

我使用 react-simple-maps 和 react-tooltip 看起来悬停效果很好，但我尝试点击我在工具提示上添加的链接，但在我进入工具提示之前，它消失了，我无法访问用我的鼠标的内容。

这可能吗？