可以在传单地图中设置 MBTiles 样式吗?

2024-01-02

我正在尝试显示 .mbtiles 图层(由蒂佩卡诺 https://github.com/mapbox/tippecanoe)在传单地图中。瓷砖上装有Leaflet.TileLayer.MBTiles https://gitlab.com/IvanSanchez/Leaflet.TileLayer.MBTiles。到目前为止,地图上看不到任何东西,尽管 MBTiles 加载良好并且可以在浏览器的检查器控制台中识别。我猜测,因为我没有使用 MapBox Studio(或类似的)对 MBTiles 进行外部样式设置,所以它们没有分配任何样式(颜色、大小等...)。

是否可以使用 CSS、JS 或 html 中的其他方式设置 .mbtiles 的样式?我发现 .mbtiles 通常有一个关联的 style.json 文件——是否可以编写我自己的文件并在 html 或 javascript 中调用该文件以实现 Leaflet?

这是我的代码的相关部分:

var map = L.map('map', {layers: [ESRIOceanBaseMap]}).setView([33.985, -120.25], 12);
var mb = L.tileLayer.mbTiles('https://raw.githubusercontent.com/evantdailey/map_testing/master/2016668FA.mbtiles', {
    type: 'circle',
    minZoom: 0,
    maxZoom:25
}).addTo(map);

我希望在 CSS 中做这样的事情(似乎不起作用):

#mb {
    color: black
}

如果以上都不可行,是否有其他方法可以为 Leaflet 设置 MBTiles 样式,而无需通过 MapBox Studio 并为每个图层分配样式?目标是以编程方式创建多个层(每个层包含数千个点),因此单独设计和导出每个层并不理想。


MBTiles https://github.com/mapbox/mbtiles-spec格式可用于vector or raster数据。对于由 Tippecanoe 创建的 MBTiles 集,它包含vector data.

尽管可能没有明确编写,但 Leaflet.TileLayer.MBTiles 插件仅处理raster瓷砖(PNG 或 JPG)(截至今天)。

渲染vector数据(使您能够在运行时设置其样式),您应该看看Leaflet.VectorGrid https://github.com/Leaflet/Leaflet.VectorGrid插入。不幸的是,它目前不能与矢量 MBTiles 设置一起开箱即用。

如果您有兴趣,可以看看https://github.com/Leaflet/Leaflet.VectorGrid/issues/54 https://github.com/Leaflet/Leaflet.VectorGrid/issues/54

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

