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

最新推荐文章于 2024-05-21 20:15:00 发布

X-rapido

最新推荐文章于 2024-05-21 20:15:00 发布

阅读量5.5k

点赞数

分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8493201

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

查看原文：http://www.ibloger.net/article/368.html

描述：此示例演示如何添加一个KML文件作为一个层到ArcGISAPIJavaScript应用程序。添加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>

效果如下：

X-rapido

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS For JavaScript API Add KML Layer(添加KML层)————（十八）

描述：此示例演示如何添加一个KML文件作为一个层到ArcGISAPI JavaScript应用程序。添加KML文件（KML或KMZ）很简单，要求有关API模块：dojo.require("esri.layers.KMLLayer"); 然后创建一个KML图层，将它添加到地图：var kmlUrl = 'http://dl.dropbox.com/u/2654618/
复制链接

扫一扫

专栏目录