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

三、ArcGIS API for JavaScript之地图与图层（2）

2017-07-18 21:05 513 查看
4、图形图层

图形图层GraphicsLayer是一种客户端图层，并不对应到服务器端的某个地图服务，用于在客户端展现各种数据，如绘制的图形，查询返回的结果等。GraphicsLayer在客户端数据表达方面有非常重要的作用，它可以根据各种请求动态在客户端显示一些符号化的几何对象–Graphic。

5、带地理参考的影像图层

MapImageLayer类表示带地理参考的影像图层，即在地图上增加带地理参考的图像或影像，地图将按照指定的地理范围显示该地理参考的图像，一个带地理参考的影像图层可以包含一个或者多个带地理参考的图像，而这些图像是MapImage类的实例，在实例化MapImage类时，最重要的是指定其地理范围以及图像的URL地址。例如：

require(["esri/layers/MapImage"],function(MapImage)
{
Var mi=new MapImage(
{
‘extent’:{'xmin':-8864908,'ymin':3885443,'xmax':-8762763,
'ymax':3976997,'spatialReference':{'wkid':3857}},'href':imageURL});
});


下面通过一个例子来演示如何使用这两个类，想要实现的功能是将用户拖入的图像显示在地图中，地理参考文件为TFW格式。

注：TFW文件为一个简单的ASCII文本，包含六行内容，分别是：X方向上的像素分辨率、X方向的旋转系数（通常为零），Y方向的旋转系数（通常为0），Y方向上的像素分辨率，图像左上角像素中心X坐标，图像左上角像素中心Y坐标。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.9/"></script>
<script type="text/javascript">
var map;
require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/MapImageLayer","esri/layers/MapImage","dojo/dom","dojo/on","dojo/domReady!"],
function (Map,ArcGISTiledMapServiceLayer,MapImageLayer,dom,on) {
var agoServiceURL="http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";
var agoLayer=new ArcGISTiledMapServiceLayer(agoServiceURL);
map=new Map("map",{center:[-122.488609,48.189605],zoom:6});
map.addLayer(agoLayer);
setupDropZone();
});
</script>
</head>
<body class="tundra">
<div id="map" style="position: relative;width:99%;height:100%;border:1px solid#000 ;">
</div>
</body>
</html>


在上面的代码中，首先在地图中加入了一个切片图层，然后调用setupDropZone函数，该函数用于设置实现文件拖放功能

function setupDropZone() {
var node=dom.byId("map");
on(node,"dragenter",function (evt){evt.preventDefault();});
on(node,"dragover",function (evt) {evt.preventDefault();});
on(node,"drop",handleDrop);
}


使用HTML5的文件API，可以将操作系统中的文件拖放到浏览器的指定区域。如果想实现拖拽，页面需要阻止浏览器的默认行为，即阻止浏览器默认将图片打开的行为，handleDrop函数将处理如何显示文件的功能

function handleDrop(evt) {
evt.preventDefault();
var files=evt.dataTransfer.files;
if(files.length!=2)
{
return;
}

var tfwFile;
if(files[0].name.indexOf(".tfw")!==-1)
{
pngFile=files[1];
tfwFile=files[0];
}
else
{
pngFile=files[0];
tfwFile=files[1];
}
readDataFromFile(pngFile,tfwFile);
}


在HTML5的文件API中有一个FileList接口，拖拽事件的dataTransfer.files包含传递的文件信息，通过它可以获取本地文件的列表信息。Files用于获取到拖拽文件的数组形式数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值，可以通过length属性获取文件数量。由于我们同时拖入两个文件，一个是图像文件，一个是地理范围的文件，因此需要根据扩展名来判断各自对应的文件类型，然后调用readDataFromFile函数来处理文件内容

