6.4 ArcGIS Enterprise 与 Web GIS 开发

文档摘要

6.4 ArcGIS Enterprise 与 Web GIS 开发 6.4 ArcGIS Enterprise 与 Web GIS 开发详解 6.4.1 Web GIS 与 ArcGIS Enterprise 概述 6.4.1.1 什么是 Web GIS？ Web GIS 是一种将 GIS 技术与 Web 技术相结合的系统。它通过互联网将地理信息数据、地图服务和 GIS 功能发布到 Web 浏览器、移动设备等客户端，用户无需安装专业的 GIS 软件，即可通过网络访问和使用 GIS 资源。Web GIS 的核心优势在于：易于访问和共享：地理信息数据和功能不再局限于桌面环境，可以轻松地通过网络进行访问和共享，打破了信息孤岛，促进了协同工作。

6.4 ArcGIS Enterprise 与 Web GIS 开发

6.4 ArcGIS Enterprise 与 Web GIS 开发详解

6.4.1 Web GIS 与 ArcGIS Enterprise 概述

6.4.1.1 什么是 Web GIS？

Web GIS 是一种将 GIS 技术与 Web 技术相结合的系统。它通过互联网将地理信息数据、地图服务和 GIS 功能发布到 Web 浏览器、移动设备等客户端，用户无需安装专业的 GIS 软件，即可通过网络访问和使用 GIS 资源。Web GIS 的核心优势在于：

易于访问和共享： 地理信息数据和功能不再局限于桌面环境，可以轻松地通过网络进行访问和共享，打破了信息孤岛，促进了协同工作。
广泛的应用场景： Web GIS 应用可以覆盖各个行业领域，例如城市规划、资源管理、环境监测、公共安全、商业分析等。
强大的交互性： Web GIS 应用通常具有丰富的用户交互功能，例如地图浏览、查询、分析、编辑等，用户可以根据自身需求进行操作和探索。
降低使用门槛： 用户无需具备专业的 GIS 知识和技能，即可通过友好的 Web 界面使用 GIS 功能，降低了 GIS 的使用门槛，扩大了用户群体。

6.4.1.2 ArcGIS Enterprise 简介

ArcGIS Enterprise 是 Esri 构建 Web GIS 的核心平台，它是一套完整的软件系统，可以在企业的基础架构中部署，用于创建、管理和共享地图、应用程序和地理信息数据。ArcGIS Enterprise 包含以下核心组件：

Portal for ArcGIS (门户): 作为用户访问 ArcGIS Enterprise 的入口，提供用户认证、内容管理、组织管理、Web 应用构建等功能。用户可以通过门户发现、使用、创建和共享地图、应用程序和数据。
ArcGIS Server (服务器): 负责托管和提供 GIS 服务，包括地图服务、要素服务、地理处理服务、影像服务等。ArcGIS Server 是 Web GIS 的核心引擎，处理客户端的请求，并返回地图数据和分析结果。
ArcGIS Data Store (数据存储): 用于存储 ArcGIS Enterprise 使用的数据，包括托管要素图层和场景图层的数据。ArcGIS Data Store 可以提供高性能的数据存储和访问，并支持数据的备份和恢复。
ArcGIS Web Adaptor (Web 适配器): 安装在 Web 服务器（例如 IIS 或 Apache）上，用于将 Web 请求转发到 Portal for ArcGIS 和 ArcGIS Server。Web 适配器提供了安全性和集成性，使得 ArcGIS Enterprise 可以与企业现有的 Web 基础设施集成。

以下是一个使用 Mermaid 绘制的 ArcGIS Enterprise 组件架构图：

graph TD subgraph ArcGIS Enterprise Portal[Portal for ArcGIS] Server[ArcGIS Server] DataStore[ArcGIS Data Store] WebAdaptor[ArcGIS Web Adaptor] end UserBrowser[用户浏览器] --> WebAdaptor WebAdaptor --> Portal WebAdaptor --> Server Portal --> Server Server --> DataStore Server --> FileSystem[文件系统/数据库] style Portal fill:#f9f,stroke:#333,stroke-width:2px style Server fill:#ccf,stroke:#333,stroke-width:2px style DataStore fill:#cfc,stroke:#333,stroke-width:2px style WebAdaptor fill:#ffc,stroke:#333,stroke-width:2px

6.4.1.3 ArcGIS Enterprise 在 Web GIS 开发中的作用

ArcGIS Enterprise 为 Web GIS 开发提供了强大的平台支撑，开发者可以利用 ArcGIS Enterprise 的各种组件和 API，构建功能丰富的 Web GIS 应用。主要体现在以下几个方面：

