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 图标问题 - 缺失且未对齐 的相关文章

  • CSS隐藏滚动条,但元素可滚动

    我有一个名为 items 的元素 元素内的内容更长 比元素高度 我想让它可滚动但隐藏滚动条 我该怎么做呢 div class left side div class items style display block width 94 ma
  • 从第三方网站为 iframe 设置 CSS

    我正在尝试设计风格snapwidget Instagram feed http snapwidget com getstarted 我想让边框变成白色 这不是小部件的设置 所以我尝试添加 css 看来我的 css 没有被检测到 因为内容位于
  • iPad 上的 ios11 iphone 应用程序图标丢失

    我有一个仅限 iPhone 的应用程序 但它也可以在 iPad 上以兼容模式运行 毫不奇怪 但是当我更新了ios11的应用程序后 iPad上的应用程序图标丢失了 这是我尝试过的 在iPhone模拟器上启动 出现图标 在 iPad 模拟器上启
  • 如何限制 Chrome 中的最大文本区域宽度和高度或如何禁用文本区域调整大小

    Chrome 允许通过在右下角添加文本区域来调整文本区域的大小 但有时这种移动可能会破坏页面的设计 所以我想知道如何限制该操作的最大和最小宽度 即如何完全禁用该功能和thml javascript css在页面上 您可以使用 resize
  • 我可以为CSS写一个循环吗

    我有一个场景 我得到像这样生成的 ID div class containerLength div div div div div div div div div 等等 有没有办法我可以编写一些CSS来通过循环来定位它们 也许像 new i
  • 如何获得浮动:右键垂直居中对齐

    我只是无法获得课程按钮align right垂直居中对齐 HTML div class panel footer span style width 100 class header footer item span div
  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c
  • 使用 css 变换在其父对象的宽度上对对象进行动画处理

    我正在尝试使用 css 转换来转换 100 宽度包装器内元素的位置来提高动画性能 因此 它从左侧进入屏幕并从右侧退出 然后重复动画 我想我可以在这个动画中使用百分比 我发现翻译与您正在制作动画的对象相关 因此 如果您有一个 100px 宽的
  • minmax 失败(属性值无效)

    Chrome 给出了invalid property value并且不尊重CSS grid template columns repeat auto fill minmax auto 1fr 当auto被替换为min content and
  • 如何使用 javascript 将我的域名字母大写?

    假设我的域名是www hello com 如何使用 jQuery JavaScript 使浏览器的 URL 栏看起来像 www HELLO com 您无法更改浏览器地址栏中显示的内容 这是一项基本的安全功能 您可以使您的域名全部大写 并将页
  • 在闪亮的应用程序中使用传单地图作为过滤器

    是否可以使用传单地图来过滤闪亮应用程序中的数据 就像在 Tableau 或 Power BI 中一样 方法是单击地图上的某个状态 然后根据条件过滤另一个图表或表格选择 None
  • Django - 渲染到字符串无法加载 CSS

    我正在尝试使用 Django 1 8 render to string 通过管理命令将 html 转换为 pdf 而不是使用 View request 以下代码可以将模板转换为 pdf 但它无法将 CSS 加载到模板中 def html t
  • 向 jQuery 函数 Interval 添加动画

    我的问题是如何向倒计时器添加一些动画 我的意思是每次调用 Function Interval 时都需要添加一些动画 如下所示 youtube 视频链接 https www youtube com watch v A9fnvhcWPRo 第二
  • jQuery hide() 动画向右滑动

    使用 jQuery 的hide 使用可选的持续时间参数的函数 我可以在我的网站上获得一些警报框 以优雅地滑出屏幕并消失 隐藏动画的默认方向似乎是向左滑动 尽管此行为未在hide 定义页 http api jquery com hide 我需
  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100
  • 是否有一个看起来像“钥匙”图标的 Unicode 字形? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 Unicode 有一百万个类似图标的字形 但它们并不总是很容易搜索 因为我并不总是知道它们是什么样子 是否有一个看起来像 钥匙 的 Unicode 字
  • Bootstrap 3 在移动设备上滑入菜单/导航栏 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我正在构建一个基于浏览器的移动应用程序 我决定使用 Bootstrap 3 作为设计的 CSS 框架 Bootstrap
  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px
  • 将自定义 CSS 添加到使用 Compass 生成的精灵中

    我有这个代码my images scss file icon layout smart icon sprite dimensions true import icon png include all icon sprites 输出是这样的
  • 可以在 IE 中的表格行上添加渐变吗?

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code

随机推荐

  • 如何更改 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