您的位置：首页 > Web前端 > JavaScript

ArcGIS For JavaScript API Add KML Layer(添加KML层)————（十八）

2013-01-11 13:53 405 查看

描述：此示例演示如何添加一个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>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航