使用@arcgis/core引入模块时如何为MapView应用对应样式？

在使用 @arcgis/core 替代 esri-loader 开发时，框架本身不会自动注入 ArcGIS JS API 的配套样式，手动引入对应样式文件即可修复控件、弹窗样式异常的问题。

具体操作步骤 #

• 第一步：在项目全局入口文件（React 项目通常为 src/index.js/src/index.css）或使用 MapView 的组件文件顶部，引入官方配套样式：

// 浅色主题
import '@arcgis/core/assets/esri/themes/light/main.css';
// 如需使用深色主题，替换为下面的引入即可
// import '@arcgis/core/assets/esri/themes/dark/main.css';

• 第二步：确认你引入的样式版本和本地安装的 @arcgis/core npm 包版本完全一致，避免出现样式和逻辑不兼容的问题。
• 第三步：检查 MapView 挂载的 DOM 容器是否设置了明确的高度，ArcGIS 地图组件不会自动撑满父容器，需要手动指定高度属性，示例如下：

<div ref={mapContainerRef} style={{ width: '100%', height: '80vh' }} />

特殊场景适配 #

如果你的项目构建后出现地图图标、资源加载失败的问题，需要在构建工具中配置静态资源拷贝规则，将 @arcgis/core/assets 目录下的所有资源拷贝到构建输出目录的对应路径：

• Vite 项目可使用 vite-plugin-static-copy 插件配置拷贝规则
• Webpack 项目可使用 copy-webpack-plugin 插件配置拷贝规则

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