arcgis for js——1.显示2D地图

最新推荐文章于 2023-09-01 15:50:34 发布

遥感与地理信息

最新推荐文章于 2023-09-01 15:50:34 发布

阅读量1k

点赞数 1

分类专栏： ArcGIS for JS学习文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_22170875/article/details/105195993

版权

ArcGIS for JS学习专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.14/"></script>
  </head>
</html>

2.加载模块

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

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

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

全局require()函数（由Dojo提供）用于加载模块。Esri的JavaScript API构建在Dojo之上，以利用Dojo的模块化代码库以及协调跨浏览器差异的能力。

3.创建地图

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

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });
});

其他底图的选项有：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。通过修改basemap选项来使用备用底图。更多信息可以查看Map类。

4.创建2D视图

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});

在此代码段中，我们将container属性设置为将保存地图的DOM节点的名称。该map属性引用我们在上一步中创建的地图对象。请参阅MapView文档，以获取您可以在视图上设置的其他属性，包括center和zoom，这些属性可用于定义视图的初始范围。
共有两种视图类型：MapView（用于查看2D地图）和SceneView（用于查看3D地图）。单击此处以了解有关创建具有3D视图的地图的更多信息。

5.定义页面内容与样式表

页面：

<body>
  <div id="viewDiv"></div>
</body>

样式表：

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

6.效果展示

在这里插入图片描述

7.完整源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.14/"></script>
    <script>
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        var map = new Map({
          basemap: "streets" //街道地图(包含全世界的高速公路数据）
          //basemap: "satellite"  //卫星图
          //basemap: "hybrid" //卫星图（包含国家/地区边界）
          //basemap: "streets-navigation-vector" //世界导航地图
          //basemap: "topo-vector" //世界地形图
          //basemap:"terrain"  //世界地形图
          //basemap:"osm"  //OpenStreetMapLayer
        });
        var view = new MapView({
          container: "viewDiv", // Reference to the DOM node that will contain the view
          map: map, // References the map object created in step 3
          zoom: 4, // Sets the zoom LOD to 13
          center: [108, 34], //使用经纬度设置视图中心点
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>