问题标签 [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 回答
491 浏览

geojson - Mapbox GL JS - 过滤标记分析

我是 Mapbox GL JS 的新手,我很喜欢它!我在过滤 GeoJson 源上的标记时遇到了几件事,我想知道是否有人可以帮助我解决...这是我的过滤逻辑示例:

这是我的问题:

  1. 应用我的过滤器后,有没有办法获取与过滤器匹配的标记计数(您的搜索返回 {X} 个项目)?
  2. 当我使用 geojsonExtent 来获取标记集合的边界时,它似乎没有考虑到过滤器。有没有办法获取过滤器后面的数据以传递给geojsonExtent?

关于去哪里购买这些物品有什么建议吗?

0 投票
2 回答
2224 浏览

google-chrome - 如何让 mapbox-gl-js webgl/opengl 在 ubuntu chrome 上工作?

我们在这里尝试 mapbox-gl 页面:https ://www.mapbox.com/blog/data-driven-styling/

我们看在此处输入图像描述

这是 Chrome 版本:

这是 linux ubuntu 版本:

这是一个web-gl问题吗?我们的代码问题?mapbox-gl-js 库问题?

它适用于 Firefox :)

0 投票
1 回答
5256 浏览

opengl-es - Mapbox Web GL JS - 带有矢量平铺源的 querySourceFeatures() 函数

我在 Mapbox 上有一个矢量瓦片集,它是通过上传包含代表澳大利亚维多利亚州特定郊区的多边形的 geojson 文件创建的。我的矢量瓦片集具有三个属性 - 郊区、州、邮政编码 - 对应于 geojson 中的特征属性。

我还可以通过 Mapbox web gl js 库成功查询这些属性以获取准确的地图。例如,当我单击突出显示的多边形时,我有一个显示弹出窗口的地图,并且弹出窗口正确显示了该郊区的属性(郊区、州、邮政编码)。

现在我想在我的网页中访问这些属性 - 对于我的图块集中的每个功能。我基本上想将这些属性作为列表转储到地图外的 div 中;只是列出每个郊区及其属性。为此,我尝试使用 MapBox Web GL JS 库的 querySourceFeatures 函数。我有点挣扎。

这是我的代码。我的地图按预期显示。但是在 JS 控制台中,我只是得到一个空数组。

这是我的代码

doco 有点轻,所以我不知道我是否正确使用了 querySourceFeatures 函数。我是一个完全的 JS 菜鸟,如果它完全简单的话,我很抱歉。

在我的 Firefox 控制台中,我只得到一个长度为零的数组。不知道从这里去哪里。

我正在使用 mapbox web gl js 库的 v0.18.0。

0 投票
1 回答
356 浏览

mapbox-gl-js - 如何覆盖 mapbox-gl-js 中的处理程序?

Mapbox-gl-js 有“处理程序” - https://www.mapbox.com/mapbox-gl-js/api/#Handlers

如何覆盖处理程序,例如 ScrollZoomHandler?

我想重写 ScrollZoomHandler _onWheel 方法以调整鼠标位置以补偿 CSS 转换的地图容器。

https://github.com/mapbox/mapbox-gl-js/blob/d6c34c81f7b0d6e77f1b25c2c080a3c5afba94ab/js/ui/handler/scroll_zoom.js

0 投票
1 回答
319 浏览

mapbox-gl-js - Mapbox-gl-js - 将 CSS 转换应用于地图后鼠标事件关闭

我正在使用 mapbox-gl-js 在响应式容器内显示地图。

无论响应容器的大小如何,我都希望地图保持相同的分辨率,以便调整窗口大小不会影响地图的边界或缩放级别,它只是像静态图像一样缩放地图。

我通过动态计算比例因子并通过 CSS 转换将其应用于容器来实现这一点:

这在视觉上达到了预期的效果。例如,我可以在 500x500 的容器内显示 1280x1280 的地图。

问题是所有鼠标事件现在都“关闭”了。例如,如果您尝试单击地图或滚动缩放,地图会将您的鼠标事件应用到地图的错误区域。

如何补偿我的 CSS 转换,以便鼠标事件准确反映用户点击的位置?

0 投票
1 回答
284 浏览

mapbox-gl-js - 是否有可能在标记的“属性”中为标记提供一个 ID 或类别,然后在点击功能中使用此 ID/类别?

0 投票
1 回答
589 浏览

javascript - Tippecanoe Mapbox GL JS

我有一些带有数百万点的geoJSON,我使用tippecanoe 将其转换为mbtiles。我将此 mbtiles 文件上传到 mapbox,将图块添加到样式中,然后我可以使用 mapbox gl JS 查看我的数据。如何设置点的样式,使它们显示为具有某些颜色的点。我将标记颜色和标记符号添加到 geoJSON,然后如果我 console.log 一个单击的功能,我就可以看到这些。但是,这些都不起作用。对于形状,我只想要简单的圆圈,这是默认设置。但我需要根据 geoJSON 中设置的值自定义这些圆圈的颜色。

0 投票
2 回答
3040 浏览

mapbox-gl - Mapbox GL JS,添加自定义标记

我正在寻找一种方法,可以让我像Mapbox JS这样为我的地图创建一个简单的自定义标记。

深入浏览了网络,似乎没有明显或直接的方法来实现这一目标。我猜这是一个被错过的功能。

尝试了几次Mapbox Studio,但仍然没有运气,因为很难理解如何上传自定义 SVG 并能够引用它们。

举个例子,我创建了一个自定义地图,Mapbox Studio据我所知,没有可以使用的图标。确实尝试寻找一种称为精灵表的东西,但是由于我从未使用过这种方法,所以我不知道该怎么做。

我想这很重要,不仅对我来说,而且对很多刚开始学习新东西的人来说,就像Mapbox GL JS附上一个很好的指南一样。

所以这是我的一些关于创建一些自定义标记的代码

您可以猜到,我的地图没有显示任何图标。

任何人都可以提出一种良好且易于理解的方法来实现对地图库至关重要的事情吗?

0 投票
2 回答
1159 浏览

mapbox-gl - Mapbox GL 矢量瓦片 + 动态属性

我有一个地图应用程序,它使用 Mapbox.com 提供英国邮政编码边界的矢量图块。边界文件很大,不适合使用 TopoJSON 之类的文件下载。这很好用。

我还使用数据驱动样式来格式化地图的外观。我现在想在共享边界数据之上显示用户特定数据。据我所知,我需要提供从用户数据生成的单个矢量切片,而不是将他们的数据投影到现有的切片获取的矢量数据上。我无法在 Mapbox 中为所有用户创建唯一的矢量切片集。

当只有属性发生变化时,重新获取几何信息似乎浪费了带宽,是否有可能以某种方式将会话特定的一组属性“投影”到获取的数据上?

0 投票
1 回答
1169 浏览

mapbox-gl-js - Check if map is ready to queryRenderedFeatures

Its not clear to me how I can check if map has completed rendering. The above code will give error while still rendering the map.

enter image description here