问题标签 [mapbox-gl-js]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1693 浏览

javascript - mapbox GL 图层有问题

所以,我试图从 mapbox GL 中加载的样式图中获取样式层,但它一直返回未定义的元素。我已经走投无路了。

我正在尝试将底层水层存储在 layers 变量中,以便我可以更改其属性。例如,它的可见性。

这是代码:

PS - 多年后我将重返编码领域。我刚刚又刷了一遍我的js。

PPS:如果您关心,这是整个代码:

0 投票
2 回答
1391 浏览

javascript - 从多个 React 组件访问对象

我有一个MapboxMapReact 组件,它初始化并渲染 Mapbox 地图(在mapconst 下),并且需要在MapMarker其中渲染组件。

MapboxMap看起来像:

这是MapMarker看起来的样子。

如何构建我的两个组件,以便我可以map从两个组件访问,但专门在组件内部呈现地图MapboxMap

0 投票
1 回答
2223 浏览

leaflet - 找不到我的 Mapbox 样式地图的 Mapbox 矢量平铺 URL

有谁知道如何获取 Mapbox 矢量瓦片地图的 URL(又名“样式”)?我只能得到一个看起来像这样的样式地址:mapbox://styles/myusername/r3411y10ngh4sh3tc3tc,但我使用的插件需要一个 URL 来将 Mapbox 的矢量瓷砖与 Leaflet 集成:https ://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/docs /配置.md

我尝试用 Mapbox 提供的样式地址替换 URL

但我收到一个错误,它无法将样式地址作为 URL 读取。有什么建议么?我应该使用不同的插件吗?


更新

简而言之,Mapbox 样式的 URL 尚不可用。这是我从 Mapbox 收到的回复:

Leaflet 尚不兼容 Mapbox Studio 中制作的样式,因为这些样式需要基于 GL 的渲染器。我们目前正在开发一个新的 API,以允许您将 Studio 风格与 Leaflet 一起使用,我们预计它将在几周内推出。

此时,您可以使用 Mapbox GL JS 加载您的 Mapbox Studio 样式。您仍然可以访问栅格地图 ID(使用 Mapbox 编辑器、Mapbox Studio Classic 制作的地图)以使用 Leaflet 加载 - 这些位于 Studio 仪表板的“经典”选项卡下。

0 投票
1 回答
91 浏览

javascript - 无法让 mapbox onsubmit 显示标记

嘿伙计们,我正在尝试让一个按钮提交一个点以显示在 mapbox 地图上。我无法在正确的范围内获取点击处理程序。

现在我像这样定义我的 js 来显示地图并定义处理程序:

在 HTML 中,我有一个表单:

无论我做什么,我都无法定义 mboxsubmit。我尝试将容器用作封闭范围,但这也不起作用。有人知道怎么做吗?

0 投票
0 回答
1784 浏览

node.js - Rendering Vector Tiles Mapbox GL

I want to use Mapbox GL to render vector tiles that I am generating from PostGIS requests. I have built a tile server using Mapnik, sphericalmecator, and pg plugins for npm. I added the tile endpoint to the stylesheet for Mapbox GL, and have confirmed that the correct tiles are requested, but the tiles are not rendered on the map. I used the same backend for a leaflet plugin and it works correctly, so I'm not sure I have to change the backend. Any advice is appreciated. Code is below.

This is the index.html file that I am loading.

This is the routes that the map is calling.

Please ask any other questions you might have.

0 投票
0 回答
338 浏览

javascript - 使用 mapbox 切换、隐藏、切换层传单类似于手风琴

如何将该地图框图例转换为类似手风琴的结构,以便在单击父图层名称时,子图层名称以缩进形式显示在其下方。我在下面发布了当前标准结构的链接https://www.mapbox.com/mapbox.js/example/v1.0.0/wms/但是我希望我的看起来更像这样http://jsfiddle.net /La77L8L9/3/。不同之处在于我的图层信息来自数据库我目前正在通过在我的 javascript 中创建一个元素 a 作为具有图层名称的可点击链接来添加我的图层,当点击该链接时,将显示相应的地图。我在下面放置了一个片段,说明我当前如何在从数据库中检索图层名称后附加图层名称,请不要让菜单 ui 包含基本地图的名称。

我假设也许有一种方法可以给每个元素一个 ID 并使用 .clicked 来执行从可见到假的显示,尽管在使用数据库检索图层名称时动态执行这有点棘手。我的数据库具有图层 ID,如果该特定图层是父图层的子图层,则该图层和 parentLayerID 是否存在。

