ArcGIS For JavaScript API Add KML Layer —— 添加KML层

描述:此示例演示如何添加一个KML文件作为一个层到ArcGIS API JavaScript应用程序。添加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层需要公开访问

KMLLayer类用于创建一个层上的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中添加支持以下网络链接刷新参数

  • ExtendedData特征属性

  • 时间

不支持以下功能:•屏幕覆盖

  • 区域化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>

效果如下:

ArcGIS For JavaScript API Add KML Layer —— 添加KML层


未经允许请勿转载:程序喵 » ArcGIS For JavaScript API Add KML Layer —— 添加KML层

点  赞 (0) 打  赏
分享到: