arcgis api for js 동적 그래 픽 트 리 생 성 및 제어

기능 약술
arcgis api for javascript 3.31 동적 그래 픽 을 불 러 온 후 동적 으로 그래 픽 정보 와 하위 그래 픽 정 보 를 얻 고 동적 으로 HTML 구 조 를 생 성 합 니 다. 。
그래 픽 트 리 생 성 전체 사고

HTML 구조 만 들 기

자신의 그림 을 만 드 는 방법

지도 속 그림 가 져 오기

그림 의 하위 그림 가 져 오기

동적 생 성 HTML 구조

그림 부분 전체 코드 가 져 오기

생 성 을 위 한 구조 바 인 딩 이벤트

전체 코드

코드 를 언제 실행 합 니까

HTML 구조
먼저 동적 으로 생 성 된 HTML 구조 템 플 릿 을 확정 하여 다음 js 동적 생 성 에 참고 하도록 합 니 다.

<div class="outside-layer-group">
  <input type="checkbox">-  1
  
  <div class="inside-layer-group">
    <div class="layer">
      <input type="checkbox">-   1
    div>
    <div class="layer">
      <input type="checkbox">-   2
    div>
  div>
div>

자신의 그림 을 만 드 는 방법
밑그림 등 요 소 를 고려 하여 모든 그림 층 이 그림 층 제 어 를 해 야 하 는 것 은 아 닙 니 다. 그림 층 을 선별 하기 위해 사용자 정의 그림 층 추가 방법 을 만들어 야 합 니 다.프로 토 타 입 체인 을 통 해 사용자 정의 방법 (그림 추가 만 보 여주 고 그림 사상 유사 삭제)

//          
  Map.prototype.myLayers = [];
//          
  Map.prototype.myAddLayers = function (layerList) {
    this.addLayers(layerList); // arcgis api       
    this.myLayers.push(...layerList); //              
  }

지도 에서 도 층 가 져 오기
먼저 그림 트 리 를 만 드 는 방법 입 니 다.

function buildTree() { }

동적 으로 HTML 구조 용기 (그림 트 리 컨트롤 러 를 설치 할 용기) 를 가 져 오고 용 기 를 비 웁 니 다 (그림 트 리 업데이트 준비). map 의 그림 을 가 져 오고 동적 으로 구 조 를 생 성하 여 용기 에 하나씩 추가 합 니 다.

buildTree() 방법 에 다음 과 같은 코드 를 추가 합 니 다

//     
document.querySelector(".layer-tree").innerHTML = "";
//   map    (            )
const layers = map.myLayers;
//       
layers.forEach((item) => {
  //     div  (  map    )
  let newOutNode = document.createElement("div");
  newOutNode.className = "outside-layer-group";
  newOutNode.id = item.id;
  newOutNode.innerHTML = `${item.id}" type="checkbox" ${item.visible ? "checked" : ''}>-${item.id}
${item.id}" class="inside-layer-group">
`;
  //          div    
  document.querySelector('.layer-tree').appendChild(newOutNode);
})

그림 의 하위 그림 가 져 오기
동적 그림 층 의 layerInfos 속성 을 통 해 하위 그림 층 정 보 를 얻 을 수 있 습 니 다.layerInfos 속성 사용 전제: 그림 층 이 이미 로드 되 었 습 니 다. 그렇지 않 으 면 이 속성 은 빈 배열 입 니 다.layer.loaded 를 통 해 로드 완료 여 부 를 판단 합 니 다.

buildTree() 방법 에 다음 과 같은 코드 를 추가 합 니 다

//           ，item        item
if (item.loaded) {
  //          
  item.layerInfos.forEach((layer) => {
    //     div  (         )
    let newInnerNode = document.createElement('div');
    newInnerNode.id = layer.id;
    newInnerNode.className = "layer";
    newInnerNode.innerHTML = `${layer.id} type="checkbox" ${layer.defaultVisibility ? "checked" : ''}>-${layer.name}`;
    //                 ，     HTML  
    newOutNode.querySelector('.inside-layer-group').appendChild(newInnerNode);
  })
}

그림 부분 전체 코드 가 져 오기

