스파스 공간 맵 목록 및 미리보기

EasyAR Spatial Map에는 일반적으로 많은 양의 공간 맵 데이터가 저장됩니다. 이 장에서는 Spatial Map 공간 맵 상세 정보 조회 및 페이지별 목록 조회 방법을 자세히 설명합니다.

EasyAR Web을 통한 스파스 맵 관리

시각화 인터페이스에서 시스템은 기본적으로 페이지별 목록 형식으로 스파스 맵을 표시하며, 최종 수정 시간 기준 역순으로 정렬됩니다(가장 최근에 수정된 항목이 맨 앞에 표시됨).

스파스 맵 목록

작업 경로: EasyAR Web [개발 센터] 로그인 -> [SpatialMap] -> 갤러리 선택 -> [관리] 클릭.

이 인터페이스에서 다음 작업을 수행할 수 있습니다:

목록 탐색: 페이지별로 표시되는 Spatial Map 공간 맵 컬렉션 확인.
상세 정보 진입: 그림의 버튼1 [관리] 를 클릭하여 맵 상세 페이지로 이동.
정확한 검색: 입력창2에서 다음 검색 방법을 지원합니다:
- 이름으로 검색: 시스템이 규칙(예: 애플리케이션 내 ID)에 따라 이미지를 명명한 경우 이름으로 빠르게 찾을 수 있음.
- MapId로 검색
- Label, GPS로 검색: 검색 Search API에서만 지원

Spatial Map 상세 정보

상세 페이지로 진입하면 Spatial Map 맵의 전체 속성을 확인할 수 있습니다. 포함 사항:

미리보기: 미리보기 이미지.
이름: Spatial Map 이름.
MapId: 시스템에서 생성된 고유 ID.
status 상태: 활성화 또는 비활성화.
Label 라벨: 검색을 용이하게 하는 사용자 정의 라벨, Search API 인터페이스 검색 지원
GPS: 공간의 GPS 위치, 사용자 정의 좌표계, Search API 인터페이스 검색 지원
사용자 정의 메타: 해당 Spatial Map 맵과 연결된 메타데이터(예: 모델 URL 등)

detail

API를 사용하여 Spatial Map 맵 목록 보기

자체 백엔드에 통합해야 하는 개발자의 경우 REST API를 사용한 관리가 권장됩니다.

참조 문서: Spatial Map 맵 목록 API 인터페이스

준비 목록

요청 전에 다음 리소스를 확보했는지 확인하세요(자세한 내용은 API 호출 준비 목록 참조):

SpatialMap AppId
API Key / Secret 또는 Token
클라우드 URL
- 중국 및 동남아 사용자 선택: https://armap-api.easyar.com
- 기타 사용자 선택: https://armap-api-na1.easyar.com

다음 placeholder를 실제 파라미터로 대체하고 curl 스크립트를 실행하세요

Your-URL → 실제 Cloud URL
Your-Token → 실제 API Key Authorization Token
Your-SpatialMap-AppId → 실제 SpatialMap appId

curl -X GET "https://armap-api-<cn1|na1>.easyar.com/maps?appId=<Your-SpatialMap-AppId>" \
  -H "Content-Type: application/json" \
  -H "Authorization: <Your-Token>"

Java 샘플 코드 다운로드

Java Samples Download

Maven 방식으로 프로젝트 가져오기

Step 1. 샘플 코드 ListMaps.java 열기

Step 2. 글로벌 변수 수정, 준비 목록의 인증 파라미터로 대체

SpatialMap AppId
API Key / API Secret
Cloud URL

ListMaps.java

import okhttp3.OkHttpClient;
import okhttp3.Response;
import org.json.JSONObject;
import java.io.IOException;
import java.util.Set;

public class ListMaps {

    private static final String CLOUD_URL       = "https://armap-api.easyar.com";
    private static final String APPID           = "--here is your SpatialMap AppId--";
    private static final String API_KEY         = "--here is your API Key--";
    private static final String API_SECRET      = "--here is your API Secret--";

    public String  toParam(JSONObject jso) {
        Set<String> keys = jso.keySet();
        StringBuffer sb   = new StringBuffer();
        for (String key : keys){
            sb.append(key);
            sb.append("=");
            sb.append(jso.getString(key));
            sb.append("&");
        }
        return sb.substring(0,sb.length()-1);
    }

