0%

实例化二维地图

主要介绍如何用ArcGIS JS API 4.14去实例化一张二维地图,并简单介绍了和3.X版本实现方式的异同。

概述

在学习了ArcGIS JS API 4.14版本的离线部署之后,我们接下来介绍如何用JS API 4.14去实例化一张基础的二维地图。本篇文章对JS API的引用不做强制性的要求,无论我们引入在线API或者离线部署的API都可以,但是为了在前端页面查看我们的地图时有一个良好的体验,此处推荐引用离线部署的JS API,因为在线的JS API有时候会因为网络的原因,加载有些慢,我们在查看页面效果时有时候会等较长的时间。

开始前的技术基础

  • 有一定的前端开发能力,能构建一个基础的HTML页面并能在前端页面显示
  • 安装部署了本地服务器(IIS、Tomcat、Nginx等)

操作步骤

构建一个基础的HTML页面

1.1、JS API的开发其实属于WebGIS开发的范畴,既然是WebGIS开发,那首先要求我们对Web开发要有所掌握,此系列的文章不要求大家掌握目前主流的前端框架或者TypeScript等主流的前端技术,只需要我们有一定的前端开发基础即可。换句话说,如果你能构建一个HTML页面,并能让它在前端浏览器显示,那就满足阅读此系列文章的技术条件。
1.2、接下来,我们首先要在本地服务器目录中新建一个HTML页面,并取名为mapview.html。在此处我们在Tomcat的webapps文件夹中新建HTML文件,并改名。然后在此文件中添加如下代码,构建一个基础的HTML页面:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>MapView</title>
</head>
<body>
</body>
</html>

1.3、在浏览器通过地址http://localhost/JSAPI414demo/mapview.html来访问新建的html,此时我们看到页面空白,没有输出任何信息,如下:
基础页面

引入JS API 4.14的开发包

2.1、新建一个基础的HTML页面后,我们在此页面中引入JS API 4.14的开发包。其实就是引入我们离线部署的JS API,此处引入的文件有两个:init.js和相关的css文件,如下:

1
2
<link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
<script src="http://localhost/4.14/init.js"></script>

2.2、如上所示,css文件我们引入了亮色系的main.css文件,在一般的开发中,我们基本都是引入此css文件来实例化地图。我们将css文件引入位置放在<head>标签内,js文件放在<body>标签内,并将其靠近<body>标签的结束标签处,这么做主要是为了前端加载页面时有一个更好地用户体验。

新建存放地图的标签,并设置样式

3.1、在<body>标签中新建一个id为“mapview”的div,并设置其高度和宽度都为100%,如下:

1
2
3
4
5
6
7
8
9
10
11
<div id="mapview"></div>


body {
margin: 0;
}
#mapview {
position: absolute;
width: 100%;
height: 100%;
}

3.2、上述除了设置div的样式外,我们还将body元素的外边距设为了0,主要是因为谷歌浏览器对body元素有一个默认为8像素的外边距,这个不做强制要求,body元素的样式不设置也是可以的。设置它的样式主要是为了美观。

加载实例化地图所需的模块,并实例化

4.1、有了基础的HTML页面,引入了JS API开发包,并新建了存放地图的div之后,我们接下来引入实例化二维地图所需的模块,并将其实例化。
4.2、JS API 4.14实例化一张二维地图需要引入两个模块:Map和MapView。其中Map模块主要是用来实例化地图,MapView模块主要是将实例化后的地图跟我们存放地图的Div做绑定,将其显示在前端页面。这两个模块的引入是通过dojo的AMD方式加载引入的,如下:

1
2
3
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {

});

4.3、模块引入后,我们将这两个模块实例化,代码如下:

1
2
3
4
5
6
7
8
9
var map = new Map({
basemap: "osm"   //指定一个底图
});
var view = new MapView({
container: "mapview", //指定存放地图的div
map: map, // 跟实例化的地图做绑定
zoom: 10, // 设置地图的初始化级别
center: [104.072619,30.663279] //设置地图的初始化中心点坐标
});

通过上述代码,我们实例化了一个以osm为底图的地图,并将其与一个mapview做了绑定,并设置mapview的初始缩放级别为10级,同时指定初始化中心点为成都市。
4.4、刷新前端页面,即可看到效果,如下所示,一张二维地图初始化成功:
实例化的二维地图

总结

本文主要介绍了用ArcGIS JS API 4.14如何实例化一张二维地图,并设置地图初始中心和缩放级别。熟悉JS API 3.X开发的朋友们大概可以发现,二维地图用JS API 3.X也可以实例化,只不过在实例化时没有这么麻烦,只需要实例化一个地图即可,初始化地图中心和缩放级别,并将其跟div绑定这些事全部在初始化地图时是Map的属性,但到了4.14的版本中,Map实例化的时候只需要指定底图,其他的缩放级别、初始化地图中心、绑定div这些事情全都迁徙到了MapView上面。所以说,这就是3.X和4.X在实现方式上的不同,后续的文章中我们逐一介绍。

附:

全文代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
   <title>MapView</title>
   <link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
   <style type="text/css">
       body {
           margin: 0;
      }
       #mapview {
           position: absolute;
           width: 100%;
           height: 100%;
      }
   </style>
</head>
<body>
   <div id="mapview"></div>
   <script src="http://localhost/4.14/init.js"></script>
   <script>
       require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
           var map = new Map({
               basemap: "osm"   //指定一个底图
          });
           var view = new MapView({
               container: "mapview", //指定存放地图的div
               map: map, // 跟实例化的地图做绑定
               zoom: 10, // 设置地图的初始化级别
               center: [104.072619,30.663279] //设置地图的初始化中心点坐标
          });
      });
   </script>
</body>
</html>