微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 Deck.gl 中的底图上叠加卫星场景数据?

如何解决如何在 Deck.gl 中的底图上叠加卫星场景数据?

我对 TileLayer 的边界有疑问。

我正在从切片服务器获取裁剪的切片并将它们提供给 TileLayer 的“数据”。

它运行良好并且可以很好地显示我的光栅文件。但是,当我的视点移出光栅文件的边界时,

显示以下错误和网页。

{"errorMessage": "Tile 11/1745/795 is outside image bounds"}

https://user-images.githubusercontent.com/70316208/101444110-211c1980-3962-11eb-9099-b5e46c45cec4.png

useEffect(() => {
    fetch(endpoint + raster_path)
      .then((res) => {
        if (res.ok) return res.json();
        // throw new Error("Network response was not ok.");
      })
      .then((data) => {
        setTiles(data);
      });
  },[raster_path]);

  const tileLayer = new TileLayer({
    data: [tiles.tiles + color],maxRequests: 6,pickable: true,onViewportLoad: null,autoHighlight: false,highlightColor: [60,60,40],minZoom: 0,maxZoom: 19,tileSize: 512 / devicePixelRatio,extent: [tiles.bounds],maxCacheSize: 30,renderSubLayers: (props) => {
      const {
        bBox: { west,south,east,north },} = props.tile;
      console.log(props);

      return [
        new BitmapLayer(props,{
          data: null,image: props.data,bounds: [west,north],}),];
    },});

  const layers = [
    tileLayer,];

  return (
    <div>
      <DeckGL
        initialViewState={viewport}
        views={new MapView({ repeat: true })}
        controller={true}
        layers={[layers]}
        onViewportChange={handleViewportChange}
      >
        <ReactMapGL
          {...viewport}
          width="100%"
          height="100%"
          onViewportChange={handleViewportChange}
          mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_TOKEN}
          mapStyle="mapBox://styles/mapBox/streets-v9"
        ></ReactMapGL>
      </DeckGL>
    </div>
  );
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。