问题标签 [maplibre-gl]

我正在学习反应。我想显示一个动态显示和隐藏标记的地图。这行得通。我使用Maplibre GL，它是Mapbox GL的一个分支，处理方式是相同的。

然而不幸的是，当标记改变时，地图会重新加载，因为在useEffect-Hook 中指定了依赖项。然而，没有它，标记不会改变。我无法访问 . 之外的地图（可变地图）useEffect。有什么可能性可以防止重新加载地图，而是动态调整标记。

这是我的代码：

我目前正在迈出使用maplibre和 react-map-gl 的第一步。

我已阅读有关如何使用 mapbox 的 fork 的文档。

我已经适应了webpack-config。我使用带有rewind的create-react-app项目。这是我的 config-overrides.js。

使用以下代码，我可以在几秒钟内看到 Maptiler 中的地图，该地图是通过 maplibre 加载的。

然后它消失了，我在浏览器的控制台中看到了这个错误消息。

如果我使用 line mapboxApiAccessToken="MapboxToken"，我可以毫无问题地使用 maptiler 地图。

但我不想再需要 mapbox 令牌了。我错过了什么？

我也在这里问过这个问题。

我正在寻找一种在我的反应原生应用程序中使用 OpenStreetMap 数据的方法。在我最后的研究中，我发现了 MapLibre，它是基于 MapBox GL 旧版本的免费选项。我面临的问题是，除了@react-native-mapbox-gl/maps之外，我无法在 React Native 中找到任何插件来使用它。因此，在他们的文档中说：“我们现在还支持 Mapbox SDK 的 MapLibre 风格”，但他们提出的示例如下：

需要有 MapBox GL 的访问令牌，并且没有 MapLibre 的描述，否则，如果有免费的瓷砖提供者，你可以告诉我，欢迎。

我正在通过内部 URI 添加来自多个数据集的 geojson 源。我的 addSources() 函数循环遍历ds_list，每次调用所需的 ID 数组。如果我在 map.addSource() 调用中获取每个数据集，这可以工作（示例 #1），但是我无法访问所有数据集的特征 ID，用于样式、交互等。

因此，我想将每个 geojson 对象作为变量获取，但在示例 #2 中，获取了第一个数据集并渲染了源/图层，但以下一个返回错误 There is already a source with this ID。问题是，在进行第二次 addSource() 调用时，ID (ds.label) 已更改，如 console.log() 所示

示例 #1

示例 #2

此渲染函数适用于示例 #1，并且永远不会在示例 #2 中为第二个数据集调用

渲染源层（）

数据集列表，供参考。用于此并生成选择下拉列表和 flyTo() 的边界：

我试图mouseover在地图上添加图像。我正在使用 Mapbox MapLibre GL。这是我到目前为止所做的。

当我尝试添加此代码时，它显示错误，

错误：同名的图像已存在。

和

未捕获（承诺）错误：无法加载图像，因为已经有一个具有此 ID 的源。请确保使用支持的图像类型，例如 PNG 或 JPEG。请注意，不支持 SVG。

如果有人可以帮助我如何从本地添加图像，那将非常有帮助。

我想用maplibre-gl-js加载一个本地 .mbtiles （带有矢量图块） （如果知道重要的话，在 Cordova 应用程序中）。据我了解，我应该使用addProtocol方法。当我得到我的console.log时效果很好，但我不知道如何加载瓷砖......

这是我的代码：

样式定义如下：

任何帮助/提示表示赞赏:)

如果您需要更多信息，请随时询问。

PS 我之前使用过 mapbox-gl-cordova-offline并试图了解这个插件如何加载瓷砖，但我还无法弄清楚。

我正在考虑使用 Amazon Location Service 作为我正在开发的 Web 应用程序的地图图块提供商。我已经能够使用 Cognito 未经身份验证的访问和 MapLibre GL JS 在一个小型的概念验证中实现这一点（但如果支持，计划转移到 OpenLayers）。

我对此的担忧是，任何使用该应用程序的人都可以从浏览器中提取身份池 ID，并使用它来代表我支付大笔账单！Web 应用程序不公开，用户通过专有数据库进行身份验证。我想只允许这些经过身份验证的用户能够检索地图图块。

使用 Cognito 开发人员身份验证的身份是否适合这种情况？还有其他建议来实现这一目标吗？

谢谢，约翰

我喜欢在我的 gatsby 网站上展示 maplibre 地图。我可以在 React 中做到这一点。

gatsby develop没有显示错误。但是我在运行时进入Firefox这个错误：

maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined

在 Chrome 中它看起来像这样：

这是我的依赖项package.json

这是我的组件 map.js

这就是我将它集成到我的页面中的方式。

gatsby build没有显示错误。但是在浏览器的开发者工具中我看到

系统：操作系统：Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa) CPU：(2) x64 Intel(R) Pentium(R) CPU 4417U @ 2.30GHz Shell：5.0.17 - /bin/bash 二进制文件：节点：14.16。 0 - ~/.nvm/versions/node/v14.16.0/bin/node 纱线：1.22.5 - /usr/bin/yarn npm：7.6.2 - ~/.nvm/versions/node/v14.16.0/bin /npm 语言：Python：2.7.18 - /usr/bin/python 浏览器：Chrome：92.0.4515.159 Firefox：91.0 npmPackages：gatsby：^3.13.0 => 3.13.0 gatsby-image：^3.11.0 => 3.11 .0 gatsby-plugin-feed: ^3.13.0 => 3.13.0 gatsby-plugin-layout: ^2.13.0 => 2.13.0 gatsby-plugin-local-search: ^2.0.1 => 2.0.1 gatsby -插件清单：^3.13.0 => 3.13.0 gatsby-plugin-react-helmet：^4.13.0 => 4.13.0 gatsby-plugin-sharp：^3.13.0 => 3.13.0 gatsby-remark-自动链接标题：^4.10.0 => 4.10.0 gatsby-remark-images：^5.10.0 => 5.10.0 gatsby-remark-prismjs：^5.10.0 => 5.10。0 gatsby-源文件系统：^3.13.0 => 3.13.0 gatsby-transformer-remark：^4.10.0 => 4.10.0 gatsby-transformer-sharp：^3.13.0 => 3.13.0 npmGlobalPackages：gatsby- cli: 3.13.0

因为我不确定是不是 Gatsby 的错误，所以我也在这里问了这个问题：https ://github.com/gatsbyjs/gatsby/discussions/33064

我们有 NextJS + TypeScript 设置，并正在寻找集成Maplibre，它基本上是 Mapbox BSD 的一个分支。还有一个很好的 Mapbox 包装器 - React Map GL，但它不是为与 Maplibre 一起使用而设计的。解决方法是在Webpack config中创建一个别名，如下所示：

我在 tsconfig.json 中也有这个：

问题是在 NextJS + TypeScript 设置中，由于某种原因，这没有效果。NextJS 中的某些内容会忽略下模块的别名，node_modules或者 TypeScript 优先于 webpack 配置的某些部分——目前尚不清楚。

有任何想法吗？

我在我的 react js 项目中添加了 maplibregl，但https://api.maptiler.com/tiles/v3/2/0/2.pbf?key=my-key 没有加载。