OpenAI로 ArcGIS 웹 앱 향상-JS 튜토리얼-php.cn

코딩 경험과 경력을 쌓아오면서(솔직히 말하면 평생 동안) 저는 배운 내용과 알고 있는 내용을 연결할 수 있는 재미있는 방법을 끊임없이 찾고 있습니다. 가장 최근에는 매핑 애플리케이션에 약간의 AI를 추가하려는 웹 개발자를 위한 비디오 시리즈를 제작했습니다. 저는 다양한 AI 라이브러리를 테스트하고 개발자에게 이를 앱에 구현하는 것이 얼마나 쉬운지 보여주며 즐거운 시간을 보냈습니다.

오늘은 최소한의 코드로 위치에 대한 통찰력을 생성하는 방법을 보여주는 튜토리얼을 안내하겠습니다. 우리는 최신 웹 구성 요소 접근 방식을 통해 ArcGIS Maps SDK for JavaScript와 함께 OpenAI API를 사용할 것입니다. 이는 웹 앱에 강력한 매핑 기능을 추가하는 간단하고 선언적인 방법입니다. 이 도구 중 하나를 처음 사용해도 걱정하지 마세요. 각 단계를 안내해 드리겠습니다.

AI ArcGIS JS SDK 프로젝트 설정

시작하려면 간단한 HTML, CSS, JS 설정을 사용하겠습니다. Visual Studio Code에서 HTML, CSS 및 JS 파일을 만듭니다. HTML에서는 ! 기본 HTML 설정에 대한 단축키를 입력하세요. 또한 CSS와 JS 파일을 반드시 연결하겠습니다. 지금까지의 모습은 다음과 같습니다.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <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>
      </head>
      <body>
      </body>
    </html>

로그인 후 복사

HTML 설정

JS용 ArcGIS Maps SDK 구성 요소를 사용하고 있으므로 CDN을 통해 방해석 구성 요소와 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 파일은 다음과 같습니다.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <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>
      </head>
     <body>
        <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>
     </body>
    </html>

로그인 후 복사

CSS 설정

이제 CSS를 살펴보겠습니다. html, body, arcgis-map 요소를 대상으로 지정하는 것부터 시작하겠습니다. 내 지도가 전체 페이지를 차지하길 원하므로 미리 정의된 패딩이나 여백이 없고 페이지 높이와 너비의 100%를 차지하도록 하겠습니다.

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

로그인 후 복사

이제 화면에서 ArcGIS JS 지도를 볼 수 있습니다. 기능은 확대/축소 및 패닝으로 제한되어 있으므로 계속 진행해 보세요!

Enhance Your ArcGIS Web App with OpenAI

JS 설정

이제 재미있는 부분으로 넘어가서 지도를 OpenAI와 상호작용하도록 하세요! 먼저 인증을 위한 OpenAI API 키를 정의해야 합니다. OpenAI 계정을 얻으려면 계정이 있어야 합니다. 그런 다음 DOM에서 사용자 정의 요소를 선택하고 이를 arcgisMap 변수에 할당하여 지도를 가져옵니다. 이를 통해 지도를 프로그래밍 방식으로 조작할 수 있습니다.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <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>
      </head>
      <body>
      </body>
    </html>

로그인 후 복사

지도와의 상호작용에 관해 이야기하자면, 이벤트 리스너를 지도에 추가하겠습니다. 사용자가 지도의 아무 곳이나 클릭하면 트리거되는 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 요청을 보냅니다. 헤더에는 JSON을 보내고 받고 있음을 나타내는 Content-Type: application/json과 인증을 위한 Bearer 토큰을 사용한 Authorization이 포함됩니다.

본문에서는 모델을 지정합니다(여기에서는 gpt-4o 모델을 선택합니다). 그런 다음 메시지 필드에 "사용자" 역할이 포함된 프롬프트를 전달하여 사용자 입력임을 나타냅니다. 요청을 한 후 대기를 사용하여 응답을 받고 .json()을 호출하여 구문 분석합니다.

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

로그인 후 복사

마지막으로 arcgisMap.popup.open()을 사용하여 클릭한 위치에 팝업을 표시합니다. 경도와 위도는 params.location에서 설정되며 제목은 원하는 대로 지정됩니다. 콘텐츠는Choices[0].message.content의 AI 생성 텍스트로 설정되어 지도에 사실을 표시합니다.

    <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이 있습니다.

Enhance Your ArcGIS Web App with OpenAI

결론

이러한 단계를 수행하여 AI 기반 매핑 애플리케이션을 성공적으로 만들었습니다. 다음은 우리가 수행한 작업을 간단히 요약한 것입니다.

CDN을 통해 ArcGIS Maps SDK for JavaScript Web Components를 사용하여 지도를 설정합니다.
OpenAI API를 사용하여 클릭한 위치를 기반으로 동적 콘텐츠를 생성했습니다.
해당 콘텐츠를 지도에 팝업으로 표시했습니다.

이 접근 방식을 사용하면 AI 및 매핑 도구를 웹 애플리케이션에 통합하는 것이 얼마나 쉬운지 확인하실 수 있습니다. 중요한 점은 실시간 사용자 상호 작용과 AI 통찰력을 결합하는 강력한 애플리케이션을 구축하려면 최소한의 설정과 코드만 필요하다는 것입니다.

그래서 여러분이 매핑 프로젝트를 향상시키거나 AI를 사용하는 새로운 방법을 모색 중이시라면 오늘 제가 여러분에게 영감을 주셨으면 좋겠습니다. 앞으로 당신이 만드는 어떤 창작물도 보고 싶습니다. 여기나 제 소셜 미디어에서 저와 공유해 주세요. 당신의 작품을 보고 싶어요!

이 기사는 Esri의 Developer Advocate인 Courtney Yatteau가 작성했습니다. 이 기사에 표현된 의견은 전적으로 Courtney의 의견이며 반드시 고용주의 견해, 전략 또는 의견을 대변하는 것은 아닙니다. 피드백이 있으시면 언제든지 좋아요 및/또는 댓글을 남겨주세요. 또한, 개인적으로 보내고 싶은 질문이나 의견이 있는 경우 LinkedIn, X, Bluesky, 또는 이메일을 통해 Courtney에게 문의할 수 있습니다. 경력 전환을 고려하고 있거나, 기술 분야에 종사하고 싶거나, Esri에서 일하는 것이 어떤 것인지 궁금하다면, 향후 게시물을 계속 지켜봐 주시기 바랍니다! 자세한 내용은 Esri의 채용 페이지나 이 동영상을 확인하세요.

위 내용은 OpenAI로 ArcGIS 웹 앱 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!