服务发布与管理： ArcGIS Server 提供了强大的服务发布和管理能力，开发者可以将地图数据、地理处理模型、影像数据等发布为 Web 服务，供 Web 应用调用。
安全与权限控制： Portal for ArcGIS 提供了用户认证和权限管理机制，可以控制用户对 Web GIS 资源的访问权限，保障数据的安全性。
Web 应用构建工具： Portal for ArcGIS 集成了 Web AppBuilder 和 Experience Builder 等 Web 应用构建工具，开发者可以使用这些工具快速创建无需编码或少量编码的 Web GIS 应用。
API 和 SDK 支持： Esri 提供了丰富的 API 和 SDK，例如 ArcGIS API for JavaScript、ArcGIS REST API、ArcGIS API for Python 等，开发者可以使用这些 API 和 SDK 进行自定义 Web GIS 应用开发。

6.4.2 Web GIS 开发技术栈

Web GIS 开发涉及多个技术层面，主要可以分为前端开发和后端开发。

6.4.2.1 前端开发

前端开发主要负责构建用户界面和用户交互逻辑，常用的技术包括：

ArcGIS API for JavaScript: Esri 官方提供的 JavaScript API，是构建基于 ArcGIS Enterprise 的 Web GIS 应用的核心 API。它提供了丰富的地图控件、图层类型、地理处理工具、可视化效果等，可以实现复杂的地图操作和分析功能。
HTML, CSS, JavaScript: Web 前端开发的基础技术，用于构建 Web 应用的结构、样式和交互行为。
前端框架 (可选): 例如 React, Vue, Angular 等，可以提高开发效率和代码可维护性。
前端构建工具 (可选): 例如 Webpack, Parcel, Vite 等，用于打包、优化和部署前端代码。

6.4.2.2 后端开发

后端开发主要负责数据管理、服务发布、业务逻辑处理等，常用的技术包括：

ArcGIS Server REST API: ArcGIS Server 提供的 RESTful API，用于访问和管理 ArcGIS Server 的各种服务，例如地图服务、要素服务、地理处理服务等。
ArcGIS API for Python: Esri 官方提供的 Python API，可以用于自动化 ArcGIS Enterprise 的管理任务，例如服务发布、数据管理、用户管理等。
Server Object Extensions (SOEs) / Server Object Interceptors (SOIs): ArcGIS Server 的扩展机制，允许开发者自定义服务器端的业务逻辑，例如自定义地理处理工具、数据访问控制等。SOEs 用于扩展服务的功能，SOIs 用于拦截和修改服务请求和响应。
编程语言: 例如 Python, Java, .NET 等，用于开发后端业务逻辑和 SOEs/SOIs。
数据库: 例如关系型数据库 (PostgreSQL, SQL Server, Oracle) 或 NoSQL 数据库，用于存储和管理地理信息数据和业务数据。

6.4.3 Web GIS 开发实践：基于 ArcGIS API for JavaScript 的应用

以下我们将通过一个简单的代码示例，演示如何使用 ArcGIS API for JavaScript 构建一个基本的 Web GIS 应用，该应用将在地图上显示一个要素图层，并实现简单的查询功能。

6.4.3.1 环境准备

ArcGIS Enterprise 部署: 确保已经部署了 ArcGIS Enterprise 环境，并拥有发布和访问服务的权限。
Web 服务器: 需要一个 Web 服务器来托管 Web GIS 应用，例如 Apache 或 Nginx。
文本编辑器或 IDE: 用于编写 HTML, CSS, JavaScript 代码，例如 VS Code, Sublime Text, WebStorm 等。
ArcGIS API for JavaScript: 可以通过 CDN 引入，也可以下载到本地部署。

6.4.3.2 代码示例