可以在传单地图中设置 MBTiles 样式吗? 的相关文章

  • 每n秒执行一次函数

    我制作了这个在 10 秒后点击链接的代码片段 function timeout window setTimeout function img left click 1000 setTimeout timeout 1000 timeout 我
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • 节点 sass 无效 CSS

    node sass 是否支持 use 由于我收到此错误 SassError t family fonts 之后的 CSS 无效 预期的表达式 例如 1px 粗体 为 roboto 这是 Nav scss 的代码 nav width 100
  • 在 UIWebView 中禁用复制和粘贴

    几乎 我已经尝试了一切方法来禁用复制 粘贴UIWebView但对我来说没有任何作用 我正在加载我的UIWebView来自字符串 字符串数组 如下所示 webView loadHTMLString NSString stringWithFor
  • 什么可能导致 Firefox 中出现此 HTML/CSS 渲染问题?

    款式 h2 color 71D0FF font size 11px font weight bold margin 0px 0px 5px 0px a box color FFFFFF important cursor pointer di
  • 对使用“new”创建的数组上“map”的行为感到困惑[重复]

    这个问题在这里已经有答案了 我对结果感到困惑mapping 使用创建的数组new function returnsFourteen return 14 var a new Array 4 gt undefined x 4 in Chrome
  • 如何绕过Access-Control-Allow-Origin?

    我正在一个平台上对我自己的服务器进行ajax调用 他们设置了阻止这些ajax调用的平台 但我需要它从我的服务器获取数据以显示从我的服务器数据库检索到的数据 我的 ajax 脚本正在运行 它可以将数据发送到我的服务器的 php 脚本以允许其处
  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能
  • 在 Chrome 开发者工具中禁用调试器语句

    我正在尝试对恶意 JavaScript 进行逆向工程 当我最初加载侧面时 会注入 JS 代码 其中包括 debugger 语句并将断点注入我的 chrome 开发人员控制台 通过stackoverflow阅读 禁用所有断点does not帮
  • ES6 静态方法引用 self? [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository
  • 悬停 CSS 仅适用于 Chrome

    嘿 我正在尝试使用 CSS 悬停类 它在 Chrome 上运行良好 但在 Firefox 上运行不佳 任何帮助表示赞赏 这是我的 CSS albumbox labeltext visibility hidden albumbox hover
  • 居中

    我的问题 http i56 tinypic com ff3jmo png http i56 tinypic com ff3jmo png 项目符号点未对齐 我要做的只是 text align center ing ul 所在的类 我可以对齐
  • 如何在 Javascript 中连接 C# ActiveX 事件处理程序

    我尝试使用几个代码片段将 ActiveX 对象与 Javascript 事件处理程序挂钩 我无法确定为什么事件处理程序没有被调用 带有项目的 Github 存储库 https github com JesseKPhillips Csharp
  • 此版本的 CLI 仅与 Angular 版本 5.0.0 或更高版本兼容错误

    我已经有 Angular 项目在 4 版本中运行 在安装新项目时 不幸的是我安装了 6 版本的 Angular cli 在以 4 版本运行的旧项目中运行 ngserve 命令时 这会引发错误 您的全局 Angular CLI 版本大于本地版
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • 根据文本内容从 jquery 对象中过滤元素

    我正在尝试使用contains带有 this 关键字 但它给出了错误 JS function var check ul find li filter function return this contains two css color r
  • 如何使用 jQuery 过滤 DropDownList 中的选项

    我有 2 个 DropDownList 第一个 DropDownList 有 4 个选项 第二个 DropDownList 有 20 个选项 我想要一个选项value 1在第一个 DropDownList 中选择我在第二个 DropDown
  • ‘state’未定义 no-undef

    我使用教程来学习 React 但我很快就陷入困境 在教程中 他们使用以下代码 import React Component from react class Counter extends Component state count 0 r
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • 使用
    元素作为 JavaScript 代码的输入。这是最好的方法吗?

    各位 显然 我是编码新手 所以最近完成了一些有关 HTML 和 Javascript 的 Lynda 课程后 我的简单 HTML 页面遇到了困难 基本上 我想要的是使用 JavaScript 进行基本计算 让用户使用 HTML 输入两个数字

随机推荐

  • 使用 imap 和 php 检索最近 3 封电子邮件

    我试图弄清楚如何使用 imap 和 php 获取最新的 3 封电子邮件 已看到和未看到 由于邮箱内有 1 000 封电子邮件 因此需要节约资源 我认为获取所有标头可能需要太多资源 我只需要发件人 主题和日期 任何想法 感谢您的任何建议 帮助
  • iPhone 上的日期字符串中的毫秒数应使用什么格式字符串?

    我需要解析包含毫秒的格式的字符串 我应该使用什么格式字符串来获取正确的日期值 例如 假设我有一个具有以下值的字符串 2011 06 23T13 13 00 000 在以下代码中我应将什么格式字符串传递给 NSDateFormatter NS
  • VB.NET 中标识符两边的方括号代表什么?

    一般来说 我对 VB 和 NET 非常熟悉 但我刚刚遇到了这段代码 Me GetType 周围括号的用途是什么GetType 方括号用于告诉编译器应该将其解释为类型 即使它是关键字 但你的例子应该是一样的Me GetType 例如 您可以将
  • 良好的 DRY 方法来渲染和 AJAX 更新页面

    想象一下一个评论网站 用户可以在其中输入评级和可选的简短评论 在每个评论页面上 您都会收到许多评论 这些评论显示在页面末尾的表格中 顺便说一句 不寻找数据网格类型控件 太简单了 我想让用户输入新评论并更新页面而无需刷新页面 到目前为止都是简
  • MEF 和 ASP.NET MVC

    我想将 MEF 与 asp net mvc 一起使用 我写了以下控制器工厂 public class MefControllerFactory DefaultControllerFactory private CompositionCont
  • 如何检测在CustomList中单击了哪个按钮以及在哪个位置

    我正在使用自定义列表视图 其中每个项目都有两个按钮 以下是我的项目 xml
  • 导出 JSON 数据并加载到关系数据库中

    是否有将 JSON 数据转换为具有多个表的关系数据库的标准方法 我们需要从 MongoDB 实例导出数据并将其导入 Redshift 集群 唯一的问题是一些 MongoDB 字段包含对象和数组 Redshift 集群接受 CSV 因此我认为
  • 从登录页面删除导航菜单

    有基本的 html admin layout html 我写的 div div div div 有兴趣知道如何从登录页面删除管理导航 尝试设置变量隐藏菜单登录控件并用 ng if hide menu 隐藏它 但这对我不起作用 它隐藏所有管理
  • Appium 错误 Xcode 找不到与“com.facebook.WebDriverAgentRunner”匹配的配置文件

    我在真实 iOS 设备上执行自动化时遇到问题 系统配置 应用程序1 6 0 设备 iPhone 5c ios 10 1 代码8 2 例外是 Xcode Testing failed No profiles for com facebook
  • Chrome 控制台日志看不到 AJAX post/get 请求/响应

    我不知道它是否来自 Chrome 最近的更新之一 我不知道它是否是我在不知不觉中设法关闭的选项 但无论哪种方式 在过去几天的某个时候 我在 Chrome 上的控制台日志停止显示发布 获取请求 因此我可以看到正在发布的内容以及发回的响应内容
  • 多个RecyclerView同步滚动

    我有一个 ViewPager 每页显示一个片段 该片段包含 RecyclerView 内的项目列表 项目列表始终具有相同的大小 并且项目的视图也具有相同的高度 当滚动其中一个 RecyclerView 时 我希望其他 RecyclerVie
  • 如何调用函数的 AWS Lambda 权限列表

    要允许 AWS 服务调用 lambda 函数 您需要应用权限 这json对于此权限可能看起来有点像这样 FunctionName someFunction StatementId 1 Action lambda InvokeFunction
  • 使用 CSS 更改 SVG spritesheet sprite 的颜色

    我使用 SVG spritesheet 作为图标 我想对 hover active 进行颜色更改 我发现 更改 SVG 颜色的唯一方法是 SVG 数据是否内联 有一个很好的脚本可以将外部 svg 转换为内联 SVG 代码 如何使用 CSS
  • PHP:如何在foreach循环内移动数组指针?

    animals array cat dog horse elephant foreach animals as animal var dump animal next animals 上面的代码输出 cat dog horse elepha
  • Phonegap 数据库错误

    我正在尝试为我的电话间隙应用程序建立一个数据库 问题是除了设置表的事务之外的所有事务都会产生错误 SQLTransactionCallback 为空或引发异常 这是代码 function Datasetup db window openDa
  • 登录控制器中覆盖的经过身份验证的方法不起作用

    我试图覆盖登录控制器中的经过身份验证的方法 但不知何故它不起作用 我只是尝试简单地 dd 但仍然不起作用 下面是我的功能代码 public function authenticated Request request user dd hi
  • 未找到元素“ ”的声明

    我是使用 XML 和 XSD 文件的新手 我想做的是使用模式验证 xml 文件 这是我的 XML 文件的开头
  • 为什么C++中静态变量需要声明两次

    我有一个名为文件路径 h它定义了许多静态变量 ifndef FILEPATHS H define FILEPATHS H class FilePaths public static QString dataFolder static QSt
  • Oracle 中的 VARCHAR(MAX) 与 VARCHAR(n)

    Similar question https stackoverflow com questions 166371 varcharmax versus varcharn in ms sql server closed 但对于甲骨文来说 为什
  • 可以在传单地图中设置 MBTiles 样式吗?

    我正在尝试显示 mbtiles 图层 由蒂佩卡诺 https github com mapbox tippecanoe 在传单地图中 瓷砖上装有Leaflet TileLayer MBTiles https gitlab com IvanS