ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript-Toy模板网

这篇具有很好参考价值的文章主要介绍了ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

arcgis js api,ArcGIS Maps SDK for JavaScript,javascript,jsapi,arcgis jsapi,初试jsapi,初识,arcgis

3. 官方 API

官方 API：API Reference

arcgis js api,ArcGIS Maps SDK for JavaScript,javascript,jsapi,arcgis jsapi,初试jsapi,初识,arcgis

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>