_LeafLet-draw1.0. 4@LeafLet-draw

最新推荐文章于 2024-04-02 16:46:16 发布
最新推荐文章于 2024-04-02 16:46:16 发布
阅读量496 收藏 6
点赞数 7
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oTianKongLan123/article/details/134928533
版权

运行之前的代码发现报错

按照推荐的方法运行发现没有这个包

所以另辟蹊径去网上搜索的下leaflet加载和leaflet-draw加载

但是还是不行

后面到node_modules文件夹下看只有leaflet-draw文件夹,而引入是

import LeafletDraw from "_leaflet-draw@1.0.4@leaflet-draw";

只能全局改成试试发现可以运行了

  import LeafletDraw from "leaflet-draw";

是包名改了？坑啊

王者之座
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Leaflet-Draw小bug记录
s_9527_s的博客
05-12 362
最近项目有用到leaflet-draw插件，发现一个小问题，查看文档后发现文档也有相同的问题， Leaflet Draw | Mapbox.js | MapboxAdd drawing tools for users to author shapes using the Leaflet Draw plugin.https://docs.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/问题描述：如下图，1点击后鼠标不移动，2就会出现在页面左上角。（感觉这样不
vue 项目中引入 leaflet.draw.js 报错
weixin_43055905的博客
09-19 1636
报错信息： ##Leaflet 本身不支持点线面的绘制，需要引入插件 leaflet.draw.js github 下载地址 ：https://github.com/Leaflet/Leaflet.draw 在搭建好vue项目基础上，执行命令 main.js文件 import '_leaflet-draw@1.0.4@leaflet-draw/dist/leaflet.draw.css';...
react-leaflet-draw绘图工具栏显示错乱
每天写一点，进步一点点
08-01 3422
1 问题描述在使用react-leaflet-draw为地图增加绘制自定义图形功能时，发现对应的工具栏显示错乱，如下图 < map>组件文件对应源码如下：import React , { Component} from 'react' import { Map, TileLayer, Circle,FeatureGroup } from 'react-leaflet' import { Ed
记录一次leaflet的问题，leaflet版本导致editable异常，修改过程中又遇到Tile错乱
qq_41049150的博客
02-22 666
记录一次leaflet的问题，leaflet多引用导致editable异常，修改过程中又遇到Tile错乱欢迎使用Markdown编辑器问题起因求索过程解决过程解决Tile错乱解决！！ 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 问题起因 要做一个框选要素的功能，框选用了leafleat.editable插件。然后实现了demo，运用到项目上后，插
解决使用leaflet里L.supermap为underfind 的报错信息
m0_61607317的博客
03-23 1275
由于引用了 @supermap/iclient-leaflet 和 leaflet 正常直接install都会直接下载最新版本 最新版本由于改版 L更轻量了 里面没有supermap属性 不可以直接加载wmts格式。通过打印，发现承载于leaflet的L 里面根本就没有supermap这个属性 找了好久的文档 都找不到方法 最后终于找到原因 写下来造福人民！由于我要加载WMTS瓦片服务 加载的api为 new L.supermap.WMTSLayer（url,options）但是加载时一直报错。
《Leaflet 进阶知识点》- Leaflet.draw 中英文转换
前端技术
08-16 2584
官方说明 leaflet.draw-cn.js 文件 L.drawLocal = { draw: { toolbar: { // #TODO: this should be reorganized where actions are nested in actions // ex: actions.undo or actions.cancel actions: { title: '取消绘图',//'Cancel drawing', text: '',//'Ca
leaflet-draw:学习传单绘制插件
08-04
4. **几何对象**：Leaflet.Draw支持多种几何对象，如Marker（标记）、Polyline（线）、Polygon（多边形）、Circle（圆）和CircleMarker（圆形标记），满足不同应用场景的需求。 5. **样式自定义**：用户可以通过...
ngx-leaflet-draw-源码.rar
10-10
这个源码压缩包 `ngx-leaflet-draw-源码.zip` 包含了实现这个功能的所有源代码，这对于想要深入理解其工作原理或者想要对其进行自定义开发的开发者来说非常有价值。 Leaflet 是一个轻量级的JavaScript地图库，它...
前端项目-leaflet.draw.zip
09-03
在压缩包"Leaflet.draw-master"中，通常会包含以下内容： - `src/`目录：存放插件的主要源代码，包括JavaScript文件和CSS文件。 - `dist/`目录：包含编译后的可直接使用的JS和CSS文件，适用于快速引入到项目中。 - ...
Leaflet.draw-develop.zip
09-15
如果已经下载了"Leaflet.draw-develop.zip"压缩包，解压后会得到`dist`目录，其中包含`leaflet.draw.css`和`leaflet.draw.js`。在HTML文件中链接这两个文件，并确保先加载Leaflet库，再加载Leaflet.draw。 ```html ...
Leaflet.draw-master.zip
10-29
《Leaflet.draw与GIS地图开发详解》 在GIS（地理信息系统）领域，Leaflet.js是一个广泛应用的开源库，用于创建交互式的二维地图。而Leaflet.draw则是Leaflet库的一个扩展，它提供了一套完整的工具集，允许用户在...
VUE2 项目 引入 leaflet.draw全过程
weixin_30342827的博客
04-25 5630
leaflet.draw的参考文档：http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html 这个网址不稳定，多刷新几遍就出来了 leaflet.draw源码：https://github.com/Leaflet/Leaflet.draw 首先确保你已经创建好一个VUE项目了，并且已经安装好淘宝镜像了，并且之前也...
leaflet知识点：leaflet.draw的使用指南
最新发布
GTraveler
04-02 1249
ps: 如果发现draw:drawstart一直不触发，查看一下L.Draw.Event.DRAWSTART是不是在enable()方法执行之前监听的。插件推荐使用L.Draw.Event.EVENTNAME常数，也可以直接使用draw:eventname。Draw.SimpleShape继承Draw.Feature。Draw.Circle继承Draw.SimpleShape。Draw.Polyline继承Draw.Feature。Draw.Marker继承Draw.Feature。
leaflet: Cannot read property geodesicArea of undefined
小武的博客
06-11 479
1. 报错如下图所示:（这是绘制多边形中出的问题） 2. 这是leaflet-draw版本不一样导致，重新下载一个leaflet-draw版本即可， 本文用的版本是 ： "leaflet-draw": "^1.0.4", "node_modules/leaflet-draw/dist/leaflet.draw.js", 3. 下载的命令如下： npm install leaflet-draw 4. 这样重新运行就可以了 ...
leaflet使用draw插件测量距离和面积
qq_34736893的博客
02-01 2238
leaflet使用插件测量距离和面积
vue使用leaflet的draw插件绘制电子围栏
浅浅记录一下前端开发常见问题和解决方案
08-23 1096
leftelt，vue3，电子围栏，
Leaflet：封装 leaflet 绘制点和区域
icemwj的博客
10-29 1623
封装 leaflet 绘制点和区域
Leaflet中使用draw绘制时获取图形的几何信息
BADAO_LIUMANG_QIZHI的博客
04-07 2336
场景 Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124009721 上面在使用draw进行绘制几何图形的基础上，怎样在绘制结束后获取图形的几何信息。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、
angular + leaflet + leaflet-draw
weixin_42104521的博客
10-22 860
版本信息 angular: 9.1.9 leaflet: 1.6.0 leaflet-draw:1.0.4 项目背景 目前在做气象方面项目，有一个需求是动态改变地图上面的polygon的形状及大小。 备注 本博客代码路径:https://github.com/xiaowuler/leaflet.git 编码过程 1、加载地图 initMap(): void { // 创建初始地图（以安徽省地图为例） this.map = L.map('map', { ...
引入了leaflet 和leaflet-draw.js就可以直接用Leaflet.toolbar了吗
06-13
不可以。虽然 Leaflet.toolbar 插件可以和 Leaflet 和 Leaflet.draw 插件一起使用，但是它们之间并没有直接的依赖关系。因此，在使用 Leaflet.toolbar 之前，你需要先确保已经成功引入了 Leaflet 和 Leaflet.draw 插件，并且它们都已经正确地初始化了。 具体来说，你需要在 HTML 文件中引入 Leaflet 和 Leaflet.draw 插件的 JavaScript 文件： ```html <!-- Leaflet CSS --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha384-y0eCkQI3nOJ9yLjQ1IYbQ1zJmGDDG2J8K7iZI7wF6cCgR0n7jCfz3lXuZ3mr8tG6" crossorigin="anonymous"> <!-- Leaflet JavaScript --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha384-9xj8XQeFJgYD2Qd7Jl9KdQn5mUd/K1qQwHq2+Q9XGkKm2Vwdjz6pCtz+Yxwa8g1y" crossorigin="anonymous"></script> <!-- Leaflet.draw CSS --> <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" /> <!-- Leaflet.draw JavaScript --> <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script> ``` 然后，你需要在 JavaScript 代码中创建地图对象和编辑工具栏对象： ```javascript // 创建地图对象 var map = L.map('map').setView([51.505, -0.09], 13); // 添加 Leaflet 图层 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, }).addTo(map); // 创建编辑工具栏对象 var toolbar = L.toolbar().addTo(map); ``` 最后，你可以通过向 `toolbar` 对象添加按钮来创建自定义的编辑工具栏。需要注意的是，在使用 Leaflet.toolbar 插件时，你需要使用 jQuery 库来操作 DOM 元素，所以你还需要在 HTML 文件中引入 jQuery 库： ```html <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> ``` 引入这些文件后，你就可以开始使用 Leaflet.toolbar 插件来创建自定义的编辑工具栏了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值