用arcgis for javascript 开发一个简单的二维地图（入门案例）

news2024/12/28 17:40:47

效果如图：
在这里插入图片描述

一、引入arcgis

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

2.加载模块

使用第二个标记从 API 加载特定模块。使用以下代码片段中的语法加载以下模块：

esri/Map- 加载特定于创建地图的代码
esri/views/MapView- 加载允许以 2D 方式查看地图的代码

<script>
 require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
   // Code to create the map and view will go here
 });
</script>

将 JavaScript 放在脚本标记中在构建简单页面或进行实验时很有用，但不适合大型应用程序。在构建更大的应用程序时，所有 JavaScript 都应该放在单独的.js文件中。

全局require()函数用于加载 API 的AMD模块

3.创建地图

使用创建一个新地图Map，它是对从模块加载的 Map 类的引用esri/Map。basemap您可以通过将对象传递给 Map 构造函数来指定地图属性，例如。

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
 const map = new Map({
   basemap: "topo-vector" // 底图
 });
});

其他底图选项包括：satellite, hybrid, gray-vector, dark-gray-vector, oceans, streets-vector, osm, national-geographic, streets-night-vector。通过修改沙盒basemap中的选项使用备用底图。

4. 创建二维视图

查看在 HTML 文件中用作容器的引用节点，允许用户在 HTML 页面中查看地图。通过将对象传递给其构造函数来创建一个新对象并设置其属性：MapView

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
 const map = new Map({
   basemap: "topo-vector"
 });

const view = new MapView({
         container: "viewDiv", // 获取页面中的div元素
         map: map, // 将创建的地图对象赋值给map属性
         zoom: 4, // 设置缩放级别
         center: [15, 65] // 设置中心点
       });
});

在此代码段中，我们将container属性设置为将保存地图的DOM 节点的名称，在本例中我们使用元素id的属性。该属性引用我们在上一步中创建的地图对象

5.定义页面内容

<body><div>
<body>
  <div id="viewDiv"></div> // 创建一个地图容器
</body>

有一个“viewDiv”来匹配在构造函数中传递给 MapView属性的

6. 页面样式

使用. _ 要使地图填满浏览器窗口，请在页面的 CSS 中添加以下 CSS ：

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

7.完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>二维地图</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
        const map = new Map({
          basemap: "topo-vector"
        });
        const view = new MapView({
          container: "viewDiv", // 获取页面中的div元素
          map: map, // 将创建的地图对象赋值给map属性
          zoom: 4, // 设置缩放级别
          center: [15, 65] // 设置中心点
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>