2.建立简单的地图应用

最新推荐文章于 2024-08-03 16:53:18 发布

翻译最新推荐文章于 2024-08-03 16:53:18 发布 · 343 阅读

ArcGIS for JS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了使用ArcGIS创建二维和三维地图的方法。通过Map类和View类可创建简单地图应用，可选择托管底图或自定义底图。详细说明了撸代码步骤，包括创建HTML页面、添加CSS和API引用、创建二三维地图，还提到探索底图的内容。

概述

本节您将学到： 怎么样创建一个二维地图和三维地图

您可以通过Map类和View类创建一个简单的二维或三维地图应用。其中Map是一个包含您要展示的所有图层layers（包含地图basemap）的容器。您可以选择托管在ArcGIS Online一系列的矢量或栅格底图，也可以选择您自己定义的底图your own styled basemap。View类负责绘制在Map包含的所有的图层。您可以通过MapView来渲染二维视图（View）或者通过SceneView渲染三维视图（View）。您可以通过设置View的center、zoom属性来定位二维地图，也通过设置camera来定位三维地图。更多的介绍可以查看官方文档。

通过本节，您可以创建一个地图初始中心为加州圣塔莫尼卡山脉、地图为地形图的二维和三维地图。
展示效果请点击： 二维效果、三维效果

撸代码步骤

创建一个HTML页面

将如下HTML代码，加入新建的HTMl界面中。（可以使用在线编辑器）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

添加CSS和API的引用

在<head>标签中加入以下引用

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

创建二维地图或三维地图

确定要创建二维地图还是三维地图。
在<head>标签中加入一个<script>标签，并且使用AMD模式require方式引入Map和MapView或SceneView模块。创建一个Map对象，设置其basemap属性为topo-vector。如果您创建是三维地图，还需要设置其ground属性为world-elevation,用来显示高程。最后，按照如下方式创建二三维视图：

二维地图：创建MapView对象设置container属性为viewDiv、设置center为-118.71511,34.09042、设置zoom为11。

三维地图：创建SceneView对象设置container属性为viewDiv，通过一个camera对象来设置SceneView的视图位置。设置camera对象的x、y、z坐标为-118.71511, 34.09042, 2000、tilt属性为65。有关camera对象属性的设置可以查看文档。

二维地图全部代码：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

三维地图全部代码：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App (3D)</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>  
    require([
        "esri/Map",
        "esri/views/SceneView"
    ], function(Map, SceneView) {

      var map = new Map({
        basemap: "topo-vector",
        ground: "world-elevation"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
          position: {
            x: -118.808,
            y: 33.961,
            z: 2000 // meters
          },
          tilt: 75
        }
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

愉快的撸完以上代码，在浏览器中查看就文章开始展示效果链接的样子啦。

再撸点（官方为：挑战）

探索底图

ArcGIS Online上面托管了品类繁多的底图看供您的应用选择。许多底图在 ArcGIS JS API 中可以通过一个简单字符串进行引用。试着将basemap属性设置为light-gray-vector、 dark-gray-vector、 satellite、 streets-relief-vector或 streets-navigation-vector。
栗子：

var map = new Map({
  basemap: "streets-navigation-vector"
});

想学习如何创建和使用自定义底图，可以看以下这这篇文章(暂时没翻译)。

Style a vector basemap

文章翻译自 ArcGIS for JavaScript 帮助文档官网

欢迎关注我的微信公众号，第一时间为您推送相关教程。

GIS猫公众号