Angular 17 与 ArcGIS Javascript SDK

Question

我正在尝试使用 ArcGIS Javascript SDK。我正在遵循此处概述的文档： https://developers.arcgis.com/javascript/latest/get-started-angular/

这样做时，我不断收到以下错误：

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

系统似乎不断循环并出现此错误，直到最终因此错误而失败：

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 上，地图最初似乎呈现，但随后滚动，直到地图最终消失。

应用程序设置非常基本，因为我只是想让地图显示在屏幕上。我对使用 ArcGiS 还很陌生，因此我们将不胜感激。

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"
  }
}

如有任何帮助，我们将不胜感激

Answer 1

问题可能出在包含地图 div 的元素的样式中。尝试将地图 div 的宽度和高度设置为百分比或固定值。