leaflet 相关问题

尝试使用react-leaflet-draw和Vite绘制矩形时出现错误“未捕获的ReferenceError：分配给未声明的变量类型”

我在尝试绘制矩形时遇到错误“Uncaught ReferenceError：分配给未声明的变量类型”， 所有其他形状都工作正常，但矩形不起作用......

如何从 MarkerClusterGroup 中输入 iconCreateFunction

我使用 React-leaflet-cluster 使用 MarkerClusterGroup 创建了一个小测试。虽然它有效，但我很难让所有类型在打字稿中工作 我使用 MarkerClusterGroup 使用 react-leaflet-cluster 创建了一个小测试。虽然它有效，但我很难让所有类型在打字稿中工作 <MarkerClusterGroup iconCreateFunction={createCustomClusterIcon} /> </MarkerClusterGroup> 回调函数是这样的 const createCustomClusterIcon = (cluster) => { const markers = cluster.getAllChildMarkers(); ... } 所以，我遇到的问题是输入 cluster 属性。我能够赋予 cluster 的唯一类型是 any 和 { getChildCount: () => string }。但这个类型应该是什么？ 要导出集群类型，您可以推断默认导出使用的参数 尝试使用以下代码 import cluster from "react-leaflet-cluster"; type InferIt<T, V extends "RT" | "P" | "B"> = T extends ( ...args: infer P ) => infer RT | Promise<infer RT> | PromiseLike<infer RT> | Awaited<infer RT> ? V extends "B" ? { readonly params: P; readonly returnType: RT } : V extends "RT" ? RT : V extends "P" ? P : T : T; type ClusterInferred = InferIt<typeof cluster, "P">['0']; 上面的 InferIt 类型具有三个选项的并集： (1) "RT" -> 推断 ReturnType； (2) "P" -> 推断参数； (3) "B" -> 推断 Both 具有 { readonly params: P; readonly returnType: RT } 的形状 游乐场链接 推断的簇类型的屏幕截图

在调整其容器大小时调整Leaflet地图的大小（虚线图）

我在使用仪表板传单时遇到一些问题；特别是当父容器调整大小时它的宽度。我正在使用 dash-ressized-panels 来调整一些 div 的大小。 这是一个 MRE： # pip install dash d...

如何使用Angular @HostListener onLoad获取视口的当前宽度？

