在不裁剪的情况下减小 Mapbox 地图大小答案

【问题标题】：Reduce Mapbox map size without cropping在不裁剪的情况下减小 Mapbox 地图大小
【发布时间】：2018-04-28 18:28:19
【问题描述】：

我想让我的 Mapbox 地图内容始终完全可见，无论容器大小如何。但是当地图非常小时，地图就会被裁剪。

这是我所拥有的https://codepen.io/eddydg/pen/BmReEm的示例

当您减小页面宽度时，它也会减小地图容器高度以保持其大小比例。但地图不会进一步缩小以保持所有图层可见。

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [0, 0],
    zoom: 0
});

window.addEventListener('resize', () => {
  map.zoomTo(0);
});

body {
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
}

.column {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  border: thin black solid;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 400px;
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 30vw; /* 100% */
  max-width: 100%;
  max-height: 100%;
  background-color: teal;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<script src="https://www.mapbox.com/help/data/codepen-token.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js"></script>

<div class="content">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column">
    <div class="map-wrapper">
      <div id='map'></div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html5-canvas mapbox mapbox-gl-js

【解决方案1】：

我认为您的问题是，为了调整地图的大小以使所有内容都以所讨论的微小尺寸显示，它必须缩小到缩放级别 0 以上。这是不可能的。可能你可以使用 CSS 破解一些东西，用像素比率或其他东西缩放实际渲染的地图。

【讨论】：

我尝试在 CSS 中使用transform: scale(0.5) 进行缩放，但随后地图完全偏移：鼠标位置与下方的功能不匹配。也许缩放需要直接在画布中完成，但canvas.getContext('experimental-webgl') 似乎没有简单的 scale() 方法。
是的，这并不让我感到惊讶。可能需要相当多的黑客攻击才能使某些东西可行。

【解决方案2】：

更新：这似乎已在 Mapbox GL js v1.6.0-beta.1 中得到修复

实际上this seems to be a bug 发生在视口小于 512 像素时。它很旧，仍然没有修复。因此，作为一种解决方法，我最终在地图上使用了翻转效果：

鼠标移出地图：增加地图大小（>=512px 以查看整个地图）并scale 使用 CSS 将其恢复为原始大小。您将看到整个地图（无论其大小），但所有交互都会发生变化。
将鼠标悬停在地图上：回到原始大小和scale(1)，这样地图将被裁剪，但您将能够与它正确交互。

【讨论】：