    public String list(Auth auth) throws IOException {
        OkHttpClient client = new OkHttpClient.Builder().build();
        JSONObject params = new JSONObject();
        Auth.signParam(params, auth.getAppId(), auth.getApiKey(), auth.getApiSecret());
        okhttp3.Request request = new okhttp3.Request.Builder()
                .url(auth.getCloudURL() + "/maps?"+ toParam(params))
                .get()
                .build();
        Response response = client.newCall(request).execute();
        return response.body().string();
    }
    public static void main(String[] args) throws IOException{
        Auth accessInfo  =  new Auth(APPID, API_KEY, API_SECRET, CLOUD_URL);
        System.out.println(new ListMaps().list(accessInfo));
    }

}

Step 3. 메인 실행

1단계. 예제 코드를 listmap.js에 복사하고, 그 안의 token, appid 및 cloud url을 수정하세요

2단계. 실행

npm install axios
node listmap.js

페이지 분할 전략을 변경하려면, 페이지 분할 매개변수를 전달하세요

pageSize: 페이지 크기
pageNum: 페이지 번호

const axios = require('axios');

class MapService {
    constructor(baseURL, token, appId) {
        this.baseURL = baseURL;
        this.token = token;
        this.appId = appId;
        this.client = axios.create({
            baseURL: baseURL,
            headers: {
                'Authorization': token,  
                'Content-Type': 'application/json'
            }
        });
    }

    async listMaps(params = {}) {
        try {
            const queryParams = {
                ...params,
                appId: this.appId 
            };

            const response = await this.client.get('/maps', { params: queryParams });
            
            console.log('=== API 응답 ===');
            console.log('상태 코드:', response.status);
            console.log('요청 URL:', response.config.url);
            console.log('요청 헤더:', JSON.stringify(response.config.headers, null, 2));
            console.log('요청 매개변수:', JSON.stringify(queryParams, null, 2));
            console.log('응답 데이터:', JSON.stringify(response.data, null, 2));
            console.log('타임스탬프:', new Date().toISOString());
            
            return response.data;
        } catch (error) {
            console.error('=== API 오류 ===');
            if (error.response) {
                console.log('상태 코드:', error.response.status);
                console.log('오류 데이터:', error.response.data);
            } else {
                console.log('오류 메시지:', error.message);
            }
            throw error;
        }
    }
}

async function main() {
    const config = {
        baseURL: 'https://armap-api-<cn1|na1>.easyar.com',
        token: 'your_token_here', 
        appId: 'your_app_id_here' 
    };

    const mapService = new MapService(config.baseURL, config.token, config.appId);
    
    const queryParams = {
        pageNum: 1,
        pageSize: 10
    };

    try {
        const result = await mapService.listMaps(queryParams);
        console.log('\n=== 성공 ===');
    } catch (error) {
        console.log('\n=== 실패 ===');
    }
}

if (require.main === module) {
    main();
}

module.exports = MapService;

Step 1. 예제 코드를 listmap.php에 복사하고, 그 안의 Token, appId 그리고 Cloud URL을 수정하세요

Step 2. 실행

php listmap.php

페이지 매김 전략을 변경하려면, 페이지 매김 매개변수를 전달하세요

'pageSize': 페이지 크기
'pageNum': 페이지 번호

<?php
class MapService {
    private $baseURL;
    private $token;
    private $appId;
    
    public function __construct($baseURL, $token, $appId) {
        $this->baseURL = $baseURL;
        $this->token = $token;
        $this->appId = $appId;
    }
    
    public function listMaps($params = []) {
        $queryParams = array_merge([
            'appId' => $this->appId
        ], $params);
        
        $queryString = http_build_query($queryParams);
        $url = $this->baseURL . '/maps?' . $queryString;
        
        $ch = curl_init();
        
        curl_setopt_array($ch, [
            CURLOPT_URL => $url,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_HTTPHEADER => [
                'Authorization: ' . $this->token, 
                'Content-Type: application/json'
            ],
            CURLOPT_SSL_VERIFYPEER => false,
            CURLOPT_TIMEOUT => 30
        ]);
        
        $response = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        $error = curl_error($ch);
        
        echo "=== API Request ===" . PHP_EOL;
        echo "URL: " . $url . PHP_EOL;
        echo "Headers: Authorization: " . $this->token . PHP_EOL;
        echo "Query Params: " . json_encode($queryParams, JSON_PRETTY_PRINT) . PHP_EOL;
        
        curl_close($ch);
        
        echo "=== API Response ===" . PHP_EOL;
        echo "Status Code: " . $httpCode . PHP_EOL;
        echo "Timestamp: " . date('c') . PHP_EOL;
        
        if ($error) {
            echo "cURL Error: " . $error . PHP_EOL;
            return null;
        }
        
        $responseData = json_decode($response, true);
        echo "Response Data: " . json_encode($responseData, JSON_PRETTY_PRINT) . PHP_EOL;
        
        return $responseData;
    }
}