以下是一个简单的 HTML 文件 (index.html)，包含了 Web GIS 应用的基本结构和 JavaScript 代码：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>ArcGIS API for JavaScript - Basic Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://js.arcgis.com/4.28/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Search",
            "esri/widgets/Legend",
            "esri/widgets/LayerList",
            "esri/widgets/Expand",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol"
        ], function(Map, MapView, FeatureLayer, Search, Legend, LayerList, Expand, Graphic, Point, SimpleMarkerSymbol) {
            // 创建地图
            const map = new Map({
                basemap: "topo-vector" // 底图
            });
            // 创建地图视图
            const view = new MapView({
                container: "viewDiv", // 地图容器
                map: map,
                center: [-118.2437, 34.0522], // 中心点 (经度, 纬度) - 洛杉矶
                zoom: 12
            });
            // 创建要素图层 (假设你的 ArcGIS Enterprise 上发布了一个名为 "Cities" 的要素服务)
            const citiesLayer = new FeatureLayer({
                url: "https://your_arcgis_enterprise_portal_url/server/rest/services/Hosted/Cities/FeatureServer/0", // 替换为你的要素服务 URL
                outFields: ["*"], // 查询返回所有字段
                popupTemplate: { // 弹出窗口模板
                    title: "{CITY_NAME}",
                    content: "人口: {POPULATION}<br>所属州: {STATE_NAME}"
                }
            });
            map.add(citiesLayer); // 将要素图层添加到地图
            // 创建搜索部件
            const searchWidget = new Search({
                view: view,
                sources: [{
                    layer: citiesLayer,
                    searchFields: ["CITY_NAME", "STATE_NAME"], // 搜索字段
                    displayField: "CITY_NAME", // 显示字段
                    exactMatch: false,
                    outFields: ["*"],
                    placeholder: "搜索城市",
                    maxResults: 6,
                    maxSuggestions: 6,
                    popupTemplate: citiesLayer.popupTemplate
                }]
            });
            view.ui.add(searchWidget, {
                position: "top-right"
            });
            // 创建图例部件
            const legend = new Legend({
                view: view,
                layerInfos: [{
                    layer: citiesLayer,
                    title: "城市"
                }]
            });
            const legendExpand = new Expand({
                view: view,
                content: legend,
                expandIconClass: "esri-icon-legend",
                group: "top-left"
            });
            view.ui.add(legendExpand, "top-left");
            // 创建图层列表部件
            const layerList = new LayerList({
                view: view
            });
            const layerListExpand = new Expand({
                view: view,
                content: layerList,
                expandIconClass: "esri-icon-layers",
                group: "top-left"
            });
            view.ui.add(layerListExpand, "top-left");
            // 示例：添加一个 Graphic 到地图上
            const point = new Point({
                longitude: -118.2437,
                latitude: 34.0522
            });
            const markerSymbol = new SimpleMarkerSymbol({
                color: [226, 119, 40],
                outline: {
                    color: [255, 255, 255],
                    width: 2
                }
            });
            const pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol
            });
            view.graphics.add(pointGraphic);
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

6.4.3.3 代码详解

引入 ArcGIS API for JavaScript:
```
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.28/"></script>
```
这两行代码分别引入了 ArcGIS API for JavaScript 的 CSS 样式文件和 JavaScript 库文件，这里使用的是 CDN 方式引入。你可以根据需要选择合适的版本和引入方式。

require() 函数:


require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/widgets/Search",
    "esri/widgets/Legend",
    "esri/widgets/LayerList",
    "esri/widgets/Expand",
    "esri/Graphic",
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol"
], function(Map, MapView, FeatureLayer, Search, Legend, LayerList, Expand, Graphic, Point, SimpleMarkerSymbol) {
    // 代码逻辑
});

require() 函数是 ArcGIS API for JavaScript 的模块加载器，它用于加载所需的模块，并在加载完成后执行回调函数。回调函数的参数顺序与模块名称顺序一致。

创建地图 (esri/Map):
```
const map = new Map({
    basemap: "topo-vector" // 底图
});
```
创建 Map 对象，并设置底图为 "topo-vector" (矢量地形图)。ArcGIS API for JavaScript 提供了多种底图选项，例如 "streets-vector", "satellite", "hybrid" 等。
创建地图视图 (esri/views/MapView):
```
const view = new MapView({
    container: "viewDiv", // 地图容器
    map: map,
    center: [-118.2437, 34.0522], // 中心点 (经度, 纬度) - 洛杉矶
    zoom: 12
});
```
创建 MapView 对象，用于显示地图。container 属性指定地图容器为 HTML 中 ID 为 "viewDiv" 的 div 元素。map 属性关联之前创建的 Map 对象。center 和 zoom 属性设置地图的初始中心点和缩放级别。

创建要素图层 (esri/layers/FeatureLayer):


const citiesLayer = new FeatureLayer({
    url: "https://your_arcgis_enterprise_portal_url/server/rest/services/Hosted/Cities/FeatureServer/0", // 替换为你的要素服务 URL
    outFields: ["*"], // 查询返回所有字段
    popupTemplate: { // 弹出窗口模板
        title: "{CITY_NAME}",
        content: "人口: {POPULATION}<br>所属州: {STATE_NAME}"
    }
});
map.add(citiesLayer); // 将要素图层添加到地图

创建 FeatureLayer 对象，用于加载和显示要素服务。url 属性需要替换为你在 ArcGIS Enterprise 上发布的要素服务的 URL。outFields: ["*"] 表示查询返回所有字段。popupTemplate 定义了要素点击时弹出的信息窗口的模板，使用了字段别名 {CITY_NAME}, {POPULATION}, {STATE_NAME}。最后使用 map.add(citiesLayer) 将要素图层添加到地图。

