ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript-阿里云开发者社区

ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript

2026-10-12 22

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文为ArcGIS Maps SDK for JavaScript（JSAPI）入门首篇，涵盖概览、官方示例与API速览，完成4.28版HelloWorld实践，并简析其功能强大（二维/三维兼备、分析渲染丰富、免费闭源）与局限（社区小、扩展难、接口受限）。

近期由于工作需要，开始接触 ArcGIS Maps SDK for JavaScript（以下简称 JSAPI），为了更好的系统的学习，准备开设专栏，作为学习记录。

本文作为第一篇，首先介绍一下 JSAPI 的概览、官方示例以及官方 API。

然后完成 JSAPI 的 helloworld 以及注意事项。

最后简述一下 JSAPI 的优势劣势。

JSAPI 介绍

1. JSAPI 概览

ArcGIS Maps SDK for JavaScript 是 ESRI 公司开发的 Web 端地图库，目前最新版本为 4.28，下文简称 JSAPI。

JSAPI 包含二维和三维部分，其中二维跟 Openlayers 相当，三维跟 Cesium 相当。

不同的是，JSAPI 是闭源的，但是可以免费使用！

JSAPI 为了方便大家使用，提供了一系列教程，其中 API 和示例代码最常用，下边分别介绍。

2. 官方示例

官方示例：Sample Code

在这里插入图片描述

3. 官方 API

官方 API：API Reference

在这里插入图片描述

4. 官方资源地址


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

<!--个人镜像资源-->
<link rel="stylesheet" href="https://openlayers.vip/arcgis/4.28/esri/themes/light/main.css" />
<script src="https://openlayers.vip/arcgis/4.28/init.js"></script>

官方下载地址：JSAPI downloads

注意：需要注册登录！也可以点这里下载：CSDN JSAPI downloads

JSAPI Helloworld

JSAPI 入门比较简单，这里就贴一下代码，注意事项都在注释里：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to SceneView - Create a 3D map | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>
    <style>
      html,
      body,
      #viewDiv {
    
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!--个人镜像资源-->
    <link rel="stylesheet" href="https://openlayers.vip/arcgis/4.28/esri/themes/light/main.css" />
    <script src="https://openlayers.vip/arcgis/4.28/init.js"></script>

    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
    
        // 创建地图
        const map = new Map({
    
          // 基础图层
          basemap: "satellite",
          // 地形高程
          ground: "world-elevation"
        });

        // 创建地图视图
        const view = new SceneView({
    
          // 地图容器
          container: "viewDiv",
          // 传入地图对象
          map: map,
          // 地图相机
          camera: {
    
            // 初始位置
            position: {
    
              // 坐标系
              // 坐标系
              spatialReference: {
    
                wkid: 4326
              },
              x: 115,
              y: 32,
              z: 18161244.728082635
            },
            // 初始视角
            heading: 0,
            tilt: 0.49
          }
        });
      });
    </script>
  </head>

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