Tingkatkan Apl Web ArcGIS Anda dengan OpenAI

Ketika saya telah berkembang melalui pengalaman pengekodan dan kerjaya saya (dan, jujurlah, sepanjang hidup), saya sentiasa mencari cara yang menyeronokkan untuk menghubungkan perkara yang saya pelajari dengan apa yang saya tahu. Terbaru, saya telah mencipta siri video untuk pembangun web yang ingin menambahkan sedikit AI pada aplikasi pemetaan mereka. Saya berseronok menguji pustaka AI yang berbeza dan menunjukkan kepada pembangun betapa mudahnya untuk melaksanakan perkara ini dalam apl mereka.

Hari ini, saya membimbing anda melalui tutorial yang menunjukkan cara menjana cerapan tentang lokasi dengan kod minimum. Kami akan menggunakan API OpenAI bersama ArcGIS Maps SDK untuk JavaScript, dengan pendekatan komponen web moden. Ini ialah cara yang mudah dan deklaratif untuk menambah ciri pemetaan yang berkuasa pada apl web anda. Jangan risau jika anda baru menggunakan salah satu daripada alatan ini — saya akan membimbing anda melalui setiap langkah.

Persediaan Projek AI ArcGIS JS SDK

Untuk bermula, kami akan menggunakan persediaan HTML, CSS dan JS yang mudah. Dalam Kod Visual Studio, saya akan mencipta fail HTML, CSS dan JS. Dalam HTML, saya akan menggunakan ! Masukkan pintasan untuk persediaan HTML asas. Saya juga pasti akan memautkan fail CSS dan JS saya. Begini rupanya setakat ini:

    
    
      
        <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>
      
      
      
    

Persediaan HTML

Memandangkan saya menggunakan ArcGIS Maps SDK untuk komponen JS, saya perlu memasukkan beberapa perpustakaan melalui CDN — Calcite Components dan ArcGIS JS SDK. Kami menggunakan CDN untuk kesederhanaan, tetapi untuk apl pengeluaran yang lebih besar, menggunakan npm adalah disyorkan.

    <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>

Sebelum menggunakan gaya peta ArcGIS, saya akan menyediakan pengesahan dengan kunci API ArcGIS saya. Nota: Jangan sekali-kali dedahkan kunci API anda secara terbuka di bahagian hadapan. Dalam persekitaran pengeluaran, anda harus menggunakan pelayan bahagian belakang untuk mengendalikan permintaan API dan mengurus kunci dengan selamat. Buat masa ini, saya akan memasukkan ini di atas semua teg skrip lain dalam fail HTML saya untuk kesederhanaan.

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

Kini, saya boleh menggunakan elemen tersuai untuk mewakili peta dan menetapkan peta asas, tengah (longitud, latitud) dan sifat zum mengikut keinginan saya.

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

Beginilah rupa fail HTML akhir:

    
    
      
        <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>
     
    

Persediaan CSS

Sekarang, ke CSS. Kami akan mulakan dengan menyasarkan elemen html, badan dan peta arcgis. Memandangkan saya mahu peta saya merangkumi keseluruhan halaman, saya akan memastikan tiada pelapik atau jidar yang dipratentukan dan ia mengambil 100% ketinggian dan lebar halaman.

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

Pada ketika ini, anda akan dapat melihat peta ArcGIS JS anda pada skrin. Kefungsian terhad kepada zum dan panning, jadi mari teruskan!

Persediaan JS

Sekarang, ke bahagian yang menyeronokkan — dapatkan peta kami untuk berinteraksi dengan OpenAI! Pertama, kami perlu menentukan kunci API OpenAI kami untuk pengesahan. Anda perlu mempunyai akaun dengan OpenAI untuk mendapatkannya. Selepas itu, kami akan mengambil peta dengan memilih elemen tersuai daripada DOM dan memberikannya kepada pembolehubah arcgisMap. Ini membolehkan kami memanipulasi peta secara pengaturcaraan.

    
    
      
        <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>
      
      
      
    

Bercakap tentang berinteraksi dengan peta kami, kami akan meneruskan dan menambah pendengar acara padanya. Kami akan menangkap peristiwa arcgisViewClick, yang dicetuskan apabila pengguna mengklik mana-mana sahaja pada peta. Ini akan membantu kami mendapatkan lokasi yang diklik dan menghantarnya ke OpenAI API.

Selepas pengguna mengklik, kami akan mengekstrak koordinat peta (mapPoint) daripada butiran acara dan menyimpannya dalam objek params. Ini memberi kami lokasi (longitud, latitud) tempat pengguna mengklik. Kami juga akan menggunakan outFields: "*" untuk meminta semua atribut untuk ciri yang diklik (anda boleh memperhalusi ini berdasarkan keperluan anda).

    <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>