// Configure your API Key Token and Your Spatial Map AppId
$config = [
    'baseURL' => 'https://armap-api-<cn1|na1>.easyar.com',
    'token' => 'your_token_here',   
    'appId' => 'your_app_id_here'   
];

$mapService = new MapService($config['baseURL'], $config['token'], $config['appId']);

$queryParams = [
    'pageNum' => 1,
    'pageSize' => 5
];

$result = $mapService->listMaps($queryParams);

if ($result) {
    echo PHP_EOL . "=== Success ===" . PHP_EOL;
} else {
    echo PHP_EOL . "=== Failed ===" . PHP_EOL;
}
?>

새로운 관련 코드 파일 list_map.py 생성, 전역 변수 수정 후 실행

pip install requests
python list_map.py

import time
import hashlib
import requests

# --- 전역 설정 ---
API_KEY = "YOUR_API_KEY"
API_SECRET = "YOUR_API_SECRET"
APP_ID = "YOUR_APP_ID"
HOST = "https://armap-api-<cn1|na1>.easyar.com"

def main():
    timestamp = str(int(time.time() * 1000))
    
    # 1. 매개변수 준비
    params = {
        'apiKey': API_KEY,
        'appId': APP_ID,
        'timestamp': timestamp,
        'pageNum': '1',
        'pageSize': '10'
    }

    # 2. 서명 계산
    sorted_keys = sorted(params.keys())
    sign_str = "".join([f"{k}{params[k]}" for k in sorted_keys]) + API_SECRET
    signature = hashlib.sha256(sign_str.encode('utf-8')).hexdigest()

    # 3. 요청 생성
    url = f"{HOST}/maps"
    params['signature'] = signature

    print(f"Fetching Spatial Maps from {url}...")
    response = requests.get(url, params=params)
    print(f"Response: {response.text}")

if __name__ == "__main__":
    main()

새로운 관련 코드 파일 main.go를 생성하고, 전역 변수를 수정한 다음 실행합니다.

go run main.go

main.go:

package main

import (
  "crypto/sha256"
  "fmt"
  "io"
  "net/http"
  "sort"
  "strconv"
  "time"
)

var (
  ApiKey    = "YOUR_API_KEY"
  ApiSecret = "YOUR_API_SECRET"
  AppId     = "YOUR_APP_ID"
  Host      = "https://armap-api-<cn1|na1>.easyar.com"
)

func main() {
  ts := strconv.FormatInt(time.Now().UnixNano()/1e6, 10)
  params := map[string]string{
    "apiKey":    ApiKey,
    "appId":     AppId,
    "timestamp": ts,
    "pageNum":   "1",
    "pageSize":  "10",
  }

  // 1. Sort keys
  keys := make([]string, 0, len(params))
  for k := range params { keys = append(keys, k) }
  sort.Strings(keys)

  // 2. Build string and sign
  builder := ""
  for _, k := range keys { builder += k + params[k] }
  builder += ApiSecret

  signature := fmt.Sprintf("%x", sha256.Sum256([]byte(builder)))

  // 3. Request
  url := fmt.Sprintf("%s/maps?apiKey=%s&appId=%s&timestamp=%s&pageNum=%s&pageSize=%s&signature=%s", 
    Host, ApiKey, AppId, ts, params["pageNum"], params["pageSize"], signature)
  
  resp, _ := http.Get(url)
  defer resp.Body.Close()
  body, _ := io.ReadAll(resp.Body)
  fmt.Printf("Response: %s\n", string(body))
}

Cargo.toml에 reqwest, tokio, sha2, hex 의존성을 추가합니다.

cargo run을 실행합니다.

use sha2::{Sha256, Digest};
use std::collections::BTreeMap;
use std::time::{SystemTime, UNIX_EPOCH};

const API_KEY: &str = "YOUR_API_KEY";
const API_SECRET: &str = "YOUR_API_SECRET";
const APP_ID: &str = "YOUR_APP_ID";
const HOST: &str = "https://armap-api-<cn1|na1>.easyar.com";

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let ts = SystemTime::now().duration_since(UNIX_EPOCH)?.as_millis().to_string();

    // 1. 서명 구성 요소를 BTreeMap에 추가 (키로 정렬)
    let mut params = BTreeMap::new();
    params.insert("apiKey", API_KEY);
    params.insert("appId", APP_ID);
    params.insert("timestamp", &ts);
    params.insert("pageNum", "1");
    params.insert("pageSize", "10");

    // 2. 연결하고 시크릿 추가
    let mut sign_str = String::new();
    for (k, v) in &params {
        sign_str.push_str(k);
        sign_str.push_str(v);
    }
    sign_str.push_str(API_SECRET);
    
    let mut hasher = Sha256::new();
    hasher.update(sign_str.as_bytes());
    let signature = hex::encode(hasher.finalize());

    // 3. 요청
    let url = format!("{}/maps?apiKey={}&appId={}&timestamp={}&pageNum=1&pageSize=10&signature={}", 
                      HOST, API_KEY, APP_ID, ts, signature);
    
    let res = reqwest::get(url).await?;
    println!("Response: {}", res.text().await?);
    Ok(())
}

