Web GIS多种方式发布动态地图服务及显示（2）

最新推荐文章于 2025-04-09 15:14:29 发布

原创最新推荐文章于 2025-04-09 15:14:29 发布 · 2.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#geodatabase #arcgis #javascript

综合案例同时被 3 个专栏收录

3 篇文章

订阅专栏

ArcGIS Server

2 篇文章

订阅专栏

Arcgis API for JS

1 篇文章

订阅专栏

本文详细介绍使用ArcGIS软件系列发布WebGIS动态地图服务的过程，包括GeoDatabase数据存储、ArcServer服务发布和ArcGIS API for JavaScript的地图服务调用。通过具体案例，展示从环境配置到地图在浏览器上显示的全流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GeoDatabase+ArcServer+Arcgis API for Javascript发布动态地图服务

第二章主流的Web GIS地图发布及显示

摘要:本案例主要结合当前主流的ArcGIS软件系列进行的Web
GIS地图初始化任务，需要明确其空间数据源存储，GIS服务器的发布以及如何用二次开发包进行GIS数据及服务的调取。

关键词:ArcGIS软件系列、GIS服务器、二次开发包、GIS数据及服务

2.1 框架结构图及描述

目前比较主流的WebGIS开发方式如下图2-1所示。
在这里插入图片描述
图2-1 主流WebGIS开发方式

如图所示，前端向 Web 服务器发出请求，在服务器端通过 Arc GIS API for JavaScript调用 Arc GIS Server 上发布的 GIS 服务。

2.1.1 GeoDatabase

GeoDatabase是ArcGIS中的面向对象的表达和管理GIS数据的核心数据模型。相当于地理数据统一存储的仓库，因此我们的空间数据源一般是通过ArcMap把数据存储在GeoDatabse中，再进行数据的调用。

2.1.2 ArcServer

在WebGIS开发过程中，我们所需要的数据不仅仅来自于ArcGIS online，有时候我们需要发布自己的数据服务，那么就需要通过ArcGIS Server发布自己的动态地图服务。地图服务是一种利用 ArcGIS 使地图可通过 Web 进行访问的方法。我们首先在 ArcMap中制作地图，然后将地图作为服务发布到 ArcGIS Server 站点上。之后，Internet用户便可在 Web 应用程序、ArcGIS for Desktop、ArcGIS Online
以及其他客户端应用程序中使用地图服务。

2.1.3 ArcGIS API for JavaScript

ArcGIS API for Javascript 是由美国 Esri 公司推出，跟随ArcGIS 9.3
同时发布的，是Esri 基于dojo框架和 REST 风格实现的一套编程接口。通过 ArcGIS API for Javascript可以对ArcGIS for Server进行访问，并且将ArcGIS for
Server提供的地图资源和其它资源（ArcGIS Online）嵌入到 Web 应用中。

2.2 地图初始化案例

2.2.1 环境配置

对应的软件版本号

ArcMap：10.2

ArcGIS Server：10.2

ArcGis API for JavaScript：3.9

2.2.2 利用ArcMap发布动态地图服务

2.2.2.1 加载数据

实验数据为地籍测量时，我负责的土地利用的数据。

打开ArcMap，加载数据，如下图2-2所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPKnIlzV-1578050177181)(media/19688799db0d3736cf66085b504516f9.png)]

图2-2 数据显示

2.2.2.2 发布服务

菜单栏【文件】|【共享为】|【服务】，打开共享服务面板，如下图2-3所示，发布地图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRgGZTUz-1578050177190)(media/890f82ba4fa528c01725af2fb3677522.png)]

图2-3 发布服务

新建一个连接，连接到ArcGIS Server服务器，如下图2-4所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAgbIpfW-1578050177192)(media/976e36bdc0052c687f57ac8df8198922.png)]

图2-4 新建连接

发布GIS服务，如下图2-5所示，设置好服务器，如下图2-6所示，值得注意的是用户名密码为登录ArcGIS Server服务器的账号密码。完成连接服务发布后，设置好服务名称为“第二次实验”如下图2-7所示。地图服务所在的文件夹路径，我们选择建立一个新的文件夹“Test”，如下图2-8所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OW4bpAq0-1578050177193)(media/c6aaf6536bd7615638e8dc46ae9e2ea1.png)]

图2-5 发布GIS服务

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z27Am9Gq-1578050177194)(media/bca2e6728eec4a30f0a88ded238e99f6.png)]

图2-6 设置GIS服务器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T8nXdAPA-1578050177195)(media/acc28c8ca2edd2295bd28025383e4782.png)]
图2-7 设置服务名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J8bYLpMF-1578050177197)(media/e9cdcaaf112a6f9c917452ff47b81102.png)]

图2-8 建立Test文件夹

由于本次实验只是最简单的动态地图服务，因此可以什么都不设置，直接点击分析若没有错误，就可以直接发布了。如下图2-9所示，分析结果则如下图2-10所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmyMtvBO-1578050177198)(media/40b231f54451098947aca433a23462f4.png)]

