ArcGIS Maps SDK 4.27在ASP.NET Core 3.1 MVC中构造函数识别失败

问题根源 #

ArcGIS JS SDK从4.16版本开始默认启用ES模块加载机制，而ASP.NET Core 3.1 MVC的默认页面渲染、脚本处理逻辑与该加载模式存在适配冲突，导致模块无法正确解析，触发MapView is not a constructor错误。

解决方案 #

1. 调整AMD加载逻辑，确保DOM就绪后初始化 #

ArcGIS JS SDK 4.16+仍兼容AMD加载模式，修改脚本部分，确保在DOM完全加载后执行地图初始化，避免MVC页面渲染时序冲突：

<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.27/"></script>

<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
</style>

<script>
    // 等待DOM加载完成后执行地图初始化
    document.addEventListener('DOMContentLoaded', function() {
        require([
            "esri/WebMap", 
            "esri/views/MapView", 
            "esri/widgets/Editor"
        ], function(WebMap, MapView, Editor) {
            const webmap = new WebMap({
                portalItem: {
                    id: "4793230052ed498ebf1c7bed9966bd35"
                }
            });

            const view = new MapView({
                container: "viewDiv",
                map: webmap
            });

            view.when(function() {
                const editor = new Editor({
                    view: view
                });
                view.ui.add(editor, "top-right");
            });
        });
    });
</script>

<div id="viewDiv"></div>

2. 排查MVC布局页脚本冲突 #

• 检查_Layout.cshtml中是否存在jQuery旧版本等与ArcGIS SDK加载逻辑冲突的脚本，尝试将ArcGIS脚本引用移至布局页底部，或在地图视图中添加@{ Layout = null; }取消布局，单独测试页面。
• 确认MVC的脚本渲染逻辑未篡改ArcGIS SDK的加载路径或内容。

3. 配置ASP.NET Core静态资源与安全策略 #

在Startup.cs中确保允许外部脚本加载，调整CORS和内容安全策略：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowArcGIS",
            builder => builder.WithOrigins("https://js.arcgis.com")
                              .AllowAnyMethod()
                              .AllowAnyHeader());
    });
    // 其他服务配置
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件配置
    app.UseCors("AllowArcGIS");
}

若启用了内容安全策略（CSP），需在布局页<head>中添加允许规则：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://js.arcgis.com; style-src 'self' https://js.arcgis.com;">

4. 改用ES模块加载方式（可选） #

现代浏览器支持ES模块，可直接使用模块导入方式加载ArcGIS组件，避开AMD与MVC的冲突：

<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script type="module">
    import { WebMap } from "https://js.arcgis.com/4.27/@arcgis/core/WebMap.js";
    import { MapView } from "https://js.arcgis.com/4.27/@arcgis/core/views/MapView.js";
    import { Editor } from "https://js.arcgis.com/4.27/@arcgis/core/widgets/Editor.js";

    const webmap = new WebMap({
        portalItem: {
            id: "4793230052ed498ebf1c7bed9966bd35"
        }
    });

    const view = new MapView({
        container: "viewDiv",
        map: webmap
    });

    view.when(() => {
        const editor = new Editor({
            view: view
        });
        view.ui.add(editor, "top-right");
    });
</script>

<div id="viewDiv"></div>

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