ArcGIS JS 基础教程（1）：地图初始化（含AMD/ESM两种引入方式）

ArcGIS JS 系列基础教程（100个项目常用热门功能）

一、地图基础操作

1. ArcGIS JS 基础教程（1）：地图初始化（含AMD/ESM两种引入方式）

功能介绍：ArcGIS JS 开发的基础，实现地图容器渲染、底图加载，支持AMD（传统引入，适配纯HTML Demo）和ESM（现代前端框架适配，如Vue/React）两种方式，是所有地图功能的前置操作。

功能实现：核心依赖 Map（地图实例）、MapView（2D视图），配置容器ID、底图类型、初始中心点和缩放级别，两种引入方式分别适配不同开发场景，确保地图正常渲染且无报错。

功能应用：所有ArcGIS JS项目的开篇步骤，如后台管理系统地图模块、移动端地图页面、WebGIS可视化项目的基础渲染。

核心代码：

方式1：AMD引入（纯HTML Demo常用）

html 复制代码

<link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css"/>
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<script type="module">
   const [
       Map,
       SceneView,
   ] = await $arcgis.import([
       "@arcgis/core/Map.js",
       "@arcgis/core/views/SceneView.js",
   ]);

  const map = new Map({
    basemap: "streets"
  });
  const view = new MapView({
    container: "mapContainer",
    map: map,
    center: [-118.805, 34.027],
    zoom: 13
  });
</script>

方式2：ESM引入（Vue/React等现代框架常用）

javascript 复制代码

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";

const initMap = () => {
  const map = new Map({
    basemap: "streets"
  });
  const view = new MapView({
    container: "mapContainer",
    map: map,
    center: [-118.805, 34.027],
    zoom: 13
  });
};
initMap();

完整代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第1课：ArcGIS JS 地图初始化（含AMD/ESM两种引入方式）</title>
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css">
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
    <style>
        body { margin: 0; padding: 0; font-family: "Microsoft YaHei", sans-serif; }
        #mapContainer { width: 100vw; height: 100vh; }
        .page-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.9);
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 18px;
            font-weight: bold;
            z-index: 100;
        }
    </style>
</head>
<body>
<h1 class="page-title">ArcGIS JS 地图初始化</h1>
<div id="mapContainer"></div>

<script type="module">
    const Map = await $arcgis.import("@arcgis/core/Map.js");
    const SceneView = await $arcgis.import("@arcgis/core/views/SceneView.js");
    // 引入天地图工具类
    const getTianditu = await $arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");

    // 加载影像底图
    const imgLayers = getTianditu.default({ type: "img_w" });

    const map = new Map({
        basemap: { baseLayers: [imgLayers.base, imgLayers.anno] },
        ground: {
            surface: {
                elevationLayers: [{
                    url: "https://www.geosceneonline.cn/image/rest/services/OpenData/ChinaTerrain3D/ImageServer/"
                }]
            }
        }
    });

    const view = new SceneView({
        container: "mapContainer",
        map: map,
        center: [118.805, 34.027],
        zoom: 13,
        tilt: 45
    });

    view.when(() => console.log("三维地图加载完成！"));
</script>
</body>
</html>

在线示例：

地图初始化（GitHub资源，等待时间较长，或者架梯子）

📌 在线示例说明：点击上方链接即可查看完整的三维地图示例，代码基于 ArcGIS JS 5.0 和天地图底图，可直接运行查看效果。