0 投票
1 回答
2371 浏览

marker - 在 mapbox-gl-js 中获取标记符号的坐标并以它为中心

我在地图上有这个符号

我想放大这个标记并以它为中心。

到目前为止,我已经尝试过:

我省略了坐标参数,所以我直接引用它(如 API 中所述)。但是,“功能”空无一物,我永远无法飞行

0 投票
8 回答
29251 浏览

javascript - Mapbox GL JS 与 Mapbox.js

来自 Mapbox 词汇表,Mapbox.js

Mapbox.js 是一个 JavaScript 库,允许您将交互式地图添加到您的网站。它是 Leaflet 的插件,是一个免费使用的开源库。

Mapbox GL JS

Mapbox GL JS 是一个使用 Mapbox GL 渲染交互式地图的 JavaScript 库。这是一个免费使用的开源库。您可以将 Mapbox 样式或使用 Mapbox Studio 创建的自定义样式添加到您的 Mapbox GL JS 应用程序。

这个答案

Mapbox 样式用于 Mapbox GL 以及原生 iOS 和 Android SDK。您不能将它们与经典的 Mapbox JS 一起使用。Mapbox JS 支持光栅图块,你不能设置它们的样式。它们只是图像。Mapbox GL 和本机 SDK 的(可以)使用矢量图块,这些是可设置样式的。

我相信我可以用作和来源mapbox.js的替代品,但我可以用 做同样的事情吗?这两个库之间还存在哪些其他差异?leaflet cssjsmapbox-gl.js

0 投票
2 回答
1974 浏览

mapbox - 使用 MapBox GL 的数据驱动地图(带底图和快速的等值线)

tl;dr 版本:我们如何使用 MapBox GL 构建快速的等值线地图?

@RyanBaumann 发布了一个示例:参见https://ryanbaumann.squarespace.com/blog/2016/1/23/mapbox-gl-create-data-driven-styles

但是这个例子显示了直接在 javascript 中加载 GeoJSON 文件。关于如何处理大型 GeoJSON 文件的一个问题。假设您有一个 18M GeoJSON 文件。并且您想查看地图和数据驱动样式并高效地完成这一切。

例如,我加载了一个大的 GeoJSON 文件:

https://cityregister.firebaseapp.com/recentsaleslocal.geojson

在此地图框样式中:

https://api.mapbox.com/styles/v1/fedex1/cijrx09ej007o90lx1g1m5b0j.html?title=true&access_token=pk.eyJ1IjoiZmVkZXgxIiwiYSI6ImNpam5jZXZvczAwZnd0b201ajhybXE0OW8ifQ.IumX7VWjU#71UjEsKTN0406w/71UjEsKTN04b

它会立即加载,并且不会在加载时通​​过网络传输整个 18M。

但是当我使用 Ryan 展示的方法时,似乎我必须在加载时通​​过网络加载整个 18M 文件。这要慢得多,尤其是在慢速网络上。

我想知道有没有办法让数据驱动的样式和来自 mapbox 的底图都在同一张地图上?

这里有一些例子:

https://cityregister.firebaseapp.com/map.html(立即加载,有底图,全部驻留在 mapbox studio 服务器上。没有数据驱动的风格

https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html(加载速度很慢,有底图,mapbox 上的底图,另一台服务器上的 geojson。使用数据驱动风格 https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html(立即加载,没有底图,似乎都是 mapbox-gl 生成的,使用数据驱动的风格。

我的问题是如何获得 mapbox 的速度和数据驱动的样式以及带有街道的基本地图等。

谢谢。

上面的地图图片。

快速的纽约地图,但不是数据驱动的

快速的纽约地图,但不是数据驱动的


快速的纽约 choropleth 但没有底图

快速的纽约 choropleth 但没有底图


慢 choropleth 通过网络加载 18M

慢 choropleth 通过网络加载 18M


0 投票
1 回答
1710 浏览

javascript - 在 Mapbox 中搜索国家

我有一个国家列表,我正在尝试将地图居中并调整缩放级别以在地图中显示整个国家。

使用地理编码 API https://api.mapbox.com/geocoding/v5/{dataset}/{query}.json?country={cc}&access_token=<your access token>,我可以获得一些不在国家中心的坐标,但至少我获得了相关坐标,但是,返回的对象不包含有关缩放级别的任何信息。

我错过了什么?我应该使用不同的 API 吗?还是我正在寻找的东西不受支持?