OpenAI로 ArcGIS 웹 앱 향상
코딩 경험과 경력을 쌓아오면서(솔직히 말하면 평생 동안) 저는 배운 내용과 알고 있는 내용을 연결할 수 있는 재미있는 방법을 끊임없이 찾고 있습니다. 가장 최근에는 매핑 애플리케이션에 약간의 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 지도를 볼 수 있습니다. 기능은 확대/축소 및 패닝으로 제한되어 있으므로 계속 진행해 보세요!
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이 있습니다.
결론
이러한 단계를 수행하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Demystifying JavaScript : 그것이하는 일과 중요한 이유
Apr 09, 2025 am 12:07 AM
JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
JavaScript의 진화 : 현재 동향과 미래 전망
Apr 10, 2025 am 09:33 AM
JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
JavaScript 엔진 : 구현 비교
Apr 13, 2025 am 12:05 AM
각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.
JavaScript : 웹 언어의 다양성 탐색
Apr 11, 2025 am 12:01 AM
JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.
Python vs. JavaScript : 학습 곡선 및 사용 편의성
Apr 16, 2025 am 12:12 AM
Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법
Apr 11, 2025 am 08:22 AM
이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.
C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지
Apr 14, 2025 am 12:05 AM
C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.
JavaScript를 어떻게 설치합니까?
Apr 05, 2025 am 12:16 AM
JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.
