ArcGIS JavaScript API 용 KML 레이 어 추가 (KML 레이 어 추가) -- (18)

설명: 이 예제 에 서 는 ArcGIS API JavaScript 응용 프로그램 에 KML 파일 을 추가 하 는 방법 을 보 여 줍 니 다.KML 파일 (KML 또는 KMZ) 을 추가 하 는 것 은 간단 합 니 다. 관련 API 모듈 을 요구 합 니 다.
dojo.require("esri.layers.KMLLayer");
   그리고 KML 그림 을 만들어 서 맵 에 추가 합 니 다:
var kmlUrl = 'http://dl.dropbox.com/u/2654618/kml/Wyoming.kml?breakerbreaker';
var kml = new esri.layers.KMLLayer(kmlUrl);
map.addLayer(kml);
   주의: KML 층 은 공개 적 으로 방문 해 야 합 니 다.
 
KMLayer 클래스 는 한 층 의 KML 파일 (KML, KMZ) 을 만 드 는 데 사 용 됩 니 다.KML 은 지리 적 특징 을 나타 내 는 XML 기반 파일 형식 입 니 다.KML 파일 (KML 또는 KMZ) 지 도 를 추가 하려 면 KML 이 제공 해 야 하 는 공개 방문 URL 을 통 해 제공 해 야 합 니 다.로 컬 위탁 관리 나 방화벽 내부 에서 지원 되 지 않 는 KML 파일KML 파일 접근
KML 파일 에서 기능 층 으로 저 장 됩 니 다. 점, 선, 다각형 의 기하학 적 모양 입 니 다.특색 있 는 기하학 적 KML 파일 의 특정 기하학 적 기능 층 만 생 성 한다 면.getLayers () 방법 은 KML 파일 을 되 돌려 줍 니 다.다음 코드 세 션 에 서 는 KML 그래 픽 을 가 져 오 는 방법 을 보 여 줍 니 다. 그래 픽, 범 위 를 검사 한 다음 새로운 정도 로 크기 를 조정 합 니 다.
  
  
var kmlExtent, layers = kml.getLayers(); //       
dojo.forEach(layers, function(lyr) {
    if(lyr.graphics && lyr.graphics.length > 0) {
      var lyrExtent = esri.geometry.geographicToWebMercator(
        esri.graphicsExtent(lyr.graphics) //             。            0,   null
      );

      if(lobals.kmlExtent) {
        kmlExtent = kmlExtent.union(lyrExtent);
      } else {
        kmlExtent = lyrExtent;
      }
  });
  map.setExtent(kmlExtent); //                      

지원 기능  다음 KML 의 특징 은 버 전 2.4 를 지원 하 는 것 입 니 다.          •랜 드 마크          •새로 고침 매개 변수 가 없 는 네트워크 링크          •지면 커버          •폴 더          •아이콘 포함          •HTML 기능 설명    버 전 2.5 에 다음 네트워크 링크 새로 고침 을 지원 하 는 파 라 메 터 를 추가 합 니 다.          •Extended Data 특징 속성          •시간.    다음 기능 은 지원 되 지 않 습 니 다: • 화면 덮어 쓰기          •지역 화 KML          •내부 네트워크 연결 지역
 
참조 링크:http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/layers_kml
온라인 데모:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/layers_kml/index.html
참조 API:http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#kmllayer
 
 참조 코드 는 다음 과 같 습 니 다.
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Add KML Layer</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { margin: 0; padding: 0; }
  #meta {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 300px;
    height: 100px;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading { 
    float: right;
  }
</style>

<script>
	var dojoConfig = { 
		parseOnLoad: true 	//   
	};
</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
  //    
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.KMLLayer");
  
  var map;

  function init() {
    map = new esri.Map("map", { 
      basemap: "topo", //        。        :"streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".
      center: [-108.663, 42.68],	//      
      zoom: 6	//     
    });

    var kmlUrl = "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";
    var kml = new esri.layers.KMLLayer(kmlUrl); 	//   kml 
    map.addLayer(kml);
    dojo.connect(kml, "onLoad", function() {
      dojo.style(dojo.byId("loading"), "display", "none");
    });
  }
  dojo.ready(init);
  
</script>
</head>

<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"  data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
  <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> 
    <div id="meta">
      <span id="loading"><img src="images/loading_black.gif" /></span>
      <h3>  KML  <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/kmllayer.htm">KMLLayer</a></h3>
      <br />
                KML  ,          
      ESRI      。
    <div>
  </div>
</div>
</body>
</html>


효 과 는 다음 과 같 습 니 다:
 
 
 
 

좋은 웹페이지 즐겨찾기