ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript_arcgis js api

作者：小舞很执着 | 2024-07-21 16:41:27

踩

arcgis js api

Cesium 实战 - 自定义视频标签展示视频

近期由于工作需要，开始接触 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>

1
2
3
4
5
6
7
8

官方下载地址：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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65