当前位置：首页 > news >正文

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

news 2026/7/30 21:11:49

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常用）

<linkrel="stylesheet"href="https://js.arcgis.com/5.0/esri/themes/light/main.css"/><scripttype="module"src="https://js.arcgis.com/5.0/"></script><scripttype="module">const[Map,SceneView,]=await$arcgis.import(["@arcgis/core/Map.js","@arcgis/core/views/SceneView.js",]);constmap=newMap({basemap:"streets"});constview=newMapView({container:"mapContainer",map:map,center:[-118.805,34.027],zoom:13});</script>

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

importMapfrom"@arcgis/core/Map";importMapViewfrom"@arcgis/core/views/MapView";constinitMap=()=>{constmap=newMap({basemap:"streets"});constview=newMapView({container:"mapContainer",map:map,center:[-118.805,34.027],zoom:13});};initMap();

完整代码：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>第1课：ArcGIS JS 地图初始化（含AMD/ESM两种引入方式）</title><linkrel="stylesheet"href="https://js.arcgis.com/5.0/esri/themes/light/main.css"><scripttype="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><h1class="page-title">ArcGIS JS 地图初始化</h1><divid="mapContainer"></div><scripttype="module">constMap=await$arcgis.import("@arcgis/core/Map.js");constSceneView=await$arcgis.import("@arcgis/core/views/SceneView.js");// 引入天地图工具类constgetTianditu=await$arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");// 加载影像底图constimgLayers=getTianditu.default({type:"img_w"});constmap=newMap({basemap:{baseLayers:[imgLayers.base,imgLayers.anno]},ground:{surface:{elevationLayers:[{url:"https://www.geosceneonline.cn/image/rest/services/OpenData/ChinaTerrain3D/ImageServer/"}]}}});constview=newSceneView({container:"mapContainer",map:map,center:[118.805,34.027],zoom:13,tilt:45});view.when(()=>console.log("三维地图加载完成！"));</script></body></html>