如何使用deck.gl缩放到弧的边界？

Question

我使用deck.gl 创建了一些弧线。当您单击不同的点/多边形时，国家之间会出现不同的弧线。执行此操作时，我希望地图缩放到这些弧的边界。

为清楚起见，这里是一个示例：单击 Glasgow 时，我想放大到显示的弧线（尽可能紧密）：

看来，使用 WebMercatorViewport，您可以调用 fitBounds （见：https://deck.gl/docs/api-reference/core/web-mercator-viewport#webmercatorviewport）

不过，我不清楚它是如何使用的。我试图找到例子，但没有找到。我怎样才能将它添加到我拥有的东西中？

这是弧的代码：

    fetch('countries.json')
    .then(res => res.json())
    .then(data => {

      console.log('data',data)

      const inFlowColors = [
        [0, 55, 255]
      ];

      const outFlowColors = [
        [255, 200, 0]
      ];

      const countyLayer = new deck.GeoJsonLayer({
        id: 'geojson',
        data: data,
        stroked: true,
        filled: true,
        autoHighlight: true,
        lineWidthScale: 20,
        lineWidthMinPixels: 1,
        pointRadiusMinPixels: 10,
        opacity:.5,
        getFillColor: () => [0, 0, 0],
        getLineColor: () => [0,0,0],
        getLineWidth: 1,
        onClick: info => updateLayers(info.object),
        pickable: true
      });

      const deckgl = new deck.DeckGL({
        mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
        mapStyle: 'mapbox://styles/mapbox/light-v9',
        initialViewState: {
          longitude: -19.903283,
          latitude: 36.371449,
          zoom: 1.5,
          maxZoom: 15,
          pitch: 0,
          bearing: 0
        },
        controller: true,
        layers: []
      });

      updateLayers(
        data.features.find(f => f.properties.name == 'United States' )
      );

      function updateLayers(selectedFeature) {
        const {exports, centroid, top_exports, export_value} = selectedFeature.properties;

        const arcs = Object.keys(exports).map(toId => {
          const f = data.features[toId];
          return {
            source: centroid,
            target: f.properties.centroid,
            value: exports[toId],
            top_exports: top_exports[toId],
            export_value: export_value[toId]
          };
        });

        arcs.forEach(a => {
          a.vol = a.value;
        });

        const arcLayer = new deck.ArcLayer({
          id: 'arc',
          data: arcs,
          getSourcePosition: d => d.source,
          getTargetPosition: d => d.target,
          getSourceColor: d => [0, 55, 255],
          getTargetColor: d => [255, 200, 0],
          getHeight: 0,
          getWidth: d => d.vol
        });

        deckgl.setProps({
          layers: [countyLayer, arcLayer]
        });

      }

    });

这是一个 Plunker： https://plnkr.co/edit/4L7HUYuQFM19m9rI

Answer 1

我尝试让它变得简单，从使用 ReactJs 的原始实现开始，然后尝试转换为 vanilla。

在 ReactJS 中我会做类似的事情。

从react-map-gl 导入LinearInterpolator 和WebMercatorViewport：

import {LinearInterpolator, WebMercatorViewport} from 'react-map-gl';

然后我为视口定义一个useEffect：

const [viewport, setViewport] = useState({
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11,
    bearing: 0,
    pitch: 0
});

然后我将定义一个层来显示：

const layerGeoJson = new GeoJsonLayer({
    id: 'geojson',
    data: someData,
    ...
    pickable: true,
    onClick: onClickGeoJson,
    });

现在我们需要定义onClickGeoJson：

const onClickGeoJson = useCallback((event) => {
    const feature = event.features[0];
    const [minLng, minLat, maxLng, maxLat] = bbox(feature); // Turf.js
    const viewportWebMercator = new WebMercatorViewport(viewport);
    const {longitude, latitude, zoom} = viewport.fitBounds([[minLng, minLat], [maxLng, maxLat]], {
        padding: 20
    });
    viewportWebMercator = {
        ...viewport,
        longitude,
        latitude,
        zoom,
        transitionInterpolator: new LinearInterpolator({
            around: [event.offsetCenter.x, event.offsetCenter.y]
        }),
        transitionDuration: 1500,
    };
    setViewport(viewportWebMercator);
}, []);

第一个问题：通过这种方式，我们在单击的点或多边形上进行拟合，但您想要的是拟合弧。我认为克服此类问题的唯一方法是在多边形内添加关于弧线边界的参考。您可以预先计算每个特征的边界并将它们存储在您的 geojson 中（单击的元素），或者您可以仅在 feature.properties 中存储一个引用以指向另一个对象，您可以在其中定义边界（您也可以即时计算它们）。

const dataWithComputeBounds = { 
   'firstPoint': bounds_arc_computed,
   'secondPoint': bounds_arc_computed,
   ....
}

bounds_arc_computed 需要是一个对象

bounds_arc_computed = {
    minLng, minLat, maxLng, maxLat,
}

然后onClick函数就拿参考

   const { minLng, minLat, maxLng, maxLat} = dataWithComputedBounds[event.features[0].properties.reference];
   const viewportWebMercator = new WebMercatorViewport(viewport);
   ...

现在只需定义我们的主要元素：

return (
    <DeckGL
        layers={[layerGeoJson]}
        initialViewState={INITIAL_VIEW_STATE}
        controller
    >
        <StaticMap
            reuseMaps
            mapStyle={mapStyle}
            preventStyleDiffing
            mapboxApiAccessToken={YOUR_TOKEN}
        />
    </DeckGL>
);

此时我们已经非常接近您已经链接的内容 (https://codepen.io/vis-gl/pen/pKvrGP)，但您需要使用 deckgl.setProps() onClick 函数而不是 setViewport 来更改您的视口。

这对你有意义吗？