Leaflet Draw spritesheet 图标问题 - 缺失且未对齐

2024-03-15

我已将传单绘制纳入我的一个项目中。我的问题是图标没有显示在工具栏中。它看起来像这样:

环顾四周我发现THIS https://github.com/Leaflet/Leaflet.draw/issues/617发布并按照其说明进行操作。我在 Leaflet Draw 文件夹中找到了 spritesheet,并像 htis 一样链接到它:

    .leaflet-draw-toolbar a {
            background-image: url('E:/MappingProject/Leaflet.Draw/src/images/spritesheet.png');
            background-repeat: no-repeat;
        }  

我最终得到了这个:

我似乎找不到任何其他解决方案来使这个精灵表在框中对齐。看起来不是拉出单独的图标,而是将整个工作表放入每个按钮中。

这是我实例化 L.FeatureGroup() 和 L.Control.Draw() 的代码:

    function logIn(){
        map = L.map('map').setView([51.505, -0.09], 13);
        OpenStreetMap_HOT.addTo(map);
        $("#logInScreen").css('display', 'none');
        addSideBars();
        addDrawToMap();
    }        

/////////////////////////////////////////////
        //DRAW FUNCTIONALITY
///////////////////////////////////////////
        function addDrawToMap(){
            map.addControl(drawControl);
            map.addLayer(drawnItems);
        }
        var drawnItems = new L.FeatureGroup();
            var drawControl = new L.Control.Draw({
                position: 'topright',
                draw: {
                    polyline: true,
                    polygon: true,
                    circle: true,
                    marker: true
                },
                edit: {
                    featureGroup: drawnItems,
                    remove: true
                }
            });

有人有这方面的经验吗?


您很可能会错过传单绘制 CSS 文件 https://github.com/Leaflet/Leaflet.draw/blob/v1.0.2/src/leaflet.draw.css.

CSS 规则就在该文件中.leaflet-draw-toolbar a被定义。

没有此文件但使用 CSS 规则的示例:

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
  position: 'topright'
});
map.addControl(drawControl);
.leaflet-draw-toolbar a {
  background-image: url('https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/images/spritesheet.png');
  background-repeat: no-repeat;
  color: transparent !important;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.draw-src.js"></script>

<div id="map" style="height: 200px"></div>

此文件的示例:

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
  position: 'topright'
});
map.addControl(drawControl);
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.draw-src.css" />
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.draw-src.js"></script>

<div id="map" style="height: 200px"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Leaflet Draw spritesheet 图标问题 - 缺失且未对齐 的相关文章

  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • 样式 ::-webkit-scrollbar-track 不起作用

    我正在尝试设置滚动条轨道的样式 每当我设计曲目时 div webkit scrollbar track background color blue 没有什么变化 每当我设置滚动条样式时 div webkit scrollbar backgr
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • 在 Google 地图上绘制线条/路径

    我很长一段时间都在忙于寻找如何在 HelloMapView 中的地图上的两个 GPS 点之间画一条线 但没有运气 谁能告诉我该怎么做 假设我使用扩展 MapView 的 HelloMapView 我需要使用叠加层吗 如果是这样 我是否必须重