我目前正在使用 Angular @HostListener 来获取视口 onResize() 的当前宽度，如下所示： @HostListener('窗口:调整大小', ['$event']) onResize（事件？）{ window.innerWidt...

传单控制无线电不会保持禁用状态

我正在使用JavaScript 将disabled=disabled 属性添加到.leaflet-control-layers-selector 单选输入。 禁用的属性保留在输入上，直到用户将鼠标悬停在 .leaflet-

如何更改传单地图中的默认光标？

我正在尝试修改按下某个控制按钮时的默认光标图标。 虽然我通过在容器 div 上使用 css 取得了部分成功，但这样做会覆盖移动光标...

如何将航点路线图添加到Leaflet Map

我们有一张地理地图，需要在地图上放置多点路线。对 Leaflet、Mapbox 和第三方 OSRM 进行了一些广泛的挖掘（https://www.liedman.net/leaflet-routing-

单击传单中的相同标记时防止关闭弹出窗口

我有一个代码，它使用传单向标记呈现弹出窗口，如下所示： const lat = e.latlng.lat; if ($('#lmap').css("光标") === '十字线') { 常量注释 = ` 我有一个使用 leaflet 将弹出窗口呈现到标记的代码，如下所示： const lat = e.latlng.lat; if ($('#lmap').css("cursor") === 'crosshair') { const note = `<div>popup<div>`; const newMarker = new L.marker(e.latlng,{draggable:true}).addTo(lmap); if (!(note === "")) { newMarker.bindPopup(note, {closeOnClick: false, autoClose: false, closeButton: true}).openPopup(); } } 这里 closeButton: true 用于在弹出窗口中呈现关闭按钮。但问题是当我单击标记时弹出窗口也会关闭。如何在单击标记时防止弹出窗口关闭，并在单击弹出窗口中的关闭按钮时将其关闭。 不要将弹出窗口直接添加到标记，创建一个弹出“图层”并在单击标记时将其打开： // a global variable var popup = L.popup({closeOnClick: false, autoClose: false, closeButton: true}); //your function from above const newMarker = new L.marker(e.latlng,{draggable:true}).addTo(lmap); newMarker.on('click',(e)=>{ popup.options.offset = e.target.options.icon.options.popupAnchor; popup.setContent('TEST').setLatLng(e.target.getLatLng()).addTo(map) })

Leaflet.js - 在某些浏览器上无法获取我的当前位置

我使用 Leaflet.js 和这些插件制作了这个应用程序：MarkerCluster、Leaflet Map Fullscreen，它托管在 Linux 服务器、HTTP apache2 中。 由于某种原因，我无法获取当前位置...

添加传单尺插件失败

我总是得到：js：Uncaught ReferenceError：地图未定义 添加Leaflet-Ruler插件 m.get_root().header.add_child(folium.CssLink("https://unpkg.com/[email protected]/dist/leaflet.css"...

在 Wordpress 中用两根手指滚动传单地图

我正在为客户重新设计一个页面，他们使用在 R 中创建的 Leaflet 地图，然后以 .html 格式导出。 我可以简单地将这个 .html 文件作为媒体文件上传到 Wordpress 中，然后

为在线游戏创建网络地图时出现问题

我正在尝试基于 OpenSimulator 为我的游戏创建一个网络地图。 所有图像都出现在一个位置（例如：https://example.com/map-1-1000-1000-objects.jpg）。 现在我正在尝试展示这些 Ima...

Leaflet Map 未正确渲染图块

我正在使用react-leaflet构建地图，在第一次加载中，有时大多数图块都没有可视化，如下所示： 我已经解决了几个堆栈溢出问题以及我所做的事情......

使用 Vue3 组件作为 Leaflet 弹出窗口

上一个问题展示了我们如何使用 Vue2 组件作为 LeafletJS 弹出窗口的内容。我一直无法让这个与 Vue3 一起工作。 提取我的代码的相关部分，我...

如何为Leaflet插件添加Typescript支持

我需要为此Leaflet插件添加TS支持：https://github.com/yakitoritabetai/Leaflet.LabelTextCollision 有谁知道我该怎么做？我试图创建一个 .d.ts 文件，但是因为......

为什么编辑事件没有触发？

我有一张地图（完整示例在这里） 我有一张地图（这里有完整的例子） <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" /> <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script> ... <div id="map" style="height: 900px;"></div> var map = L.map('map', { pmIgnore: false }).setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); map.pm.addControls({ position: 'topleft', drawCircleMarker: false, rotateMode: false, }); 我还有一些逻辑来向地图添加一些数据 var shapeField = document.getElementById('shape-field').value; var savedPolygonData = shapeField ? JSON.parse(shapeField) : null; if (savedPolygonData) { L.geoJSON(savedPolygonData).eachLayer(function (layer) { allLayers.push(layer); layer.addTo(map); }); } 然后我检查一些事件 map.on('pm:create', function (e) { alert('something is created'); }); map.on('pm:edit', function (e) { alert('something is created'); }); map.on('pm:remove', function (e) { alert('something is removed'); }); create 和 remove 的事件运行良好，但 edit 事件不起作用。 您可以在此处查看完整示例 我很乐意提供任何帮助。 尝试一下，在创建新图层时在 pm:create 内订阅： map.on('pm:create', ({layer}) => { layer.on('pm:edit', e => { alert('something is edited'); }); });

如何自定义vue2-leaflet弹出窗口

使用Vue2-Leaflet，如何自定义leafletjs的L.Popup组件的设计。 遵循以下指南： https://vue2-leaflet.netlify.app/components/LPopup.html#demo 已检查过

如何将 Vue 组件集成到传单弹出窗口中？ [重复]

我的项目使用Vue.js和传单在地图上以标记的形式显示一些数据。 地图上的标记是绑定的弹出窗口，我希望当

如何将非类型化的 Leaflet 插件导入到 Angular 项目中？

我希望将传单插件 leaflet-mapwithlabels 导入到我的 Angular 项目中。该库没有 NPM 安装选项，按照一些指南，我尝试直接添加 JS 文件...

传单反应页面的预渲染或 SSG

有没有一种方法可以预渲染一个主要是一个巨大的leaflet.js窗口的页面？ 窗口始终从相同的坐标开始，因此在 b 处准备初始视图会很有帮助...