创建搜索部件 (esri/widgets/Search):
```
const searchWidget = new Search({
    view: view,
    sources: [{
        layer: citiesLayer,
        searchFields: ["CITY_NAME", "STATE_NAME"], // 搜索字段
        displayField: "CITY_NAME", // 显示字段
        // ... 其他搜索配置
        popupTemplate: citiesLayer.popupTemplate
    }]
});
view.ui.add(searchWidget, {
    position: "top-right"
});
```
创建 Search 部件，用于实现地图搜索功能。sources 属性配置搜索的数据源，这里使用之前创建的 citiesLayer 作为数据源。searchFields 指定搜索的字段，displayField 指定搜索结果列表中显示的字段。popupTemplate 关联要素图层的弹出窗口模板，使得搜索结果点击后也能显示信息窗口。最后使用 view.ui.add(searchWidget, { position: "top-right" }) 将搜索部件添加到地图视图的右上角。
创建图例和图层列表部件 (esri/widgets/Legend, esri/widgets/LayerList):

代码中创建了 Legend (图例) 和 LayerList (图层列表) 部件，并使用 Expand 部件将它们折叠起来，放置在地图的左上角。这些部件可以方便用户了解地图图例和控制图层显示。
添加 Graphic 示例 (esri/Graphic, esri/geometry/Point, esri/symbols/SimpleMarkerSymbol):
```
const point = new Point({
    longitude: -118.2437,
    latitude: 34.0522
});
const markerSymbol = new SimpleMarkerSymbol({
    color: [226, 119, 40],
    outline: {
        color: [255, 255, 255],
        width: 2
    }
});
const pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol
});
view.graphics.add(pointGraphic);
```
这段代码演示了如何使用 Graphic 对象在地图上添加图形元素。首先创建 Point 对象表示点几何，然后创建 SimpleMarkerSymbol 对象定义点的符号样式，最后创建 Graphic 对象关联几何和符号，并使用 view.graphics.add(pointGraphic) 将图形添加到地图视图的图形图层上。

6.4.3.4 运行示例

将 index.html 文件保存到 Web 服务器的目录下。
修改 index.html 文件中的要素服务 URL (citiesLayer.url) 为你自己的 ArcGIS Enterprise 环境中发布的要素服务 URL。
通过浏览器访问 Web 服务器上的 index.html 文件，即可看到运行的 Web GIS 应用。

6.4.4 ArcGIS Enterprise 与 Web GIS 开发进阶

除了上述基础的 Web GIS 应用开发，ArcGIS Enterprise 和 Web GIS 开发还涉及更高级的主题和技术，例如：

地理处理服务开发与应用: 使用 ArcGIS Pro 或 ArcGIS Desktop 构建地理处理模型，并发布为地理处理服务，供 Web 应用调用，实现复杂的空间分析功能。
自定义 Web 应用开发框架: 基于 ArcGIS API for JavaScript，结合前端框架 (React, Vue, Angular) 和构建工具，构建更复杂、可维护性更高的 Web GIS 应用。
Server Object Extensions (SOEs) / Server Object Interceptors (SOIs) 开发: 使用 .NET 或 Java 开发 SOEs/SOIs，扩展 ArcGIS Server 的功能，实现自定义业务逻辑和数据访问控制。
Web GIS 应用性能优化: 针对 Web GIS 应用的性能瓶颈进行优化，例如地图服务缓存、数据压缩、前端代码优化等，提升用户体验。
Web GIS 安全性设计: 设计和实施 Web GIS 应用的安全策略，例如用户认证、权限管理、数据加密等，保障系统和数据的安全。
移动 Web GIS 开发: 构建响应式 Web GIS 应用，使其能够在移动设备上良好地运行，或者开发基于 ArcGIS Runtime SDK 的原生移动 GIS 应用，并与 ArcGIS Enterprise 集成。
三维 Web GIS 开发: 使用 ArcGIS API for JavaScript 的 3D 功能或 ArcGIS API for Python 发布 3D 场景服务，构建三维 Web GIS 应用，实现三维可视化和分析。

6.4.5 总结

ArcGIS Enterprise 和 Web GIS 开发是 ArcGIS 开发与定制领域的重要组成部分。本文从 Web GIS 的概念和优势出发，介绍了 ArcGIS Enterprise 的核心组件和在 Web GIS 开发中的作用，并结合代码示例详细讲解了基于 ArcGIS API for JavaScript 构建 Web GIS 应用的基本方法。同时，本文还简要介绍了 Web GIS 开发的技术栈和进阶主题，为读者深入学习和实践 ArcGIS Enterprise 与 Web GIS 开发提供了指导。掌握 ArcGIS Enterprise 和 Web GIS 开发技术，可以帮助开发者构建强大的 Web GIS 应用，为各行业领域的地理信息应用提供更便捷、高效的解决方案。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/201-arcgis%E5%9C%B0%E7%90%86%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E5%BA%94%E7%94%A8%E6%95%99%E7%A8%8B

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流