mapbox-gl-js 相关问题

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

Mapbox 不适合它的容器。为什么不呢？这是渲染后的 html： Mapbox 不适合它的容器。为什么不呢？这是渲染后的html： <div class="map mapboxgl-map" id="mapBox"> <div class="mapboxgl-canvas-container"> <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277"> </canvas> </div> </div> 那些 277px 我猜是默认值。这是js： mapboxgl.accessToken = 'blabla'; var map = new mapboxgl.Map({ container: 'mapBox', style: 'mapbox://styles/mapbox/streets-v11', center: [-77.04, 38.907], zoom: 11.15 }); 这是scss： .map { grid-column: 1/-1; height: 100%; position: relative; canvas, .mapboxgl-canvas { height: 100%; } } 如果我将著名的 !important 添加到 height: 100%; 那么它可以工作，但地图会被拉伸。我该怎么做？我找到了窍门。只需添加 map.on('load', function () { map.resize(); }); 到 js，这样地图就会根据其容器调整大小经过几个小时的尝试找到解决方案并在 SO 上尝试解决方案后，我终于明白了如何使 Mapbox 适合其容器。要使 mapbox 适合其容器，而不需要设置绝对高度，它必须是父 div 的直接第一个子级。 Mapbox 不能是第二个、第三个或第四个孩子等。为什么？我的猜测是 mapbox-gl.css 与自定义 CSS 规则发生冲突。这每次都有效： <section class="map_box_container">  <div id='map'></div> </section> 这永远行不通： <section class="map_box_container"> <div class="second_child">  <div id='map'></div> </div> </section> CSS .map_box_container{ position: relative; height: 100% !important; width: 100% !important; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } 2021 年更新我在一个新项目中使用mapbox，据我了解，mapbox 不需要其父容器具有任何CSS 才能工作。 HTML <section class="map_box_container">  <div id='map'></div> </section> CSS #map { position: absolute; top: 0; bottom: 0; width: 100%; } 这对我有用，并且在调整大小之前您不会像在接受的答案中那样看到明显的滞后： document.addEventListener("DOMContentLoaded", () => map.resize()); 将其添加到你的CSS中 .mapboxgl-map { position: absolute; top: 0; bottom: 0; width: 100%; } 和 { position: relative } 到其父 div 这个对我有用。虽然需要一段时间才能生效，但这是值得的。 map.on('load', function() { $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); map.resize(); }); 没有绝对定位的纯 CSS 解决方案。新方法：添加到你的包装纸中： aspect-ratio: 1 / 1; 如果您想要一个矩形，请使用该值（例如：.9）。旧方法：每个父级的高度必须大于 0。请检查您的开发检查器。对于每个渲染高度为 0 的容器添加 height: 100%;。然后为您的地图包装器添加这两个 CSS 声明： height: 100%; max-height: 500px; 将 500 更改为在您的媒体查询中有效的任何内容，您应该会很好。 const [viewport, setViewport] = useState({ width: '100%', height: 'calc(100vh - 162px)', // 162px is size height of all elements at the top of the map latitude: 0, longitude: 0, zoom: 12, bearing: 0, pitch: 0, transitionDuration: 2000, transitionInterpolator: new FlyToInterpolator(), }); 2022 1- 更新您的地图脚本添加 map.resize() <script> map.on("load", () => {map.resize() </script> 2- 更新您的 html 添加 tailwind class="aspect-square w-full h-full" 或添加 style="aspect-ratio: 1 / 1": <div id="map" class="aspect-square w-full h-full" style="aspect-ratio: 1 / 1;" > </div> 对于使用react-map的人（也许还有其他人），这是我解决问题的方法： <div className="flex flex-col min-h-screen" /> <h1> Hey!</h1> <Map style={{ width: '100vw', height: 'inherit', flexGrow: 1 }} /> </div> 对我来说，关键是通过将其设置为继承来杀死 Mapbox 中的 height: 100%。注意：我使用的是 Tailwind。我发现的唯一可靠的方法是使用 jQuery。就我而言，地图位于页面加载时不活动的选项卡中，因此我在切换到保存地图的选项卡时执行代码。 var $ = window["$"]; $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); 编辑：这可行，但地图看起来很丑而且像素化。我可能会回到 Google 地图。

jquery sass responsive-design css-grid mapbox-gl-js

回答 10 投票 0

React-map-gl（GeoJSON 地图示例）：地图中的数据未通过控制面板（年份滑块）更新

我正在尝试从这里实现 GeoJSON 示例：https://uber.github.io/react-map-gl/#/Examples/geo 但是当我尝试逐年更改年份滑块时，数据和数据层仍然是

reactjs d3.js mapbox mapbox-gl-js react-map-gl

回答 1 投票 0

“错误：已经存在具有此 ID 的源（匿名函数）”是什么意思？（反应，MapboxGL）

我有一个小地图应用程序。当用户单击搜索按钮时，我希望地图放大到地图上的特定区域并出现一个框。我收到错误消息说已经有一个 sou...

javascript reactjs error-handling mapbox mapbox-gl-js

回答 2 投票 0

Mapbox GL JS 多层性能

我正在使用mapbox-gl-js创建一个应用程序，它有很多层。用户可以选择显示/隐藏这些层。就性能而言，（1）一次创建所有图层并显示/...