1.获取API

1.1云端托管(CDN)

1.2本地托管(Local)

配置教程:http://zhihu.geoscene.cn/article/3514
image.png

1.3Web Optimizer(Custom Build)

2.引用库

  1. <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
  2. <script src="https://js.arcgis.com/4.18/"></script>

3.加载模块

  1. <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
  2. <script type="module">
  3.   import Map from "https://js.arcgis.com/4.18/@arcgis/core/Map.js";
  5.   // Use the Map class
  6. </script>

4.写代码

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8" />
  4.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  5.     <title>ArcGIS API for JavaScript Tutorials: Display a map</title>
  7.     <style>
  8.       html,
  9.       body,
  10.       #viewDiv {
  11.         padding: 0;
  12.         margin: 0;
  13.         height: 100%;
  14.         width: 100%;
  15.       }
  16.     </style>
  18.     <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
  19.     <script src="https://js.arcgis.com/4.18/"></script>
  21.     <script>
  22.       require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
  24.         esriConfig.apiKey = "YOUR-API-KEY";
  26.         const map = new Map({
  27.           basemap: "arcgis-topographic" // Basemap layer service
  28.         });
  30.         const view = new MapView({
  31.           map: map,
  32.           center: [-118.805, 34.027], // Longitude, latitude
  33.           zoom: 13, // Zoom level
  34.           container: "viewDiv" // Div element
  35.         });
  37.       });
  38.     </script>
  40.   </head>
  41.   <body>
  42.     <div id="viewDiv"></div>
  43.   </body>
  44. </html>