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

ArcGIS JS 系列基础教程100个项目常用热门功能一、地图基础操作1. ArcGIS JS 基础教程1地图初始化含AMD/ESM两种引入方式功能介绍ArcGIS JS 开发的基础实现地图容器渲染、底图加载支持AMD传统引入适配纯HTML Demo和ESM现代前端框架适配如Vue/React两种方式是所有地图功能的前置操作。功能实现核心依赖 Map地图实例、MapView2D视图配置容器ID、底图类型、初始中心点和缩放级别两种引入方式分别适配不同开发场景确保地图正常渲染且无报错。功能应用所有ArcGIS JS项目的开篇步骤如后台管理系统地图模块、移动端地图页面、WebGIS可视化项目的基础渲染。核心代码方式1AMD引入纯HTML Demo常用linkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.css/scripttypemodulesrchttps://js.arcgis.com/5.0//scriptscripttypemoduleconst[Map,SceneView,]await$arcgis.import([arcgis/core/Map.js,arcgis/core/views/SceneView.js,]);constmapnewMap({basemap:streets});constviewnewMapView({container:mapContainer,map:map,center:[-118.805,34.027],zoom:13});/script方式2ESM引入Vue/React等现代框架常用importMapfromarcgis/core/Map;importMapViewfromarcgis/core/views/MapView;constinitMap(){constmapnewMap({basemap:streets});constviewnewMapView({container:mapContainer,map:map,center:[-118.805,34.027],zoom:13});};initMap();完整代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第1课ArcGIS JS 地图初始化含AMD/ESM两种引入方式/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstylebody{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/headbodyh1classpage-titleArcGIS JS 地图初始化/h1dividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);// 引入天地图工具类constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);// 加载影像底图constimgLayersgetTianditu.default({type:img_w});constmapnewMap({basemap:{baseLayers:[imgLayers.base,imgLayers.anno]},ground:{surface:{elevationLayers:[{url:https://www.geosceneonline.cn/image/rest/services/OpenData/ChinaTerrain3D/ImageServer/}]}}});constviewnewSceneView({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 和天地图底图可直接运行查看效果。