React使用@arcgis/core缩放地图至全球时出现白边如何解决

问题场景 #

在React项目中通过@arcgis/core模块开发ArcGIS地图时，调整zoom值让地图覆盖全球范围后，地图周边出现白色空白区域，无法占满父元素100%尺寸，效果如下：

原初始化代码如下：

import ArcGISMap from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import SceneView from "@arcgis/core/views/SceneView";
import config from "@arcgis/core/config";

import "./style.css";
import { imagesLayer } from "../../utils/helper";

export const mapInitializer = (
    container,
    mapProperties,
    viewProperties,
    mapLayers,
    mapType
) => {
    config.apiKey = process.env.REACT_APP_ARCGIS_API_KEY;
    const map = new ArcGISMap({
        ...mapProperties,
    });
    console.log({ mapLayers });
    map.addMany([imagesLayer, ...mapLayers]);

    const view =
        mapType === "3D"
            ? new SceneView({
                map,
                ...viewProperties,
            })
            : new MapView({
                map,
                ...viewProperties,
            });

    // 以下为无效代码，false不存在on方法，永远不会执行
    !view &&
        false.on("key-down", (event) => {
            const prohibitedKeys = ["+", "-", "Shift", "_", "="];
            const keyPressed = event.key;
            if (prohibitedKeys.indexOf(keyPressed) !== -1) {
                event.stopPropagation();
            }
        });
    view.on("mouse-wheel", (event) => {
        event.stopPropagation();
    });
    view.on("double-click", (event) => {
        event.stopPropagation();
    });
    view.on("drag", ["Shift"], (event) => {
        event.stopPropagation();
    });

    view.on("drag", ["Shift", "Control"], (event) => {
        event.stopPropagation();
    });
    view.on("drag", (event) => {
        event.stopPropagation();
    });

    view.container = container;
    view.ui.empty("top-left");
    view.ui._removeComponents(["attribution"]);

    view
        .when()
        .then((_) => {
            console.log("Map Initialized");
        })
        .catch(() => console.error("Map Initialization Error"));

    return null;
};

问题原因 #

2D模式下ArcGIS MapView使用Web Mercator投影渲染全球范围时，有效地图内容的宽高比固定为2:1，当地图容器的宽高比和这个比例不一致时，超出地图渲染范围的区域就会显示默认的白色背景，形成可见空白。3D SceneView下出现类似空白一般是背景配置和场景不匹配导致。

修复方案 #

• 方案1：匹配视图背景色（官方推荐，无变形无副作用）
  直接给视图实例设置background属性，把空白区域的颜色改成和底图边缘一致的颜色，视觉上完全消除白边，2D/3D视图均适用。在初始化view的配置中添加对应参数即可：

  // 2D视图配置示例，color值替换为你所用底图的边缘色，比如影像图用[0,0,0]，街道图用对应海洋蓝色值
  new MapView({
    map,
    background: {
      type: "color",
      color: [0, 105, 148]
    },
    ...viewProperties,
  })
  
  // 3D视图可配合环境配置实现更自然的效果
  new SceneView({
    map,
    background: {
      type: "color",
      color: [0,0,0]
    },
    environment: {
      background: {
        type: "color",
        color: [0,0,0]
      },
      starsEnabled: false,
      atmosphereEnabled: false
    },
    ...viewProperties
  })
  

• 方案2：约束最小缩放层级
  如果业务不需要展示完整全球视图，可以直接给视图添加缩放约束，限制用户能缩放到的最小层级，从根源避免白边出现：

  new MapView({
    map,
    constraints: {
      minZoom: 3 // 数值根据自身容器尺寸调试，到刚好不出现白边的最小zoom值即可
    },
    ...viewProperties
  })
  

• 方案3：CSS强制拉伸画布（仅2D视图适用，有轻微形变）
  对地图形变要求不高的场景，可以通过CSS强制让ArcGIS渲染的画布撑满整个容器，实现无空白效果：

  /* 在项目引入的地图style.css中添加 */
  .esri-view .esri-view-surface canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  

代码优化提示 #

原代码中绑定键盘禁用事件的逻辑为无效代码，false本身不存在on方法，该段逻辑永远不会执行，需要的话可以直接把事件绑定到view实例上即可。

内容的提问来源于stack exchange，提问作者Muath Al Khatib