arcgis-api-for-js-의 레이어 만들기 및 레이어 추가 (1)

1. 리소스 참조

1.1 ArcGIS API for JavaScript 참조
먼저 ArcGIS API for JavaScript를 참조하고 script 태그를 사용합니다. 참고: 안에 있는 숫자는 버전 번호입니다. 버전이 업데이트될 때 해당하는 버전 번호를 바꾸면 됩니다.코드는 다음과 같습니다.

"https://js.arcgis.com/4.6/"</span>>

1.2 참조 스타일
태그 참조main.css 스타일시트, Esri 창의 작은 위젯과 구성 요소에 특정한 스타일을 포함합니다.코드는 다음과 같습니다.

"stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

2. 로드 모듈

2.1require() 함수
지도 대상을 만들기 전에, 우선 Require () 함수를 사용하여 지도 자원에 대한 사용을 완성해야 합니다.arcgis api for js는 esri/map(지도 만들기 사용), Geometry,Graphic,Symbols 등 많은 자원을 제공합니다. 자원을 제공하면 맵() 구조 함수를 사용하여 지도를 만들 수 있습니다.
2.2 DOM의 가용성 보장
Javascript 코드가 불러오지 않은 웹 페이지에 접근하는 오류를 피하기 위해 Dojo는 두 가지 방법을 제공합니다. 하나는 Ready 함수입니다. 리퀘스트 () 함수에 포함할 수 있으며 HTML 요소와 모듈을 불러온 후에 실행할 수 있습니다.2>또 하나는 Require () 함수에서 Dojo/dom Ready를 사용할 수 있습니다!(느낌표는domReady가 AMD 로더 플러그인임을 나타냅니다) 플러그 인.esri/Map - 지도를 만드는 코드별 esri/views/MapView 로드 - 2D로 지도를 볼 수 있는 코드 로드 Dojo/domReady -코드를 실행하기 전에 DOM을 사용할 수 있는지 확인합니다.코드는 다음과 같습니다.

require([
  <span class="hljs-string">"esri/Map"</span>,
  <span class="hljs-string">"esri/views/MapView"</span>,
  <span class="hljs-string">"dojo/domReady!"</span>
], function(Map, MapView) {
  //               
});

3. 2D 뷰 만들기

새로운 맵 맵을 만드는 것은 우리가 이전에 Require () 함수에서 인용한esri/Map 자원을 통해 이루어진 것입니다. Require () 함수 내부에서 구조 함수를 사용하여 새로운 맵 대상을 만듭니다. 맵 대상의 구조 함수에서 두 개의 인자를 받습니다. 첫 번째는 페이지에서 맵을 불러오는 div 탭의 id와 선택할 수 있는 인자가 있습니다.일부 지도의 마운트 옵션을 정의합니다. (예를 들어 지도에 표시된 도면층, 지도의 표시 중심, 표시의 급수 등을 제어할 수 있습니다.) 이 옵션은 일련의 키로 정의됩니다. 값이 맞는 JSON 대상입니다.
1>가장 흔히 볼 수 있는 옵션은basemap이다. 그는 바로 사전에 정의된 밑그림이다. 예를 들어satellite,hybrid,topo,gray,dark-gray,oceans,osm,national-geographic 등이다.2>zoom: 지도의 초기 축소 단계를 정의합니다.3>minZoom,maxZoom: 지도의 최소와 최대 범위의 축소 단계를 정의합니다.4>center: 지도를 처음 표시할 때의 중심점을 정의합니다. 이 점은 하나의 Point 대상입니다. 경도/위도 코드는 다음과 같습니다.

require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",  // container      ，         DOM     ，       div   id。
    map: map               //                 。
  });
});

여기서 MapView는 객체의 구조 함수를 전달하여 속성을 설정합니다.지도를 저장할 DOM 노드의 이름으로 container 속성을 설정합니다.이 맵 속성은 이전 단계에서 만든 맵의 대상을 참조합니다.
여기에는 2D 맵 보기와 SceneView (3D 맵 보기) 두 가지 보기가 있습니다.

4. 페이지 내용 정의

마지막 단계는 지도 용기를 불러오는 HTML 탭 div를 만드는 것입니다. 이 div에 id를 주어야 자바스크립트 코드가 접근할 수 있습니다.코드는 다음과 같습니다.

  
"viewDiv">

생성이 완료되면container에서 인용합니다.

5. 스타일 시트

스타일 탭의 탭을 사용하여 페이지의 내용head를 설정합니다.브라우저 창을 맵으로 채우려면 페이지에 다음 CSS 코드를 추가합니다.

마지막으로 여러분은 ArcGIS API for JavaScript 4.6을 활용하여 첫 번째 웹 응용 프로그램을 구축하였습니다. 효과는 아래 링크를 눌러 주십시오.http://jiegiser.win/arcgisAPI/creat2Dmap.html
마지막 전체 코드는 다음과 같습니다.

"utf-8">
"viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


"stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
"https://js.arcgis.com/4.6/"</span>>

require([
  <span class="hljs-string">"esri/Map"</span>,
  <span class="hljs-string">"esri/views/MapView"</span>,
  <span class="hljs-string">"dojo/domReady!"</span>
], function(Map, MapView){
  var map = new Map({
    basemap: <span class="hljs-string">"streets"</span>
  });
  var view = new MapView({
    container: <span class="hljs-string">"viewDiv"</span>,  // container      ，         DOM     ，       div   id。
    map: map,  //                 
    zoom: <span class="hljs-number">4</span>,  //           
    center: [<span class="hljs-number">15</span>, <span class="hljs-number">65</span>]  //              ，       Point  ，    /  
  });
});



  
"viewDiv">

오리지널 작품은 전재하지 마시오.위권은 반드시 추궁한다.