随机推荐

  • 如何更改 Vista Home Premium 中任何文件的“修改日期”? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 在 Windows Vista 中 如何更改任何文件 文本 二进制 的 修改日期 而不进行编辑 我的意思是只改变它的一些属性 在 Win XP 中 如
  • 如何向反应式表单(Angular 2)添加撤消按钮?

    我使用 Angular 2 中提供的反应式表单技术构建了一个表单 该表单有许多不同类型的控件 现在我需要为其添加一个撤消按钮 我已经能够使用以下命令设置基本的撤消按钮click and change事件 当有人单击表单控件时 我会保存以前的
  • data.frame 中列的基于时间的平均(滑动窗口)

    我有一个包含多列的 data frame 其中一列是时间 因此是非递减的 其余列包含在 data frame 的某一行中指定的时间给定的时间记录的观察结果 我想选择一个时间窗口 比如 x 秒 并计算该窗口同一 data frame 中其他一
  • 将 Instagram 图像拉至我的应用程序 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在开发适用于 iPad 的 iOS 应用程序 您可以在其中从卷中导入照片来个性化茶杯 我很想添加 Instagram 这样用户就可以添
  • Python3 + PyGobject + GTK3 和 cx_freeze 缺少 DLL

    当我使用 py python3 pygobject gtk3 应用程序制作 exe 时从 pygobject 站点来看 它缺少一些 DLL 文件 缺少什么文件 我已经手动尝试过需要哪些 DLL 因此 如果这对某人有帮助 the 必须进行编辑
  • 如何将嵌套 Java Collection 中的所有项目展平到单个列表中?

    给定一个复杂的嵌套对象集合 例如 Set
  • WPF 同一系列的多个字体文件

    我有以下字体文件 MyFont Regular tff MyFont Bold tff MyFont Italic tff 我该如何使用它们 我可以做以下事情
  • 显示精灵的另一个实例

    是否可以显示精灵的另一个实例 我想做的是反射动画精灵 到目前为止 我得到的是我的 Sprite 称为 canvas 它内部有使用 AS3 进行动画处理的内容 我想要做的是显示它翻转的副本 在它下面看起来像倒影 我尝试了以下代码 但没有运气
  • 类库(传统便携式)?

    我有一台装有 Microsoft Visual Studio Community 2017 的电脑 版本 15 2 它有一个类库 便携式 的项目模板 另一台版本为 15 3 1 的 PC 有一个类库模板 Legacy Portable PC
  • 请解释如何使用CheckBoxTableCell

    我想了解更多有关如何实际使用或子类化 如果需要 CheckBoxTableCell 的信息 在一种特定情况下 我想使用此类 其中复选框不绑定到基础数据模型属性 假设我有一个名为 选择 的列 其中包含复选框 该列或多或少充当该行的视觉标记 用
  • 亚马逊s3上传多个文件android

    如果有人仍在寻找解决方案 我最终会在代码上使用循环 但我没有找到官方 api 来执行多个文件上传 我有一个 ImageFiles 的 ArrayList 我想将其上传到 Amazon s3 他们的文档提供了以下代码 credentials
  • 通过距离和摩擦力计算速度

    我正在用 Javascript Canvas HTML5 编写一个游戏 我刚刚发现了一个与高等数学相关的大问题 该游戏是平面 2D 游戏 因此您可以从另一个角度看世界 这意味着没有重力 只有摩擦力 CODE var friction 0 9
  • 当没有导航栏时,如何在 EKEventeditViewController 中获得“完成”或“后退”按钮?

    我的 iOS 应用程序中有一个日历事件列表 单击时将在 EKEventViewController 中打开 这是我的代码 void tableView UITableView tableView didSelectRowAtIndexPat
  • 如何在表格行上使用slideDown(或show)函数?

    我正在尝试向表中添加一行并将该行滑入视图中 但是 Slidedown 函数似乎向表行添加了 display block 样式 这会弄乱布局 有什么想法可以解决这个问题吗 这是代码 get some url val1 id function
  • 在 Promise catch 中重新抛出错误

    我在教程中找到了以下代码 promise then function result some code catch function error throw error 我有点困惑 catch 调用有什么作用吗 在我看来 它没有任何效果 因
  • Windows 搜索 sql - 无法访问 System.Search.QueryFocusedSummary

    我正在尝试使用 sql 查询 Windows Search 4 0 该物业 我感兴趣的是 System Search QueryFocusedSummary 我正在尝试从 SystemIndex 读取此属性 我收到 列不存在 错误消息 我能
  • 安装nvm后无法卸载全局npm包

    我发现了与此问题相关的几个线程 但似乎没有一个专门处理我的案例 并且我无法使用我找到的建议来解决 当我跑步时npm uninstall g some package 它只是返回 up to date in 043s 全球一揽子计划仍然存在
  • cakephp 3.x 保存多个实体 - newEntities

    我在保存多条记录方面遇到了最困难的时期 我已经尝试了一百万次 但最终遇到了同样的问题 我的记录没有保存 而且我看不到任何错误 请记住 我是 cakephp 的新手 也是一名新手编码员 我是否遗漏了一些明显且关键的东西 Table this
  • Google 在 React 中使用 firebase 登录 chrome 扩展

    使用 Firebase 进行 Google 登录 并使用 React 创建的 Chrome 扩展程序 我已经使用设置了 oauthGoogleConsole并能够使用 chrome 扩展程序成功登录 chrome identity getA
  • Leaflet Draw spritesheet 图标问题 - 缺失且未对齐

    我已将传单绘制纳入我的一个项目中 我的问题是图标没有显示在工具栏中 它看起来像这样 环顾四周我发现THIS https github com Leaflet Leaflet draw issues 617发布并按照其说明进行操作 我在 Le