react-leaflet-draw绘图工具栏显示错乱

最新推荐文章于 2024-08-08 08:08:53 发布
最新推荐文章于 2024-08-08 08:08:53 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： LeafLet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/naipeng/article/details/76550909
版权

1 问题描述

在使用react-leaflet-draw为地图增加绘制自定义图形功能时，发现对应的工具栏显示错乱，如下图
这里写图片描述

2 解决方法

上述问题的原因有两点：
1. 在index.html中未引入相应css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>

2.index.js对应的css文件中缺少对应样式

.sr-only {
    display: none;
  }

完成上述配置后，工具栏正确显示
这里写图片描述

龙虾天天
关注
专栏目录
111：vue+leaflet自定义绘制，画多边形、折线、圆形、marker、矩形
大剑师兰特的GIS世界
03-05 1172
第111个本示例的目的是介绍演示如何在vue+leaflet中自定义绘制工具，可以画多边形、折线、圆形、marker、矩形。
react-native-webview-leaflet:一个基于Webview的React Native的Leaflet组件
05-01
React Native Webview Leaflet V5 没有用于React Native应用程序的本机代码的Leaflet映射组件 为什么要使用这个图书馆 如果要在交互式地图上显示HTML元素，则此组件很有用。 由于元素是标准HTML项，因此它们可以是...
react-PixelArttoCSS是一个在线像素风绘图工具
08-15
Pixel Art to CSS是一个在线像素风绘图工具，使用 box-shadow 和 keyframes CSS 属性来实现，最终可以导出成CSS放到自己网站上
vue 项目中引入 leaflet.draw.js 报错
weixin_43055905的博客
09-19 1669
报错信息： ##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';...
探索 Leaflet.draw：地图绘制与编辑的强大工具
最新发布
gitblog_01056的博客
08-08 863
探索 Leaflet.draw：地图绘制与编辑的强大工具 Leaflet.drawVector drawing and editing plugin for Leaflet项目地址:https://gitcode.com/gh_mirrors/le/Leaflet.draw 在地理信息系统（GIS）和地图应用开发领域，Leaflet 是一个广受欢迎的轻量级 JavaScript 库。今天，我们要...
React-Canvas画图
weixin_45315794的博客
05-14 2905
react+Canvas 基本用法 html代码 {/* 拼图 */} <canvas width='300' // 可设置画布的大小 height='800' ref={(ref) => { this.canvasRef = ref; }} ></canvas> js代码 想要在canvas区域里画图， 第一步需要取得绘图上下文，而取得上下文对象的引用，需要调用getCont
leaflet.pm绘制工具
m0_46394444的博客
12-28 316
leaflet绘制工具
react-leaflet-distortable-imageoverlay:缩放、倾斜、旋转和平移图像叠加
08-05
React传单失真图像覆盖 在React中缩放、倾斜、旋转和平移图像叠加 支持拉伸、倾斜、扭曲、旋转、平移和透明的 react-leaflet ImageOverlay。... 组件本身没有工具栏或在编辑模式之间切换的能力，因此您
react-leaflet-custom-control:一个React-Leaflet组件，用于在传单的控制窗格中呈现React元素
05-01
yarn add @skyeer/react-leaflet-custom-control或npm install @skyeer/react-leaflet-custom-control 选项 position ：要安装到的窗格。 选项有topleft ， topright ， bottomleft ， bottomright className ：将...
react-leaflet-nmscale:React-Leaflet的海里刻度
04-10
React-Leaflet-NmScale React海里比例尺组件 安装 npm install @marfle/react-leaflet-nmscale 用法 进口： import { MapContainer , TileLayer } from 'react-leaflet' ; import { NmScale } from '@marfle/react...
rc-leaflet:Leaflet.js的React Map组件
05-02
Leaflet.js的React Map组件 更新日志 文件 特征 TypeScript支持 JSX对Popup ， Tooltip和DivIcon MassPoints支持，最大约150k点。 (v1.1.0+) ClusterPoints支持，最多约50k点。 (v1.1.0+) RCMap范围Theme...
leaflet js工具类(绘制点、线、面、文本、高亮、地图监听、地图加载)
09-13
leaflet工具类，绘制点、线、面、文本、高亮、地图监听、地图加载、事件机制
react-painter:基于 React Hooks + Canvas 的在线绘图APP
08-04
React-Painter 基于 React Hooks + Canvas 的画图编辑工具 启动 yarn install yarn start 视图效果
react-sketchpad, 用画布创建的绘图板.zip
09-17
react-sketchpad, 用画布创建的绘图板 sketchpad用画布创建的绘图板我为什么要这么做？学习学习学习好玩:？示例： 这个gif中使用了 web socket，它不是示例的一部分。 让它与同步工作，只运行这个 web socket服务器i
react-charts实现折线图、柱图等等各种图形
12-10
react-charts实现折线图、柱图、饼图等等各种图形，自定义数据，实现自己想要的效果
react-reactsparkline实现简单微线图sparklines的React组件
08-15
react-sparkline - 实现简单微线图(sparklines)的React组件
react canvas画图，支持拖拽(ctrl + 左键拖拽)
忧郁的兜兜的博客
12-04 1961
import React, {Component} from 'react'; import { Button, Modal, Menu, Dropdown, Form, Row, Col, Input, Radio } from 'antd'; import './config.css'; class WorkstationConfig extends Component { cons...
react-native-art-绘图入门
滴水可以穿石 百炼才能成钢，谋全局而通一域 致广大而尽精微
10-31 2533
本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample .a文件 定义 所谓静态链接是指把要调用的函数或者过程链接到可执行文件中，成为可执行文件的一部分。当多个程序都调用相同函数时，内存中就会存在这个函数的多个拷贝，这样就浪费了宝贵的内存资源。.so文件是共享库文件（动态链接）。动态链接所调用的函数代码并没有被
_LeafLet-draw1.0. 4@LeafLet-draw
oTianKongLan123的博客
12-11 546
后面到node_modules文件夹下看只有leaflet-draw文件夹,而引入是。所以另辟蹊径去网上搜索的下leaflet加载和leaflet-draw加载。按照推荐的方法运行发现没有这个包。只能全局改成试试发现可以运行了。运行之前的代码发现报错。
react-draft-wysiwyg添加自定义工具栏
05-31
要在 `react-draft-wysiwyg` 中添加自定义工具栏，你需要使用 `CustomOption` 组件。 首先，你需要定义一个 `CustomOption` 组件来渲染自定义工具栏，例如： ```jsx import React from 'react'; import PropTypes from 'prop-types'; const CustomOption = ({ onChange, editorState }) => ( <div onClick={() => onChange(RichUtils.toggleInlineStyle(editorState, 'CUSTOM_STYLE'))}> Custom Option </div> ); CustomOption.propTypes = { onChange: PropTypes.func.isRequired, editorState: PropTypes.object.isRequired, }; export default CustomOption; ``` 然后，在 `Editor` 组件中，你需要将 `CustomOption` 组件添加到 `toolbar` 中，例如： ```jsx import React, { useState } from 'react'; import { Editor, EditorState, RichUtils } from 'draft-js'; import { EditorToolbar } from 'react-draft-wysiwyg'; import CustomOption from './CustomOption'; const MyEditor = () => { const [editorState, setEditorState] = useState(EditorState.createEmpty()); const handleToolbarChange = (editorState) => { setEditorState(editorState); }; return ( <div> <EditorToolbar> <CustomOption onChange={handleToolbarChange} editorState={editorState} /> </EditorToolbar> <Editor editorState={editorState} onChange={setEditorState} /> </div> ); }; export default MyEditor; ``` 这样，你就可以在 `react-draft-wysiwyg` 的工具栏中添加自定义工具栏了！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值