function buildTree() {
  document.querySelector(".layer-tree").innerHTML = "";
  const layers = map.myLayers;
  layers.forEach((item) => {
    let newOutNode = document.createElement("div");
    newOutNode.className = "outside-layer-group";
    newOutNode.id = item.id;
    newOutNode.innerHTML = `${item.id}" type="checkbox" ${item.visible ? "checked" : ''}>-${item.id}
${item.id}" class="inside-layer-group">
`;
    if (item.loaded) {
      item.layerInfos.forEach((layer) => {
        let newInnerNode = document.createElement('div');
        newInnerNode.id = layer.id;
        newInnerNode.className = "layer";
        newInnerNode.innerHTML = `${layer.id} type="checkbox" ${layer.defaultVisibility ? "checked" : ''}>-${layer.name}`;
        newOutNode.querySelector('.inside-layer-group').appendChild(newInnerNode);
      })
    }
    document.querySelector('.layer-tree').appendChild(newOutNode);
  })
}

생 성 을 위 한 구조 바 인 딩 이벤트
귀속 사건 은 두 부분 으로 나 뉘 는데 dom 의 차 이 를 제외 하고 방법의 차이 에 주의해 야 한다.

map 에서 그림 의 표시 와 숨 김

그림 층 서브 그림 층 의 표시 와 숨 김

맵 의 그림 표시 와 숨 기기hide(), show() 방법 으로 제어 합 니 다.

buildTree() 방법 에 다음 과 같은 코드 를 추가 합 니 다

//         
const outNode = document.querySelectorAll('.outside-layer-group>input');
//              
outNode.addEventListener('click',function(){
  //         ，      checked  ，     ，      。
  outNode.forEach((item) => {
  	if(item.checked){
	  map.getLayer(item.id).show();
	} else {
	  map.getLayer(item.id).hide();
	}
  })
})

그림 층 서브 그림 층 의 표시 와 숨 김setVisibleLayers() 방법 으로 제어 하 다.

buildTree() 방법 에 다음 과 같은 코드 를 추가 합 니 다

//         
const innerNode = document.querySelectorAll('.outside-layer-group>input');
//              
innerNode.addEventListener('click',function(){
  //          ，            id  
  let visibleLayers = [];
  //      id，    id  
  let layerId = this.parentNode.parentNode.id;
  //         ，     checked  ，            ，          
  innerNode.forEach((item) => {
    if (item.checked) {
      visibleLayers.push(item.id);
    }
  })
  //   id         ，        
  map.getLayer(layerId).setVisibleLayers(visibleLayers);
})

전체 코드

function buildTree() {
  /*-------------------             -------------------*/
  document.querySelector(".layer-tree").innerHTML = "";
  const layers = map.myLayers;
  layers.forEach((item) => {
    let newOutNode = document.createElement("div");
    newOutNode.className = "outside-layer-group";
    newOutNode.id = item.id;
    newOutNode.innerHTML = `${item.id}" type="checkbox" ${item.visible ? "checked" : ''}>-${item.id}
${item.id}" class="inside-layer-group">
`;
    if (item.loaded) {
      item.layerInfos.forEach((layer) => {
        let newInnerNode = document.createElement('div');
        newInnerNode.id = layer.id;
        newInnerNode.className = "layer";
        newInnerNode.innerHTML = `${layer.id} type="checkbox" ${layer.defaultVisibility ? "checked" : ''}>-${layer.name}`;
        newOutNode.querySelector('.inside-layer-group').appendChild(newInnerNode);
      })
    }
    document.querySelector('.layer-tree').appendChild(newOutNode);
  })
  
  /*-------------------   DOM         -------------------*/
  const outNode = document.querySelectorAll('.outside-layer-group>input');
  outNode.addEventListener('click',function(){
    outNode.forEach((item) => {
  	  if(item.checked){
	    map.getLayer(item.id).show();
	  } else {
	    map.getLayer(item.id).hide();
	  }
    })
  })
  
  const innerNode = document.querySelectorAll('.outside-layer-group>input');
  innerNode.addEventListener('click',function(){
    let visibleLayers = [];
    let layerId = this.parentNode.parentNode.id;
    innerNode.forEach((item) => {
      if (item.checked) {
        visibleLayers.push(item.id);
      }
    })
    map.getLayer(layerId).setVisibleLayers(visibleLayers);
  })
}

코드 실행 시간
하위 그림 층 의 읽 기 는 그림 층 로 딩 이 끝 난 후에 진행 되 어야 하기 때문에 바 인 딩 이벤트 로 그림 층 로 딩 이 끝 난 것 을 감시 해 야 합 니 다.

//              ，       buildTree，     。
dojo.connect(layer, "onLoad", function () {
  buildTree();
});

끝나다
이로써 동적 그래 픽 트 리 는 기본적으로 완성 되 어 기본 기능 을 실현 할 수 있다.자신 이 필요 로 하 는 기능 에 따라 수정 할 수 있다.