问题标签 [leaflet-draw]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3103 浏览

reactjs - 将 geojson 导入到 react-leaflet-draw

我正在尝试将一些 GeoJSON 导入到FeatureGroup事件_onFeatureGroupReady处理程序中,但它似乎没有呈现到地图中。代码主要基于react-leaflet-draw 此处库中的示例。奇怪的是,编辑菜单变得可用,表明数据可能在那里,但只是没有被渲染。

我不确定发生了什么,因为我一般是地图的初学者。相关代码在else if(this.props.data) {块中。这些console.log()语句都显示了数据的存在并且格式正确。

这是我尝试将此数据导入的代码FeatureGroup

我可能做错了什么(甚至更好,我可以通过任何方式实现这一点)?

0 投票
1 回答
382 浏览

javascript - 在传单绘制上删除多个图层

我使用传单绘制在地图上绘制多边形。目前,我只能删除点击的多边形。

这是我现在拥有的一个例子:http: //leaflet.github.io/Leaflet.draw/docs/examples-0.7.x/full.html

假设您绘制了 3 个多边形。如果要删除前 2 个,则必须单击垃圾桶图标,单击前 2 个,然后单击保存。我想要实现的是不必点击第二个。我实际上有第二个的 id,但我无法将它添加到removingLayers保留单击图层的数组中。

我有什么自动取款机:

我设法手动将它们从视图中删除,但是恢复选项不再有效。我很确定我应该将要删除的图层推送到他们正在执行的leaflet-draw.js 列表中:

我的问题是:如何_deletedLayers从外部访问?

0 投票
1 回答
1358 浏览

angular7 - 如何使用 ngx-leaflet-draw 为 ngx-leaflet 创建自定义绘制按钮

我想创建一个自定义按钮,它可以在单击时启用折线抽屉。它类似于How to click a button and start a new polygon without using the Leaflet.draw UI,但我想用angular (7),ngx-leafletngx-leaflet-draw.

这是我的角度项目链接中的改编代码:

这是我的html:

如果我单击“绘制折线”按钮,则会收到错误消息:

ERROR TypeError: Cannot read property 'overlayPane' of undefined at NewClass.initialize (leaflet.draw.js:8) at NewClass.initialize (leaflet.draw.js:8) at new NewClass (leaflet-src.js:301)

我的代码有什么问题?

0 投票
1 回答
864 浏览

leaflet - Leaflet.draw 样式在反应组件中搞砸了

在我的 react 项目中,我使用传单作为地图库。而且我没有使用react-leaflet包,而是使用原始的传单库。

现在我想添加leaflet-draw插件,我已经安装了leaflet-drawnpm 包,我的设置如下:

在上面的代码中,this.map是leaflet Dom 实例。到目前为止,传单绘制的功能可以正常工作。

但问题是工具栏的样式混乱如下:

在此处输入图像描述

所以有什么问题?

0 投票
0 回答
2329 浏览

reactjs - React Leaflet.draw:如何在不使用 react-leaflet 工具栏的情况下使用标准按钮创建绘图功能,但是,将其写在“React”中

如何在单独的控制框中创建驻留在传单地图上的自定义按钮,以创建“折线”、“多边形”或“标记”,这些按钮都将位于单独的按钮上,而无需使用传单绘制 标准 UI 工具栏。我真的很想知道如何用“React”方式与 Vanilla Javascript 编写它,因为我的整个程序都是用 React 编写的。如果有人可以编写一个简单的程序,展示如何在 React 中使用单独的按钮绘制“折线、多边形”等,将不胜感激。

这是我的一些代码的片段。谢谢

其他组件

0 投票
1 回答
1083 浏览

javascript - 传单在负载图上绘制多边形

我有这个多边形坐标

我想在地图加载时绘制多边形。也可编辑。

换句话说

地图加载后如何在地图上显示可编辑的多边形。

0 投票
1 回答
883 浏览

javascript - 控制工具栏大小的传单库或解决方法

我需要更改工具栏的样式,例如按钮的大小,以便为移动设备提供更大的触摸区域(绘制工具栏和其他控件)。

我已经尝试使用 css 将工具栏按钮的宽度和高度的大小更改为 48px。

当前的CSS:

当我以 css 方式更改大小时,工具栏不再响应(传单绘制工具栏背景应该适合大小)

当您单击工具栏按钮时,它也会出现故障,并显示水平子工具栏(文本重叠)。

我的问题图片

有谁知道一个插件或一种为移动设备提供更大触摸区域的方法?

0 投票
3 回答
485 浏览

javascript - 传单点击事件无法仅收听地图图层

我的传单项目上有一些用户绘制的形状。单击形状时,另一个元素(例如侧边栏)将打印出统计信息。如果我单击地图图层,则该元素应该重置。

我尝试使用 map.on('click') 事件,但它会监听所有用户绘制的图层以及地图图层。我只想让事件听地图层。

我对事件进行了哪些更改,使其仅侦听地图图层。有没有更好的方法来解决这个问题?

0 投票
3 回答
1476 浏览

leaflet - Leaflet Draw on rectangle draw 它抛出错误

leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw在 Angular 应用程序中使用。

我已经尝试了一切,版本更改,导入模块.forRoot()而不是,在我的文件中添加 js 文件angular.json,删除 node_modules,重新安装它们,从头开始遵循@ngx-leaflet-draw 上的指南一百次。

无论我做什么,当我尝试绘制一个矩形时,它总是会抛出这个错误:

在此处输入图像描述

即使处理程序存在并且所有处理程序都可以正常工作,除了矩形一个(我唯一需要的)

在此处输入图像描述

如果不是为了这个,我什至不知道如何为您提供更具体的信息:

  • leaflet1.5.1
  • leaflet-draw1.0.4
  • @asymmetrik/ngx-leaflet6.0.1
  • @asymmetrik/ngx-leaflet-draw5.0.1

我被这个愚蠢的错误困住了,我不知道如何克服它。请帮忙!

这是演示的回购:https ://github.com/caiusCitiriga/leaflet-rect-drawer

0 投票
1 回答
216 浏览

leaflet - 绘制 Leaflet 层与加载 Leaflet 层时 Geojson 结构不同

我的 Web 应用程序让用户使用 Leaflet.Draw 控件绘制形状以及从 geojson 文件加载形状。但是,似乎这两种方法都会生成不同的 geojson 对象。

当我从 geojson 加载形状时。

当我用 Leaflet.Draw 绘制形状时

由于这两种形状都是 Leaflet geojson 形状,我希望它们具有相同的数据结构。因为绘制的形状和加载的形状具有不同的结构,所以我无法一致地对它们进行索引以获得我想要的属性。我的功能适用于一种形状,但不适用于另一种形状。

此外,我可以使用 Leaflet.draw 控件编辑绘制的图层,但不能编辑加载的图层。有没有办法为绘制和加载的形状标准化 geojson 结构?