Angular17集成ArcGIS JavaScript SDK遇渲染错误求助

错误现象 #

• 控制台持续循环输出WebGL帧缓冲对象尺寸超限警告：

[esri.views.webgl.FramebufferObject] Resizing FBO attachment size 2368x16476 to device limit 16384

• 最终触发致命TypeError：

ERROR TypeError: Cannot destructure property 'spans' of 'g' as it is null.
    at m2._renderBackgroundLayers (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:5146)
    at m2._doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2957)
    at m2.renderChildren (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2374)
    at m2.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:1898)
    at m2.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2055)
    at m2.processRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/DisplayObject.js:5:2380)
    at h4.renderChildren (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:3507)
    at h4.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:1898)
    at h4.processRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/DisplayObject.js:5:2380)
    at q2._renderChildren (http://localhost:4200/@fs/Users/mrivera/Projects/mapping-test-2/.angular/cache/17.3.8/vite/deps/mapViewDeps-6CCLAVOG.js?v=44a6020f:2830:11) {stack: "TypeError: Cannot destructure property 'spans…s/mapViewDeps-6CCLAVOG.js?v=44a6020f:2830:11)", message: "Cannot destructure property 'spans' of 'g' as it is null."}

• UI表现：地图初始可渲染，但会持续缩放直至完全消失

项目代码 #

app.component.ts #

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MappingModule } from './mapping/mapping.module';

@Component({
  selector: 'aig-root',
  standalone: true,
  imports: [RouterOutlet, MappingModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'mapping-test-2';
}

app.component.html #

<div>
 <aig-mapping></aig-mapping>
</div>

mapping.module.ts #

import { NgModule } from '@angular/core';
import { ComponentLibraryModule } from '@arcgis/map-components-angular';

import { MappingComponent } from './mapping.component';

@NgModule({
  declarations: [MappingComponent],
  imports: [ComponentLibraryModule],
  exports:[MappingComponent]
})
export class MappingModule {}

mapping.component.ts #

import { Component, OnInit } from "@angular/core";
import { defineCustomElements } from "@arcgis/map-components/dist/loader";

@Component({
  selector: "aig-mapping",
  templateUrl: "./mapping.component.html",
  styleUrls: ["./mapping.component.scss"]
})
export class MappingComponent implements OnInit {
  title = "map-components-angular-template";

  arcgisViewReadyChange(event: any) {
    console.log("MapView ready", event);
  }

  ngOnInit(): void {
    defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
  }
}

mapping.component.html #

<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9" (arcgisViewReadyChange)="arcgisViewReadyChange($event)">
    <arcgis-expand>
      <arcgis-search position="top-right"></arcgis-search>
    </arcgis-expand>
    <arcgis-legend position="bottom-left"></arcgis-legend>
  </arcgis-map>

package.json #

{
  "name": "mapping-test-2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@arcgis/map-components-angular": "^4.30.7",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.8",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

解决建议 #

• 为地图组件设置明确尺寸约束：WebGL帧缓冲尺寸超限是因为地图容器没有固定宽高，导致组件尝试创建过大的渲染画布。在mapping.component.scss中添加样式：

arcgis-map {
  display: block;
  width: 100vw;
  height: 100vh;
  /* 也可以根据需求设置固定宽高，比如800px × 600px */
}

• 调整ArcGIS组件初始化时机：将defineCustomElements移至ngAfterViewInit钩子，确保Angular视图初始化完成后再加载自定义元素：

import { Component, OnInit, AfterViewInit } from "@angular/core";
import { defineCustomElements } from "@arcgis/map-components/dist/loader";

@Component({
  selector: "aig-mapping",
  templateUrl: "./mapping.component.html",
  styleUrls: ["./mapping.component.scss"]
})
export class MappingComponent implements OnInit, AfterViewInit {
  title = "map-components-angular-template";

  arcgisViewReadyChange(event: any) {
    console.log("MapView ready", event);
  }

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
  }
}

• 尝试降级ArcGIS组件版本：当前4.30.7版本可能存在与Angular 17的兼容性问题，降级到4.29.x版本测试：

npm install @arcgis/map-components-angular@4.29.0

• 排查硬件加速问题：临时禁用浏览器WebGL硬件加速，确认是否是显卡驱动或设备限制导致的问题：
  Chrome浏览器：设置 → 系统 → 高级 → 系统 → 取消勾选"使用硬件加速模式（如果可用）"，重启后测试。

内容的提问来源于stack exchange，提问作者thxmike