SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场arcgis-core-maps

arcgis-core-maps

前端与建站

查看项目

更新于 10-16 14:50

技能介绍

ArcGIS Core Maps 技能用于在使用 ArcGIS Maps SDK for JavaScript 时创建二维地图（MapView）或三维场景（SceneView）。

一、用途与两种开发方式 该技能覆盖二维地图与三维场景的初始化、视图创建与导航。提供两种实现路径：

  1. Map Components（现代推荐方式）：基于 Web Components，使用 <arcgis-map> 与 <arcgis-scene> 标签。
  2. Core API：传统 JavaScript 方式，使用 Map、MapView 与 SceneView 类。

二、导入模式

  1. 直接 ESM 导入（构建工具推荐）：适用于 Vite、webpack、Rollup 等，例如 import Map from "@arcgis/core/Map.js";。特点为可 tree-shaking、标准 JavaScript 模块、适合生产应用。
  2. 动态导入（CDN / 无构建工具）：使用 $arcgis.import("@arcgis/core/Map.js")，可一次导入多个模块；适用于 Map Components（Web Components）、无需构建步骤、适合快速原型与演示，需在 HTML 中引入 <script src="https://js.arcgis.com/5.0/"></script>。 说明：技能内示例使用直接 ESM 导入；CDN 用法下，将 import X from "path" 替换为 const X = await $arcgis.import("path")。

三、自动转换与显式类（TypeScript） SDK 支持 autocasting，即用普通对象替代类实例。 使用显式类（非自动转换）的场景：需要实例方法或 instanceof 判断；构建共享内部库（构造函数 API 能在编译期暴露破坏性变更）；希望获得更强的编辑器可发现性；需要增量修改对象。 使用自动转换的场景：配置密集型代码（渲染器、符号、弹窗通常属于数据而非行为）；UI 驱动的配置（React state → 普通对象 → SDK 属性）；序列化与复用重要时；创建后再更新属性。 TypeScript 最佳实践：核心是保持可辨识联合类型的收窄，使用 as const 或 satisfies 维持类型安全。推荐默认：配置使用自动转换；行为（需要方法或 instanceof）使用显式类。

四、CDN 设置

  1. Map Components：需加载 Calcite components（https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js）、ArcGIS Maps SDK（https://js.arcgis.com/5.0/）与 Map components（https://js.arcgis.com/5.0/map-components/）。
  2. Core API：需引入主样式表 https://js.arcgis.com/5.0/esri/themes/light/main.css，并加载 https://js.arcgis.com/5.0/。

五、二维地图 Map Components 写法使用 <arcgis-map> 并可通过 slot 放置 arcgis-zoom、arcgis-compass、arcgis-home、arcgis-locate，通过 await mapElement.viewOnReady() 等待视图就绪后访问 view 与 map。 Core API 写法创建 Map（如 basemap: "streets-vector"）与 MapView，可设置 center、zoom 以及 constraints（minZoom、maxZoom、rotationEnabled）。

六、三维场景 Map Components 使用 <arcgis-scene>（如 basemap="topo-3d"、ground="world-elevation"）并放置导航组件。 Core API 创建 Map（basemap: "topo-3d"、ground: "world-elevation"）与 SceneView，可设置 camera（position 的 longitude/latitude/z、heading、tilt）。

七、加载 WebMap 与 WebScene 二维：Map Components 用 <arcgis-map item-id="...">；Core API 用 WebMap 的 portalItem.id。 三维：Map Components 用 <arcgis-scene item-id="YOUR_WEBSCENE_ID">；Core API 用 WebScene 的 portalItem.id。

八、导航组件与槽位 组件包括 arcgis-zoom（缩放按钮）、arcgis-compass（方向指示，点击复位朝北）、arcgis-home（返回初始范围）、arcgis-locate（定位用户位置）、arcgis-navigation-toggle（三维下切换平移/旋转）、arcgis-fullscreen（全屏切换）、arcgis-scale-bar（比例尺）。 可用槽位：top-left、top-right、bottom-left、bottom-right、top-start、top-end、bottom-start、bottom-end。

九、组件属性 <arcgis-map> / <arcgis-scene> 暴露的声明式属性包括：item-id、rotation、scale、extent、viewpoint、spatial-reference、time-extent、animations-disabled、popup-disabled、popup-component-enabled、auto-destroy-disabled（在卸载时保持视图存活，对 React strict mode 与 SPA 路由切换很关键）、attribution-mode、hide-attribution。 仅能通过 JavaScript 设置的属性：padding（侧栏遮挡地图时偏移 UI 逻辑区域）、theme、background、graphics、highlights（最多 6 组高亮选项）、analyses（三维分析，仅 SceneView）、aria。

十、地图属性与方法 属性包括 basemap、ground、layers、tables、allLayers（只读）、allTables（只读）、editableLayers（只读）、focusAreas（只读）。 方法包括 add、addMany、remove、removeMany、removeAll、reorder、findLayerById、findTableById、destroy。 模式说明：单个 Map 实例可同时被 MapView（二维）与 SceneView（三维）共享；用户交互发生在视图而非地图上，因此同一地图上的两个视图在图层上保持同步，同时各自维持独立的相机/范围状态。

十一、视图配置与导航 可用 center + zoom、center + scale、extent 三种方式设置初始范围。程序化导航使用 view.goTo（支持动画与 duration/easing），也可 goTo 到图层 fullExtent 或要素集。视图约束支持 minZoom/maxZoom、geometry + minScale、rotationEnabled。视图状态属性包括 ready、updating、stationary、interacting、suspended、focused、resolution。

十二、事件处理 组件事件：Map Components 在 <arcgis-map> / <arcgis-scene> 元素上触发以 arcgisView 为前缀的 DOM 事件，可在视图就绪前通过 addEventListener 处理（例如 arcgisViewReadyChange）。选择建议：需要声明式、框架友好、视图就绪前可用时选择组件事件；需要命令式、返回可清理 handle、与 Core API 代码一致时选择 view.on(...)。 视图事件：view.when、view.on("click")、view.on("pointer-move")、view.hitTest、通过 reactiveUtils.watch 监听 extent 变化等。

十三、适用场景与限制 适用场景：使用 ArcGIS Maps SDK for JavaScript 构建二维地图或三维场景应用、加载 WebMap/WebScene、配置视图与导航、处理地图交互事件。文中提到的场景包括生产应用、快速原型与演示。 限制与注意事项：使用 hide-attribution 前需先确认 SDK 许可条款；部分属性仅能通过 JavaScript 设置而非属性；analyses 仅限 SceneView；CDN 的 Core API 必须引入 main.css；CDN 的 Map Components 需要额外引入 Calcite 与 map-components 脚本。关于收费、价格与授权细节，资料中暂未提供完整说明。