使用 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 中，我将使用 ! + Enter 快捷键进行基本 HTML 设置。我还将确保链接我的 CSS 和 JS 文件。到目前为止，它看起来如下：

HTML 设置

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

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

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

最终的 HTML 文件应如下所示：

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 变量来获取地图。这让我们可以通过编程方式操作地图。

const openaiApiKey = "yourKey";
    const arcgisMap = document.querySelector("arcgis-map");

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

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

arcgisMap.addEventListener("arcgisViewClick", async event => {
      const params = {
        location: event.detail.mapPoint,
        outFields: "*"
      };
      //rest of the code from below will go here
    });

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

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

const prompt = `Give a fact about longitude: ${params.location.longitude}, latitude: ${params.location.latitude}.`;
    const { choices } = await (
      await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${openaiApiKey}`, // Use the API key
        },
        body: JSON.stringify({
          model: "gpt-4o", // Use the gpt-4o model
          messages: [{ role: "user", content: prompt }],
        }),
      })
    ).json();

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

arcgisMap.openPopup({
      longitude: params.location.longitude,
      latitude: params.location.latitude,
      title: "AI-Generated Fact",
      content: choices[0].message.content,
    });

最终应用程序运行

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

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

结论

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

通过这种方法，您已经看到了将 AI 和地图工具集成到 Web 应用程序中是多么容易。关键在于，只需极少的设置和代码即可构建将实时用户交互与 AI 洞察相结合的强大应用程序。

因此，无论您是在改进地图项目还是探索使用 AI 的新方法，我希望今天能给您带来启发。我很想看到您未来的任何创作，所以请在这里或在我的社交媒体上与我分享。我很想看到您的作品！