function readDataFromFile(pngFile,tfwFile) {
var reader=new FileReader();
var layerName=pngFile.name.split('.')[0];
reader.onload=function () {
var newLineIdx=reader.result.result.indexOf("\n");
var lines=reader.split("\r\n");
var objectURL=URL.creatObjectURL(pngFile);
var img=new Image();
img.onload=function () {
var xminValue=parseFloat(lines[4]);
var xmaxValue=xminValue+lines[0]*img.width;
var ymaxValue=parseFloat(lines[5]);
var yminValue=ymaxValue+lines[3]*img.height;
var lyr=new MapImageLayer({id:layerName,visible:true});
var hrefValue=objectURL;
var image=new MapImage({
extent:{
xmin:xminValue,ymin:yminValue,
xmax:xminValue,ymax:ymaxValue,
spatialReference:{wkid:4326}
},href:hrefValue});
lyr.addImage(image);
map.addLayer(lyr);
var fullExtent=image.extent;
map.setExtent(fullExtent,true);
URL.revokeObjectURL(objectURL);
};
img.src=objectURL;
};
reader.readAsText(tfwFile);
}


在上述代码中，首先利用FileReader接口读取TFW文件的内容，文件加载结束后，将触发FileReader的onload事件，而其result属性可以用于访问文件数据。在FileReader中包括4个异步读取文件的选项：

readAsBinaryString(Blob|File),result属性将包含二进制字符串形式的数据。每个字节均由一个[0….255]范围内的整数显示。

readAsText(Blob|File,opt_encoding),result属性将包含文本字符串形式的数据，该字符串在默认的情况下采用“utf-8”编码，使用可选编码参数可指定其他格式。

readAsDataURL(Blob|File),result属性将包含编码为数据网址的数据

readAsArrayBuffer(Blob|File),result属性将包含ArrayBuffer对象形式的数据。

在读取了TFW文件之后，需要读取图像文件，这就需要使用URL对象。HTML5的文件API定义了一个全局的URL对象，其有两个方法：一个是createObjectURL方法，用于接收一个文件的引用，返回一个URL对象，用于通知浏览器创建和管理一个URL来加载文件；另一个是revokeObjectURL方法，用于销毁创建的URL，释放内存。为了计算图像的地理范围，除了TFW文件包含的信息之外，还需要图像的高度与宽度信息，而这需要借助Image对象来实现将Image对象的src属性设置为图像的地址。图像加载后将触发Image对象的onload事件。在该事件处理函数中，根据TFW文件的内容以及图像的高与宽，计算得到图像的地理范围，然后构造一个MapImage对象，并加入到一个MapImageLayer对象中，最后将该图层对象加入到地图中

6、KML图层

用来表示地理标记，若要在系统中使用KML文件，可以使用KMLLayer类来实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html,body,#map{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>

<script type="text/javascript">
var map;
require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/KMLLayer","dojo/domReady!"],function (Map,ArcGISTiledMapServiceLayer,KMLLayer) {
var agoServiceURL="http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";
var agoLayer=new ArcGISTiledMapServiceLayer(agoServiceURL);
map=new Map("map",{center:[-122.393,40.593],zoom:12});
map.addLayer(agoLayer);
var kmlURL="http://www.ci.redding.ca.us/KML/SacRiverTrail.kml";
var kml=new KMLLayer(kmlURL);
map.addLayer(kml);
})
</script>
</head>
<body class="tundra">
<div id="map"></div>
</body>
</html>


需要特别注意的是，KML文件不能存放在本地或防火墙内部，必须是通过互联网URL访问，原因是KMLLayer类依赖于部署在ArcGIS.com上的服务将实际的KML转换为JSON，转换为JSON后，便可以访问KML文件了，一个KML图层内部是由多个图层构成的，每一个图层都是一个FeatureLayer类的实例，通过其graphics属性便可以访问其要素，通过KMLLayer类的getLayers方法可以得到KML文件中包含的所有图层。

欢迎指正：）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript api arcgis
相关文章推荐
新的分享
章节导航