如何在没有npm和es6的情况下在deckgl on timer中使用FitBounds

Question

我在div-container中有一个deckGL地图。

let deckMap = new deck.DeckGL({
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',  
initialViewState: {..
},
layers: [geoJSONLayer],
getTooltip,
controller: true,
onViewStateChange: ({ viewState }) => {
console.log("View Change");
deckMap.setProps({ viewState })
}
});

那个东西"覆盖"了我的normal mapgl地图

const map = new mapboxgl.Map({
container: 'map',
interactive: false,
style: carto.basemaps.voyager,
center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
zoom: INITIAL_VIEW_STATE.zoom
});

我正在运行一个GeoJSON文件的循环下载，并希望显示数据。这已经起作用了。我也可以用bounds。extend来计算边界。但是我找不到一个方法来设置缩放/适合的界限。

What I've try

1. map.fitBounds不工作。它什么也不做
2. deckMap.fitBound=>未知的命令
3. WebMercatorViewport=>
4. viewport=info.context我可以设置viewport.fitBounds。问题:什么是信息?我在事件驱动方法中发现了这个例子，信息是用户与之交互的层。但简单地使用我的geoJSONLayer不工作;
5. 手动计算缩放。再也找不到算法了，但它是为GoogleEarth准备的，我想它一般是坏的。

我如何得到该死的fitBounds工作或-或者计算缩放为deckGL?我今天浪费了5个小时!

Answer 1

下面是deck的一个工作示例。glfitBounds在地图初始化。运行:

• 克隆此存储库;
• 进入存储库并运行npm i && npm start;
转到http://localhost:8080/，点击顶部的Toggle deck.gl mode按钮。这将加载一个桥牌。

这个要点帮助我工作:https://gist.github.com/tomsoderlund/a2040d659aafe4064e4060f561aca6d1

步骤:

• 如果其他人会发现这很有用，fit边界过程可以用一个事件开始。在这个问题的情况下，当成功获取新的geoJSON时。这也可以在用户单击auto-fit map to visible data按钮时触发，或者在上面的示例中，在甲板上触发。Gl初始化等

• 接下来，一个辅助函数被用来计算边界的对角，通过传递一个数组的点类型坐标的数据在你的地图上可见:

  fitBounds = (coords) => {
  let latMin = 90;
  let latMax = -90;
  let lonMin = 180;
  let lonMax = -180;
  coords.forEach(function (coord) {
  const RECT_LAT_INDEX = 'lat';
  const RECT_LON_INDEX = 'lon';
  if (coord[RECT_LAT_INDEX] < latMin) latMin = coord[RECT_LAT_INDEX];
  if (coord[RECT_LAT_INDEX] > latMax) latMax = coord[RECT_LAT_INDEX];
  if (coord[RECT_LON_INDEX] < lonMin) lonMin = coord[RECT_LON_INDEX];
  if (coord[RECT_LON_INDEX] > lonMax) lonMax = coord[RECT_LON_INDEX];
  });
  const bounds = [
  [lonMin, latMax],
  [lonMax, latMin],
  ];
  
  return bounds;
  }

• 创建一个WebMercatorViewport的实例，并传递与你的地图相同的高度和宽度参数;

const view = new WebMercatorViewport({ width: 800, height: 600 });

• 在WebMercatorViewport实例上调用fitBounds函数。响应将包含纬度、经度和缩放属性，所以我在下面解构了它们:

const { latitude, longitude, zoom } = view.fitBounds(bounds)

• 设置地图视图状态的纬度，经度，缩放属性:

const INITIAL_VIEW_STATE = {
latitude,
longitude,
zoom,
maxZoom: 20, 
pitch: 45,
bearing: 0,
};

• 地图可以被渲染如下:

return (
<DeckGL
layers={layers}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
>
<div style={COPYRIGHT_LICENSE_STYLE}>
{"© "}
<a
style={LINK_STYLE}
href="http://www.openstreetmap.org/copyright"
target="blank"
>
OpenStreetMap contributors
</a>
</div>
</DeckGL>
);

可以像下面这样添加填充，这样它就可以很好地适应你的地图，比如:

const { latitude, longitude, zoom } = new WebMercatorViewport({ width: 800, height: 600 }).fitBounds(bounds, { padding: { top: 100, bottom: 100, left: 100, right: 100 } })