使用 OpenAI 增强您的 ArcGIS Web 应用程序

随着我在编码经验和职业生涯中的进步（老实说，在我的一生中），我一直在寻找有趣的方法来将我学到的知识与我所知道的联系起来。最近，我一直在为希望在地图应用程序中添加一些人工智能的 Web 开发人员创建一个视频系列。我很高兴测试不同的人工智能库并向开发人员展示在他们的应用程序中实现这些库是多么容易。

今天，我将指导您完成一个教程，该教程展示了如何使用最少的代码生成有关位置的见解。我们将使用 OpenAI API 以及 ArcGIS Maps SDK for JavaScript 和现代 Web 组件方法。这是一种向 Web 应用程序添加强大的地图功能的简单且声明性的方法。如果您不熟悉这些工具，请不要担心 - 我将指导您完成每个步骤。

AI ArcGIS JS SDK 项目设置

首先，我们将使用简单的 HTML、CSS 和 JS 设置。在 Visual Studio Code 中，我将创建 HTML、CSS 和 JS 文件。在 HTML 中，我将使用 ! 输入基本 HTML 设置的快捷方式。我还会确保链接我的 CSS 和 JS 文件。这是目前为止的样子：

    
    
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css">
        <script src="/scripts.js"></script>
      
      
      
    

HTML 设置

由于我使用的是 ArcGIS Maps SDK for JS 组件，因此我需要通过 CDN 添加几个库 — Calcite 组件和 ArcGIS JS SDK。为了简单起见，我们使用 CDN，但对于大型生产应用程序，建议使用 npm。

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

在使用 ArcGIS 地图样式之前，我将使用 ArcGIS API 密钥设置身份验证。 注意：切勿在前端公开暴露您的 API 密钥。在生产环境中，您应该使用后端服务器来安全地处理 API 请求和管理密钥。现在，为了简单起见，我将在 HTML 文件中将其包含在所有其他脚本标记之上。

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

现在，我可以使用自定义元素来表示地图，并根据自己的喜好设置底图、中心（经度、纬度）和缩放属性。

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

最终 HTML 文件应如下所示：

    
    
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OpenAI + ArcGIS Map</title>

        <script>
          var esriConfig = {
            apiKey: "yourKey"
          };
        </script>

        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css">
        <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">
        <link rel="stylesheet" href="/styles.css">

        <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
        <script src="https://js.arcgis.com/4.31/"></script>
        <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
      
     
        <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
          <arcgis-zoom position="top-left"></arcgis-zoom>
        </arcgis-map>
        <script src="/scripts.js"></script>
     
    

CSS 设置

现在，进入 CSS。我们将首先定位 html、body 和 arcgis-map 元素。由于我希望我的地图占据整个页面，因此我将确保没有预定义的填充或边距，并且它占据页面高度和宽度的 100%。

    html,
    body,
    arcgis-map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

此时，您将能够在屏幕上看到您的 ArcGIS JS 地图。功能仅限于缩放和平移，所以让我们继续！

JS设置

现在，进入有趣的部分 - 让我们的地图与 OpenAI 交互！首先，我们需要定义用于身份验证的 OpenAI API 密钥。您需要拥有 OpenAI 帐户才能获得它。之后，我们将通过从 DOM 中选择自定义元素并将其分配给 arcgisMap 变量来获取地图。这让我们能够以编程方式操作地图。

    
    
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css">
        <script src="/scripts.js"></script>
      
      
      
    

说到与我们的地图交互，我们将继续向其添加一个事件侦听器。我们将捕获 arcgisViewClick 事件，该事件在用户单击地图上的任意位置时触发。这将帮助我们获取点击的位置并将其发送到 OpenAI API。

用户点击后，我们将从事件详细信息中提取地图坐标（mapPoint）并将其存储在 params 对象中。这为我们提供了用户点击的位置（经度、纬度）。我们还将使用 outFields: "*" 来请求单击的功能的所有属性（您可以根据您的需要对其进行细化）。

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

现在，让我们继续获取 OpenAI 的响应。首先，我们使用 params.location 中的经度和纬度定义将发送到 API 的提示。接下来，我们将从响应中解构选择数组。这是 OpenAI 将根据我们的提示存储生成的内容的地方。然后，我们将使用 fetch() 调用 OpenAI API，向聊天/完成端点发送 POST 请求。标头包括 Content-Type: application/json 来指示我们正在发送和接收 JSON，以及使用不记名令牌进行身份验证的授权。

在正文中，我们指定模型（我在这里选择 gpt-4o 模型）。然后，我们将在消息字段中传递具有“用户”角色的提示，表明这是用户输入。发出请求后，我们使用await获取响应并调用.json()来解析它。

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

最后，我们使用 arcgisMap.popup.open() 在单击的位置显示弹出窗口。经度和纬度是从 params.location 设置的，标题是您选择的任何内容。内容设置为 AI 生成的choices[0].message.content 文本，在地图上显示事实。

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

最终应用程序的实际应用

一切设置完毕后，该应用程序现在允许用户单击地图上的任意位置。根据他们的点击，它将坐标发送到 OpenAI API。 API 生成有关该位置的相关事实，然后将其显示在地图上的弹出窗口中。但不要就此止步 — 享受其中的乐趣！您可以轻松更改发送到 OpenAI 的提示。例如，您可以要求提供一个可怕的事实？、一个有趣的事实？，甚至要求它包含表情符号！ ？

这里有一个包含完整代码的 CodePen，供您参考。

结论

通过遵循这些步骤，我们成功创建了一个人工智能驱动的地图应用程序。以下是我们所做工作的快速回顾：

• 通过 CDN 使用 ArcGIS Maps SDK for JavaScript Web Components 设置地图。

• 使用 OpenAI API 根据点击位置生成动态内容。

• 在地图上的弹出窗口中显示该内容。

通过这种方法，您已经看到将 AI 和地图工具集成到您的 Web 应用程序中是多么容易。关键要点是，它确实需要最少的设置和代码来构建功能强大的应用程序，将实时用户交互与人工智能见解相结合。

因此，无论您是在增强地图项目还是在探索使用人工智能的新方法，我希望我今天对您有所启发。我很高兴看到你未来的任何创作，所以请在这里或在我的社交媒体上与我分享。我很想看看你的作品！

---

本文由 Esri 开发者倡导者 Courtney Yatteau 撰写。本文表达的观点仅代表 Courtney 的观点，并不一定代表其雇主的观点、策略或意见。如果您有任何反馈，请随时点赞和/或评论。此外，如果您有任何问题或意见希望私下发送，您可以通过 LinkedIn、X、Bluesky、 或电子邮件联系 Courtney。如果您正在考虑转行、希望进入科技领域，或者对在 Esri 工作的感觉感到好奇，那么请继续关注未来的帖子！您还可以查看 Esri 的职业页面或此视频以了解更多信息。

以上是使用 OpenAI 增强您的 ArcGIS Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！