본문 바로 가기

공간정보교육센터

HOME >공간정보교육센터>이용안내>지도 Open API>튜토리얼
지도 Open API
튜토리얼
지도 open api 튜토리얼
FLEX API SILVERLIGHT API JAVASCRIPT API IOS ANDROID
flex 튜토리얼

1. 소개 (FLEX)

이 문서는 Flex를 사용하여 웹 사이트를 구현하는데 익숙한 사용자를 대상으로 하였습니다.
서울시 지도 API를 사용하기 위해서는 Flex Builder를 설치하여 개발환경을 구성해야 됩니다.
아래 설명은 Adobe Flex Builder 3를 설치 하는 방법과 샘플 프로젝트및 Flex 기초 튜토리얼을 제공합니다.
서울시 지도 샘플 프로젝트를 다운로드 받습니다.
( 다운로드 다운로드 : SeoulGISFlexProject.zip )


가. FLEX Builder 설치하기

  • 1. Flex Builder 다운받기 아래 주소를 들어 가셔서 파일을 다운로드 받으시기 바랍니다.

    URL : http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3

  • Download Adobe Flex Builder2캡쳐화면

  • Download Adobe Flex Builder2캡쳐화면

  • Download Adobe Flex Builder2캡쳐화면

  • 2. Flex Builder설치하기(FB3_win.exe를 실행 시킵니다.)

  • Download Adobe Flex Builder2캡쳐화면

  • 3. English를 선택하고 ok버튼을 클릭한다

  • Download Adobe Flex Builder2캡쳐화면

  • 4. Next를 클릭합니다

  • Download Adobe Flex Builder2캡쳐화면

  • 5. 라이센스에 동의를 한 후에 Next를 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 6. Next를 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 7. Next를 클릭합니다.(Flsah player9는 옛날 버전이므로 체크 해제)

  • Download Adobe Flex Builder2캡쳐화면

  • 8. Next를 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 9. Install를 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 10. 설치가 완료된 후 Done을 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면


나. ArcGis Flex 프로젝트 만들기

  •     ESRI 홈페이지에 프로젝트 만들기에 대한 동영상을 참조하세요


       http://resources.esri.com/help/9.3/arcgisserver/apis/flex/help/index.html Getting->started

       메뉴로 들어가시면 됩니다.

       http://resources.esri.com/help/9.3/arcgisserver/apis/flex/help/content/getting_started.htm


  • 1. Flex Builer를 실행 시킵니다.

  •     - 시작-프로그램-Adobe- Adobe FlexBuilder3을 클릭합니다.

  • 2.File->New->Flex ProJect를 선택합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 3. Project name에 FirstApp라고 입력합니다.(사용자가 원하시는 프로젝트명을 입력하시면됩니다.) 입력한후 Next 버튼을 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 4. Next를 클릭합니다

  • Download Adobe Flex Builder2캡쳐화면

  • 5. Library path탭을 선택한후 Add SWC버튼을 클릭합니다. Add SWC창에서 Browse버튼을 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • Download Adobe Flex Builder2캡쳐화면

  • 6. lib폴더 안에 있는 agslib-1.1-2009-01-21.swc를 선택합니다.(파일명은 버전별로 달라질수 있습니다.)

  • Download Adobe Flex Builder2캡쳐화면

  • 7. Library가 추가 된 것을 확인하고 Finish 버튼을 클릭합니다

  • Download Adobe Flex Builder2캡쳐화면

  • 8. 프로젝트가 생성됩니다. FirstApp.mxml파일에 아래 소스를 붙여 넣기 합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 9. Run->Run FirstApp를 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 10. 클릭을 하면 브라우저에서 지도를 확인할 수 있습니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 11. Esri사에서 제공하는 다양한 샘플을 사용하고 싶은신 사용자들은 arcgis_api_for_flex_1_2를 다운받으셔서 프로젝트에 다음과 같이 복사해 넣으시면 됩니다.

  •     -  FirstApp에 arcgis_api_for_flex_1_2\ArcGIS_Flex\samples\src를 복사해서 넣습니다.

        -  FirstApp>libs에 agslib-1.2-2009-05-15.swc를 복사해 넣습니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 12. 실행하고자 하는 mxml파일을 선택한후 마우스 오른쪽키를 클릭하고 Run Application를 클릭합니다.

  • Download Adobe Flex Builder2캡쳐화면

  • 13. ArcGIS API for Flex 1.2를 제공합니다.


    http://resources.esri.com/help/9.3/arcgisserver/apis/flex/apiref/index.html

  • 14. 소스 다운로드(ArcGis API for Flex library를 클릭)


    http://resources.esri.com/arcgisserver/apis/flex/