ArcGIS API - 01 地图加载

程序员南镜

于 2022-09-14 20:44:23 发布

阅读量331

点赞数 1

本文链接：https://blog.csdn.net/weixin_45925567/article/details/126859763

版权

ArcGISAPI for Javascript 4.X 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ArcGIS API - 01 地图加载

总共分为四步个步骤：

引入资源：离线下载/CDN

<!-- CDN -->
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>

导入 esri/Map、esri/views/MapView 模块并创建地图实例
配置地图实例参数
指定地图容器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图加载</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>
  <style>
    #mapContainer {
      width: 100vw;
      height: 100vh;
    }
  </style>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function (Map, MapView) {
      // 创建一个地图对象
      var map = new Map({
        basemap: "streets",
      });
      // 在页面中呈现地图
      var view = new MapView({
        container: "mapContainer", // 指定地图视图容器
        map: map, // 地图对象
        zoom: 4, // 地图缩放
      });
    });
  </script>
</head>

<body>
  <!-- 地图容器 -->
  <div id="mapContainer"></div>
</body>

</html>