.NET 콘솔 프로젝트 만들기.

dotnet new console
dotnet run

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography;
using System.Text;
using System.Net.Http;

class Program {
    static string API_KEY = "YOUR_API_KEY";
    static string API_SECRET = "YOUR_API_SECRET";
    static string APP_ID = "YOUR_APP_ID";
    static string HOST = "https://armap-api-<cn1|na1>.easyar.com";

    static async System.Threading.Tasks.Task Main() {
        string timestamp = DateTimeOffset.Now.ToUnixTimeMilliseconds().ToString();

        // 1. 정렬된 매개변수 생성
        var dict = new SortedDictionary<string, string> {
            { "apiKey", API_KEY },
            { "appId", APP_ID },
            { "timestamp", timestamp },
            { "pageNum", "1" },
            { "pageSize", "10" }
        };

        // 2. 연결하고 Secret 추가
        StringBuilder sb = new StringBuilder();
        foreach (var kv in dict) sb.Append(kv.Key).Append(kv.Value);
        sb.Append(API_SECRET);
        
        string signature = Sha256(sb.ToString());

        // 3. GET 요청 실행
        using var client = new HttpClient();
        string query = string.Join("&", dict.Select(x => $"{x.Key}={x.Value}")) + $"&signature={signature}";
        string url = $"{HOST}/maps?{query}";
        
        var response = await client.GetAsync(url);
        Console.WriteLine($"결과: {await response.Content.ReadAsStringAsync()}");
    }

    static string Sha256(string str) {
        byte[] bytes = SHA256.HashData(Encoding.UTF8.GetBytes(str));
        return BitConverter.ToString(bytes).Replace("-", "").ToLower();
    }
}

실행 환경
- Unity 2020 LTS 이상 버전
- Scripting Backend: Mono 또는 IL2CPP 모두 가능
- API Compatibility Level: .NET Standard 2.1(권장)

단계 1: 이미지 파일 준비

Unity 프로젝트에서 디렉토리 생성:

Assets/
└── Scripts/
     └── ListMap.cs

Assets 디렉토리 이름에 따라
- 아래 예제 코드 ListMap.cs 복사

using System.Collections;
using UnityEngine;
using UnityEngine.Networking;

public class ListMap : MonoBehaviour
{
    [Header("Config")]
    public string apiBaseUrl = "https://armap-api-<cn1|na1>.easyar.com";
    public string authorizationToken = "YOUR API KEY AUTH TOKEN"; 
    public string spatialMapAppId = "SpatialMap-AppId"; 
    public int pageSize = 5; 
    public int pageNum  = 1; 
     
    private void Start()
    {
        StartCoroutine(ListMaps());
    }

    private IEnumerator ListMaps()
    {
     
        string url =
            $"{apiBaseUrl}/maps?appId={spatialMapAppId}&pageSize={pageSize}&pageNum={pageNum}";

        UnityWebRequest request = UnityWebRequest.Get(url);
        request.downloadHandler = new DownloadHandlerBuffer();

        request.SetRequestHeader("Content-Type", "application/json");
        request.SetRequestHeader("Authorization", authorizationToken);

        yield return request.SendWebRequest();

        if (request.result == UnityWebRequest.Result.Success)
        {
            Debug.Log("List maps success:");
            Debug.Log(request.downloadHandler.text);
        }
        else
        {
            Debug.LogError("List maps failed:");
            Debug.LogError(request.error);
            Debug.LogError(request.downloadHandler.text);
        }
    }
}

Unity Editor에서:
- 빈 GameObject 생성
- ListMap으로 이름 지정
- ListMap 스크립트를 해당 객체에 드래그

단계 3: 매개변수 구성(Inspector)

Inspector 패널에서 수정:
- Api Url
- Authorization Token
- Spatial Map App Id
- page size
- page num
이 몇 가지 항목만 수정하여 실행, 준비된 매개변수 목록을 입력

단계 4: 실행

Play 클릭
Console에서 결과 확인:
- 성공: JSON 반환(result 포함)
- 실패: HTTP / 오류 메시지

다음 주제: