mapbox-gl-js 相关问题

一个WebGL JavaScript交互式地图库，可以渲染Mapbox Vector Tiles。

我正在尝试为一个图层设置一个过滤器表达式，其中所有要素在其属性中都有一个名为“iri”的字符串类型字段。表达式应该是一个简单的相等匹配，ho...

javascript maps mapbox mapbox-gl-js

回答 1 投票 0

我有一个html标记，我想在里面有一个按钮，来删除这个标记 const PoiHtml = (poi: 兴趣点) => `${poi.name} 删除&... 我有一个 html 标记，我想在里面有一个按钮，来删除这个标记 const PoiHtml = (poi: PointOfInterest) => `<h3>${poi.name}</h3> <button>delete</button>` const source = map.getSource(`marker-${poi.id}`) as any; source.setData({ 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'properties': { 'description': PoiHtml(poi), 'icon': 'theatre' } } ] }); 如何获取点击删除按钮的事件？有不同的方法可以实现此目的，但最简单的方法可能是使用 HTML onclick 事件。您只需修改字符串即可添加带有事件处理程序值的 PoiHtml 属性。我创建了一个关于如何将事件添加到标记弹出窗口的快速小提琴。每次单击按钮时，控制台都会通过事件记录onclick相关代码如下： "deleted"

reactjs mapbox-gl-js

回答 1 投票 0

MapBox - 如何在列表中选择地址后在 div 中显示纬度和经度坐标

我在我的应用程序上使用 MapBox，我想知道在从 div 内显示的列表中选择地址后如何在 div 元素内显示 lat 和 lng？我的参考是这个

javascript mapbox-gl-js

回答 1 投票 0

倾斜后悬停时突出显示填充挤出特征？

我想将鼠标悬停在填充挤出功能上时突出显示它们。与此相关的样式使用表达式和功能状态是直接的，但我在检索正确的

mapbox mapbox-gl-js mapbox-gl

回答 2 投票 0

将鼠标悬停在地图框中的路线上时无法显示弹出窗口

我在地图框中有一个自定义行，当您单击它时会显示一个弹出窗口，我怎样才能使其仅在您将鼠标悬停时才显示？我从“点击”更改为“鼠标输入”，但它确实......

javascript mapbox mapbox-gl-js

回答 1 投票 0

Mapbox GL JS v2.0 在 geojson 源上出现填充层“闪烁”问题

我在使用 Mapbox GL JS v2 时遇到问题。我有一个 geojson 数据集，大部分可以在地图中正确渲染，但某些功能无法使用“填充”图层样式正确渲染。 ...

javascript mapbox polygon geojson mapbox-gl-js

回答 1 投票 0

Mapbox fitbounds() - 无效的 LngLat 对象：(NaN, NaN)

过去几个小时我一直用头撞桌子。我试图让 Mapbox 放大所有标记的边界区域的负载。然而，这是我遇到的错误...

mapbox mapbox-gl-js mapbox-gl

回答 6 投票 0

使用 MapBox 和 Scrollama 创建“粘性”地图

我正在尝试使用 MapBox 和 Scrollama 创建一个“粘性”地图。具体来说，我希望能够按照以下顺序向下滚动：简介：叙述性内容动态 MapBox 地图

scroll mapbox-gl-js sticky

回答 1 投票 0

MapboxGL 无法在 NodeJS 生产环境中工作，但可以在开发环境中工作

我在index.js中有这个部分：我在index.js中有此部分： <ReactMapGL ref={this.map} className={classes.root} {...viewport} width="100%" height="100%" scrollZoom={isExpanded ? true : false} touchAction={isExpanded ? 'pan' : 'pan-y'} mapStyle={this.getMapStyle(homicides)} interactiveLayerIds={["homicides"]} getCursor={this.getCursor} onClick={this.handleClick} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN} onViewportChange={onViewportChange} > 我的.env文件有这个： REACT_APP_MAPBOX_API_ACCESS_TOKEN=pk.my-big-long-mapbox-api-token 当我在运行 Arch Linux 的本地计算机上运行 npm start 时，它会打开我的网络浏览器并导航到 http://localhost:3000/，我可以看到地图。但后来我将项目移至远程 Arch Linux 服务器。在远程服务器上，我运行 npm run build，然后运行 serve -s build，它告诉我转到 http://my-server-ip-address:3000。我去了那里，但是地图没有显示。在我的浏览器的开发控制台中，我看到了这个错误： Uncaught Error: An API access token is required to use Mapbox GL. See https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes at e.RequestManager._makeAPIURL (mapbox.js:214:23) at e.RequestManager.normalizeSourceURL (mapbox.js:104:21) at R (load_tilejson.js:38:71) at Se.load (vector_tile_source.js:110:33) at Se.onAdd (vector_tile_source.js:146:14) at Jt.addSource (style.js:753:50) at Jt._load (style.js:311:18) at style.js:278:18 我已经跑了npm update。这些 StackOverflow 问题的解决方案都没有帮助我：如何解决使用 Mapbox GL JS 需要有效的 Mapbox 访问令牌？错误：使用 Mapbox GL 需要 API 访问令牌我还尝试将 {process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN} 替换为实际的 API 令牌字符串。当我运行 npm start 时，它可以在我的本地计算机上运行，但当我运行相同的命令时，它不能在我的远程服务器上运行。当我运行 npm start 并转到 http://my-server-ip-address:3000 时，地图也不起作用。更新在我的开发环境中——我的个人电脑，安装了 nginx——我运行 npm run build 并将浏览器导航到 http://localhost/my-project/build/。页面加载后，我可以使用 Ctrl+Shift+C 打开浏览器的开发人员工具控制台，导航到“网络”部分，然后看到此 GET 请求：https://api.mapbox.com/v4/mapbox.mapbox-streets-v7.json?secure&access_token=MAPBOX_API_ACCESS_TOKEN。但是当我在项目目录中运行 npm run build，然后将浏览器导航到 http://my-server-ip-address/my-project/build 时，我在浏览器的开发控制台中看不到任何此类 GET 请求。我看到的唯一与 Mapbox 相关的 GET 请求是这个：https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js。我的发展package.json有"react-map-gl": "^4.1.16"。在生产中，是高于 7.0 的版本。我在生产服务器中删除了 package-lock.json，然后重新运行 npm install 和 npm run build。

node.js mapbox mapbox-gl-js mapbox-gl react-map-gl

回答 1 投票 0

如何强制react-map-gl地图在道具更改时重新渲染

我在我的项目中使用了react-map-gl地图组件。我通过 props props.displayUploadedFiles 传入，这是一个 GeoJSON 对象数组。我想使用react-m在我的地图上显示这些GeoJSON对象...

reactjs react-hooks mapbox-gl-js react-map-gl

回答 1 投票 0

带有地形层的MapLibre GL JS：如何将水平面固定到特定高度？

我基于maplibre.org上的“添加3D模型”示例编写了一些代码，以便在使用setTerrain添加地形层的地图上仅绘制水平面。我的目的是画一个

three.js mapbox-gl-js terrain maplibre-gl

回答 1 投票 0

网页上的Mapbox样式

我正在尝试更改地图的位置/样式。但是，我只能从页面或表格的左上角定位它。有没有办法调整我的网页地图的位置，使其成为...