react-leaflet 相关问题

Leaflet地图的React组件。

React-leaflet + leaflet.elevation 用法

我发帖是为了看看是否有人可以给我一些关于这个“问题/问题”的线索。 我正在使用react-leaflet和leaflet-elevation,这是一个“插件”,可以创建海拔图并添加一些额外的

回答 2 投票 0

useRef 值在初始渲染时未定义

我正在用react和react-leaflet制作一张地图。 React Leaflet 有一个名为 FeatureGroup 的类,我想在第一次渲染时使用 React 中的 useRef 钩子访问该类,然后访问值...

回答 4 投票 0

用jest实现react-leaflet地图的react组件测试问题

当我尝试测试实现react-leaflet库的react组件时遇到以下问题 C:\数字预订-ui 颂歌模块 eact-leaflet\lib\index.js:1 ({“对象。<

回答 1 投票 0

使用 React Leaflet + Typescript 的 GeoJson 类型

我遇到了无法修复的类型错误: getFeatureStyle(feature.properties.name)} /> 呃...

回答 1 投票 0

获取反应传单中的点击标记

所以我的反应项目中有我的传单地图,我在这张地图上有标记,我想点击该标记。我想在侧面板上显示此标记弹出信息。我如何获得标记 cli...

回答 1 投票 0

React Leaflet:如何在首次渲染后访问 Map 对象?

我有一个带有两个子组件的父组件: 传单地图 地图上可见的位置列表(使用地图的 getBounds() 计算) 我在初始化位置列表时遇到问题...

回答 1 投票 0

更改集群的样式不适用于 SSR 反应应用程序中的延迟加载传单

我在部署在服务器端渲染 (SSR) 环境中的 React 应用程序中延迟加载 Leaflet 地图时遇到了一些挑战。该应用程序涉及在

回答 1 投票 0

React-传单飞至新位置

我有一个相当大的基于react和传单的应用程序。 问题是我无法将代码的主图移动到用户在输入菜单中提供的新位置,当人们...

回答 1 投票 0

如何在地图加载时打开特定的弹出窗口?

将 React-Leaflet V3.1.0 与 Express 服务器结合使用。 我的用户请求能够使用以下格式的链接: https://www.mymap.com/id/:category/:id/:zoom 这会向

回答 2 投票 0

如何使用React传单仅显示一个国家?

我在我的一个项目中使用react-leaflet,我想仅显示一个国家并删除其余国家或隐藏。 有人已经解决了这个问题,但不幸的是它不适用于 React。你知道怎么做吗

回答 2 投票 0

使用自定义请求标头反应传单 WMSTileLayer

我正在尝试使用我的 wms 磁贴请求发送身份验证标头。 当我使用纯传单库时,使用 leaflet-wms-header 非常简单 但是,我已经切换到react-leaflet并且它有它......

回答 1 投票 0

如何在nextjs中使用tailwind从react-leaflet中设置弹出窗口的样式

我正在尝试使用顺风在地图中设置弹出窗口的样式,但样式没有反映。 const 自定义图标 = divIcon({ html: ` 我正在尝试使用顺风在地图中设置弹出窗口的样式,但样式没有反映。 const customIcon = divIcon({ html: ` <svg width="54" height="55" viewBox="0 0 54 55" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_817_1163)"> <path d="M27.0001 54.2632C27.0001 54.2632 8.1001 29.6122 8.1001 19.1632C8.1001 16.6812 8.58896 14.2235 9.53877 11.9305C10.4886 9.63741 11.8808 7.55389 13.6358 5.79887C15.3908 4.04384 17.4743 2.65167 19.7674 1.70186C22.0604 0.752047 24.5181 0.263184 27.0001 0.263184C29.4821 0.263184 31.9398 0.752047 34.2328 1.70186C36.5259 2.65167 38.6094 4.04384 40.3644 5.79887C42.1194 7.55389 43.5116 9.63741 44.4614 11.9305C45.4112 14.2235 45.9001 16.6812 45.9001 19.1632C45.9001 29.6122 27.0001 54.2632 27.0001 54.2632ZM27.0001 24.5632C28.4323 24.5632 29.8058 23.9943 30.8185 22.9816C31.8312 21.9689 32.4001 20.5954 32.4001 19.1632C32.4001 17.731 31.8312 16.3575 30.8185 15.3448C29.8058 14.3321 28.4323 13.7632 27.0001 13.7632C25.5679 13.7632 24.1944 14.3321 23.1817 15.3448C22.169 16.3575 21.6001 17.731 21.6001 19.1632C21.6001 20.5954 22.169 21.9689 23.1817 22.9816C24.1944 23.9943 25.5679 24.5632 27.0001 24.5632Z" fill="#1B1130" /> </g> <defs> <clipPath id="clip0_817_1163"> <rect width="54" height="54" fill="white" transform="translate(0 0.263184)" /> </clipPath> </defs> </svg>`, popupAnchor: [140, 126], }); <MapContainer center={[48.8566, 2.3522]} zoom={10} scrollWheelZoom={false}> <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[48.8566, 2.3522]} icon={customIcon}> <Popup className=""> <h2 className="">hi how are you?</h2> <p className="">welcome to paris</p> </Popup> </Marker> </MapContainer> 我试图向整个弹出窗口添加背景颜色,但颜色没有反映到整个弹出窗口。 您找到解决方案了吗? 我也有同样的问题。

回答 1 投票 0

如何将react-leaflet地图添加到remixjs应用程序

我正在尝试将反应传单地图添加到混音应用程序中。我使用 npx create-remix@latest 命令创建了一个简单的应用程序。然后我使用安装说明添加了react-leaflet。现在我有...

回答 1 投票 0

带有react-leaflet的平滑滚动

我正在尝试在我的反应传单项目中创建平滑的缩放。 我知道这对于原版传单是可行的,如本文中所述,使用 smoothWheelZoom,但知道原版传单不...

回答 1 投票 0

React-leaflet ImageOverlay 在使用 jspdf 导出的 PDF 中不可见

我正在使用react-leaflet v4.2.1。我用它来显示的不是地图而是这样的自定义图像 我正在使用 react-leaflet v4.2.1。我用它来显示的不是地图而是这样的自定义图像 <MapContainer center={[height / 2, width / 2]} crs={crs} bounds={bounds} minZoom={-5} zoomControl={false} attributionControl={false} > <HeatmapLayer /> // component created with leaflet.heat <ZoomControl position='bottomleft' /> <ImageOverlay url={url} bounds={bounds} /> </MapContainer> 工作正常。我想将这张地图导出为 pdf 格式。我正在使用 jspdf 库。 const doc = new JsPDF(); const heatmap = document.getElementById('heatmap-report')!; const data = await html2canvas(heatmap); const img = data.toDataURL('image/png'); const imgProperties = doc.getImageProperties(img); const pdfWidth = doc.internal.pageSize.getWidth(); const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width; doc.addImage(img, 'PNG', 10, 150, pdfWidth - 10, pdfHeight); doc.save('my-file.pdf'); 问题是它只显示 HeatmapLayer 和 ZoomControl,而 ImageOverlay 不可见。 我还尝试使用 use-react-screenshot 库,它也只显示 HeatmapLayer 和 ZoomControl。 我必须将这个 ImageOverlay 与 HeatmapLayer 一起导出,就像用户在屏幕上看到的那样(因此包括缩放位置等),所以我需要使用传单。你有什么想法我该怎么做吗? 我找到了解决问题的方法。我将 base64 而不是 url 作为 url prop 传递给 ImageOverlay 组件。 // before <ImageOverlay url={url} bounds={bounds} /> // now <ImageOverlay url={base64} bounds={bounds} /> 我认为这可能与CORS有关。

回答 1 投票 0

更改传单工具提示中的尾部三角形颜色

我正在尝试更改鼠标悬停在传单地图标记引脚上时的工具提示尾部三角形颜色,但我无法检查确切的类名称来覆盖它。有没有办法改变颜色和需要...

回答 1 投票 0

Leaflet自定义图标,react-leaflet,无法构建Gatsby项目

当我在本地运行 gatsbydevelop 时,我的 Leaflet 地图中的自定义图标工作得很好,但是当我尝试构建时,我收到与自定义标记图标相关的错误: Webpack 错误:类型错误:

回答 2 投票 0

使用react-leaflet中的MapContainer出现问题:TypeError:无法读取null的属性(读取'useState')

我正在尝试使用 React Leaflet 在我的网站上添加来自 OpenStreetMap 的地图。语法方面一切似乎都很顺利,但是当我尝试使用时遇到此错误: 未捕获的类型错误:无法...

回答 1 投票 0

语法错误:使用 Jest 时出现意外的标记“导出”(来自“react-leaflet”)

我突然发现这个错误。 代码在我使用时工作正常,但在使用 Jest 测试时会弹出此问题。 ...................................................... ................................

回答 2 投票 0

React-Leaflet:尽管 Redux 存储中的颜色值更新,折线不会改变颜色

我已经设置了一个包含十六进制颜色代码的 Redux 存储。我计划实现一个功能,用户可以选择线条显示的颜色。然而,当我使用选择器来...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.