Sekarang, mari kita teruskan untuk mendapatkan respons daripada OpenAI. Mula-mula, kami mentakrifkan gesaan yang akan dihantar ke API menggunakan longitud dan latitud daripada params.location. Seterusnya, kami akan memusnahkan tatasusunan pilihan daripada respons. Di sinilah OpenAI akan menyimpan kandungan yang dijana berdasarkan gesaan kami. Kami kemudian akan memanggil OpenAI API dengan fetch(), menghantar permintaan POST ke titik akhir sembang/penyelesaian. Pengepala termasuk Content-Type: application/json untuk menunjukkan kami menghantar dan menerima JSON, dan Kebenaran dengan token Pembawa untuk pengesahan.

Dalam badan, kami menentukan model (saya memilih model gpt-4o di sini). Kemudian, kami akan menghantar gesaan dalam medan mesej dengan peranan "pengguna", yang menunjukkan ia adalah input pengguna. Selepas membuat permintaan, kami menggunakan await untuk mendapatkan respons dan memanggil .json() untuk menghuraikannya.

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

Akhir sekali, kami menggunakan arcgisMap.popup.open() untuk memaparkan pop timbul di lokasi yang diklik. Longitud dan latitud ditetapkan daripada params.location, dan tajuk adalah apa sahaja yang anda pilih. Kandungan ditetapkan kepada teks yang dijana AI daripada pilihan[0].message.content, menunjukkan fakta pada peta.

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

Apl Akhir dalam Tindakan

Dengan semua yang disediakan, apl ini kini membenarkan pengguna mengklik di mana-mana sahaja pada peta. Berdasarkan klik mereka, ia menghantar koordinat ke API OpenAI. API menjana fakta yang berkaitan tentang lokasi tersebut, yang kemudiannya dipaparkan dalam pop timbul pada peta. Tetapi jangan berhenti di situ — berseronoklah dengannya! Anda boleh menukar gesaan yang dihantar ke OpenAI dengan mudah. Sebagai contoh, anda boleh meminta fakta yang menakutkan ?, yang lucu ?, atau memintanya untuk memasukkan emoji! ?

Untuk rujukan anda, berikut ialah CodePen dengan kod penuh.

Kesimpulan

Dengan mengikut langkah ini, kami telah berjaya mencipta aplikasi pemetaan dikuasakan AI. Berikut ialah imbasan pantas tentang perkara yang telah kami lakukan:

• Sediakan peta menggunakan ArcGIS Maps SDK untuk Komponen Web JavaScript melalui CDN.

• Menggunakan OpenAI API untuk menjana kandungan dinamik berdasarkan lokasi yang diklik.

• Memaparkan kandungan itu dalam pop timbul pada peta.

Dengan pendekatan ini, anda telah melihat betapa mudahnya untuk menyepadukan AI dan alatan pemetaan ke dalam aplikasi web anda. Perkara utama ialah ia memerlukan persediaan dan kod yang minimum untuk membina aplikasi berkuasa yang menggabungkan interaksi pengguna masa nyata dengan cerapan AI.

Jadi, sama ada anda mempertingkatkan projek pemetaan anda atau meneroka cara baharu untuk menggunakan AI, saya harap saya telah memberi inspirasi kepada anda hari ini. Saya ingin melihat sebarang ciptaan masa hadapan yang anda buat, jadi sila kongsikannya di sini atau dengan saya di sosial saya. Saya suka melihat hasil kerja anda!

---

Artikel ini ditulis oleh Courtney Yatteau, Peguambela Pembangun di Esri. Pendapat yang dinyatakan dalam artikel ini adalah semata-mata milik Courtney dan tidak semestinya mewakili pandangan, strategi atau pendapat majikannya. Jika anda mempunyai sebarang maklum balas, sila suka dan/atau komen. Selain itu, jika anda mempunyai sebarang soalan atau ulasan yang anda lebih suka hantar secara peribadi, anda boleh menghubungi Courtney melalui LinkedIn, X, Bluesky, atau e-mel. Jika anda sedang mempertimbangkan untuk menukar kerjaya, ingin menceburi bidang teknologi, atau ingin tahu bagaimana rasanya bekerja di Esri, maka sila nantikan siaran akan datang! Anda juga boleh menyemak halaman kerjaya Esri atau video ini untuk mendapatkan maklumat lanjut.

Atas ialah kandungan terperinci Tingkatkan Apl Web ArcGIS Anda dengan OpenAI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!