图2-9 直接点击分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gKaM4Aag-1578050177200)(media/2d41c181ebb7b4b6a7602b5a512b4b2c.png)]

图2-10 分析结果

分析结果有三种类型，Errors错误、Warnings警告和Messages消息。错误是必须要解决的问题，不解决就无法发布服务。警告是可能会影响服务性能、显示效果或者数据的问题，消息是一般的提示性的信息，警告和消息是可以选择性忽略的，不解决也可以成功发布服务。

这次我们只是为了演示一整套流程，因此警告问题我们选择项忽略，直接点击【发布】。如下图2-11所示，发布成功。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xeb46nU-1578050177201)(media/1c46e3db417b17e6185f6ef721eba100.png)]

图2-11 成功发布地图

2.2.2.3 查看地图服务

当地图服务发布成功后，我们打开并登录服务管理(http://localhost:6080/arcgis/manager/)

点击Test文件夹可以查看我们刚刚发布的地图服务，如下图2-12所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oU8nzKnn-1578050177203)(media/a4377c31540ed3ca5a11d97f0d517948.png)]

图2-12 发布的地图服务

点击进入该服务，可以查看该服务支持的具体操作，如下图2-13所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRGRWg8y-1578050177206)(media/cd222e75b4853aa9ed7578885e323ec8.png)]

图2-13 查看支持的服务

2.2.2.4 查看服务详细信息

打开服务目录(http://localhost:6080/arcgis/rest/services)，如下图2-14所示，即可看到该地图所有的详细的信息，当然这只是一小部分，此处省略不再赘述。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xp6ixPG8-1578050177208)(media/dee3df2142ee7ebd0b9f90e535198cda.png)]

图2-14 服务详细信息

2.2.3 ArcGIS API For JavaScript调用地图服务

2.2.3.1 REST和SOAP的区别

Web服务主要有两种接口类型，即SOAP风格的Web服务和REST风格的Web服务，他们也被分别称为SOAP API 和 REST API。

SOAP（Simple Object Access Protocol），即简单对象访问协议，它使用一种封装过的XML进行信息交换。

REST（Representational State Transfer），即表述性状态转移或表象状态转移，是Roy Fielding于2000年在其博士研究生论文中所提出的一种架构风格。REST接口的Web服务通过HTTP发送数据，最常见的实现方式是把请求参数放在URL中，通过URL发送请求参数。REST风格的Web服务经常以JSON和不经SOAP封装的XML等格式向客户端返回结果，如下图2-15所示。

所以REST接口比SOAP接口更加简洁而高效，更容易使用，更能利用Web的优势，因而REST接口也早就超越了SOAP接口，被广泛使用成为业界的主流。
在这里插入图片描述
图2-15 REST请求示意图

2.2.3.2 查看REST URL

如下图2-16所示，查看刚刚发布好的数据的REST URL地址。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DD0Imp7I-1578050177209)(media/cd222e75b4853aa9ed7578885e323ec8.png)]

图2-16 REST URL地址

2.2.3.3 调用API

ArcGIS API for JavaScript支持在线引用和离线引用两种方式，离线操作步骤较为复杂，因此我们这里直接采用在线引用官方API。代码如下

<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css"\>

<script src="https://js.arcgis.com/3.29/"\>\</script\>

2.2.3.4 ArcGIS API for Javascript调用动态服务

在ArcGIS API中给我们提供了一个类叫做ArcGISDynamicMapServiceLayer利用这个类，我们可以获得发布的地图服务。调用动态地图服务一般只需要两步：

1. 通过地图服务的URL创建一个ArcGISDynamicMapServiceLayer对象

<script>

require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",

"dojo/domReady!"],

function(Map,ArcGISDynamicMapServiceLayer){

var map = new Map("mapDiv");

})

<script>

2. 将动态地图服务的对象添加到地图容器中

// 利用 url 创建一个动态地图服务对象

var layer=new

ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer");

// 将地图服务对象添加到地图容器中

map.addLayer(layer);

完整代码如下

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<title>Hello World</title>

<!–下面两句代码是一定要放进去，引用CDN，直接在网上引用API–>

<link rel=“stylesheet” href=“http://js.arcgis.com/3.9/js/esri/css/esri.css” />

<script src=“http://js.arcgis.com/3.9/”></script>

<script>

require([“esri/map”,“esri/layers/ArcGISDynamicMapServiceLayer”,

“dojo/domReady!”],

function(Map,ArcGISDynamicMapServiceLayer){

var map = new Map(“mapDiv”);

// 利用 url 创建一个动态地图服务对象

var layer=new

ArcGISDynamicMapServiceLayer(“http://localhost:6080/arcgis/rest/services/MyMapService/MapServer”);

// 将地图服务对象添加到地图容器中

map.addLayer(layer);

})

</script>

</head>

<body class=“tundra”>

<div id=“mapDiv” style=“width:900px; height:600px; border:1px solid
#000;”></div> // 定义一个容器，设置宽度和高度，边界宽度 1，颜色白色

</body>

</html>