二、ArcGIS API for JavaScript之地图与图层（1）

来源：互联网发布：php array diff keys 编辑：程序博客网时间：2024/05/23 12:58

在 API for js中，图层的概念与传统意义上图层的概念大不相同，这里的图层对应的是一个地图资源，该地图资源中包含许多传统意义上的图层，这里大家需要区别开来。地图中包含不同来源、不同类型的地图资源，针对不同的地图资源，需要有不同的操作。例如地图切片图层的地图资源，虽然其包含了多个图层，但是由于提供的是事先生成的图片，因此不能进行图层操作，而对于动态地图图层的地图资源，可以显示或者隐藏其中的子图层。

有五种类型的图层，分别是地图切片图层、动态地图图层、图形图层、带地理参考的影像图层以及KML图层，分别对应于TiledMapServiceLayer、DynamicMapServiceLayer、GraphicsLayer、MapImageLayer与KMLayer。他们的基类是Layer类，它是一个抽象类，不能实例化。TiledMapServiceLayer、DynamicMapServiceLayer也是抽象类，没有构造函数，只能实例化他们的子类。

1、切片地图图层
切片图层的基类是TiledMapServiceLayer，其5个子类是ArcGISTiledMapServiceLayer、VETiledLayer、OpenStreetMapLayer、WMTSLayer、WebTiledLayer

a、ArcGISTiledMapServiceLayer类

ArcGISTiledMapServiceLayer类用于访问ArcGIS Server发布的地图切片服务。其fullExtent属性保存了地图服务的整个地理范围；initialExtent保存的是初始显示范围；spatialReference属性表示地图服务的空间参考系统；tileInfo包含地图切片信息；layerInfos属性中保存着地图服务中的图层及其可见性。
在实例化ArcGISTiledMapServiceLayer类时，可以指定显示级别，如下代码：

 require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],function (Map,ArcGISTiledMapServiceLayer) {            var map=new Map("mapDiv");            var agoServiceURL="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";            var agoLayer=new ArcGISTiledMapServiceLayer(agoServiceURL,{displayLevels:[0,1,2,3,4,5,6,7]});            map.addLayer(agoLayer);            //此处为你自己的服务地址            var myServiceURL="http://localhost:6080/arcgis/rest/services/6666/MyMapService/MapServer";            var myLayer=new ArcGISTiledMapServiceLayer(myServiceURL,{displayLevels:[8,9,10,11,12]});            map.addLayer(myLayer);        })

在上述代码中，第一个图层是ArcGIS Online的街道地图，使用的是0~7级别，第二个图层是自己发布的缓存服务，使用的是8~12级别。

b、VETiledLayer类
VETiledLayer类用于访问微软的Bing地图。包括影像，带注记的影像以及道路地图，下面代码演示了如何访问Bing地图，将其作为一个图层加入到自己的地图中。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>访问Bing地图</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">    <style>        html,body,#mapDiv        {            padding:0;            margin: 0;            height:100%;        }    </style>    <script src="http://js.arcgis.com/3.9/"></script>    <script>        var veTileLayer;        require(["esri/map","esri/virtualearth/VETiledLayer","dijit/form/Button","dojo/domReady!"],function (Map,VETiledLayer)        {            //以下是创建地图与加入地图的代码            var map=new Map("mapDiv");            veTileLayer=new VETiledLayer(                {                    bingMapkey:prompt("请输入您的Bing地图秘钥"),                    mapStyle:VETiledLayer.MAP_STYLE_AERIAL                }            );            map.addLayer(veTileLayer);        })    </script></head><body class="tundra"><div id="mapDiv"></div><div style="position: absolute;left: 650px;top:10px;z-index: 999;">    <button data-dojo-type="dijit/form/Button" onclick="veTileLayer.setMapStyle(VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">        Aerial with lables    </button>    <button data-dojo-type="dijit/form/Button" onclick="veTileLayer.setMapStyle(VETiledLayer.MAP_STYLE_ROAD)">Roads</button></div></body></html>

c、OpenStreetMapLayer类

OpenStreetMapLayer用于访问开放街道图（OSM）。该类的使用也非常简单，实例化后加入到地图里面即可。

<!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">    <style>        html,body,#mapDiv{            padding:0;            margin: 0;            height:100%;        }        #mapDiv_osmLayer img{            filter: url(filters.svg#grayscale)!important;            /*filter: gray !important;*/            filter:grayscale(1) !important;        }    </style>    <script src="http://js.arcgis.com/3.9/"></script>    <script>        require(["esri/map","esri/layers/OpenStreetMapLayer","dojo/domReady!"],function (Map,OpenStreetMapLayer) {            var map=new Map("mapDiv");            var osm=new OpenStreetMapLayer({id:'osmLayer'});            map.addLayer(osm)        });    </script></head><body class="tundra"><div id="mapDiv"></div></body></html>

d、WMTSLayer类

WMTSLayer用于访问符合OGC标准的WMTS服务。
该类的用法将在以后的文章中描述。

e、WebTiledLayer类

WebTiledLayer用于访问非ArcGIS Server发布的切片服务。其构造函数中的第一个参数是一个URL模板，其一般格式为”http://some.domain.com/${level}/${col}/${row}"，其中level表示缩放级别，column与row分别代表切片的列与行。第二个参数是一个可选对象。subDomains属性用于指定可获取地图切片的子域。使用子域可以绕过浏览器中同时访问一个域的请求最大值的限制，加速切片的获取。如果指定了subDomains，那么URL模板就应该增加${subDomain}占位符。
其代码如下：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/nihilo/nihilo.css">    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">    <style>        html,body,#map{            height:100%;            width:100%;            margin:0;            padding:0;        }    </style>    <script src="http://js.arcgis.com/3.9/"></script>    <script>        var map;        require([            "esri/map", "esri/layers/WebTiledLayer", "dojo/parser", "dojo/domReady!"        ], function (            Map, WebTiledLayer, parser        ) {            parser.parse();            map = new Map("map", {                center: [-89.985, 29.822],                zoom: 8            });            var nationalGeographic = new WebTiledLayer("http://${subDomain}.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/${level}/${row}/${col}", {                "subDomains": ["services", "server"]                });            map.addLayer(nationalGeographic);        });    </script></head><body class="nihilo"><div id="map"></div></body></html>

3、动态地图图层

当用户向服务器请求地图服务时，服务器根据接收到的参数调用底层服务，底层服务经过参数计算，实时生成像素点，这些像素点构成图片并返回到服务器，传送给客户端。DynamicMapServiceLayer类是所有动态地图图层的基类，但时只能实例化其子类：ArcGISDynamicMapServiceLayer、ArcGISImageServiceLayer与WMSLayer，分别用于访问ArcGIS Server发布的动态地图服务、影像服务以及其他符合WMS规范的地图服务。

a、ArcGISDynamicMapServiceLayer类
其代表动态图层，有很多种属性与方法来操作地图服务
setLayerDefinitions可以设置图层的定义，该定义可用于过滤指定图层的要素。
例如：

     var layerDefinitions=[];      layerDefinitions[0]=”POPULATION>5000000”;      layerDefinition[5]=”AREA>100000”;      dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);

上述代码中，对于第一个图层，只显示人口大于500万的要素，对于第六个图层，只显示面积大于10万的要素。
setVisibleLayers方法可用于设置显示哪些图层
例如：dynamicMapServiceLayer.setVisibleLayers([5,4,3]);
此外，可以使用ImageParameters类来组织这些参数，然后通过ArcGISDynamicMapServiceLayer类的构造函数来应用这些参数。例如：

 require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ImageParameters","dojo/parser","dojo/domReady!"],function (            Map,ArcGISDynamicMapServiceLayer,ImageParameters,parser) {            parser.parser();            map=new Map("map");            //使用ImageParameters设置地图服务的图层定义以及显示哪些图层             var imageParameters=new ImageParameters();             var layerDefs=[];             layerDefs[5]="STATE_NAME='Kansas'";             layerDefs[4]="STATE_NAME='Kansas'and POP2007>25000";             layerDefs[3]="STATE_NAME='Kansas'and POP2007>25000";             imageParameters.layerDefinitions=layerDefs;             //只显示序号为5，4,3,的图层            imageParameters.visibleLayers=[5,4,3];            imageParameters.transparent=true;            //使用上边的参数构造ArcGISDynamicMapServiceLayer类的实例            var dynamicMapServiceLayer=new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer",                {"imageParameters":imageParameters});            map.addLayer(dynamicMapServiceLayer);        });

b、ArcGISImageServiceLayer类
用来访问ArcGIS Server发布的影像服务，如果是切片的影像服务，也可以使用ArcGISTiledMapServiceLayer类来访问。除了显示之外，还可以通过影像服务实现许多功能，包括查询、动态处理、查看轮廓、预览每个栅格、下载和添加等。此外，对于影像服务，还可以：
影像，允许影像显示
目录，允许客户端在发布时打开镶嵌数据集
下载，允许在发布镶嵌数据集时下载栅格
编辑，允许客户端在发布镶嵌数据集时添加、删除或者更新由影像服务发布的栅格数据
测量，允许客户端通过ArcGIS中的测量工具使用此影像服务
元数据，允许客户端在发布镶嵌数据集时查看每个栅格的元数据信息
像素，允许API开发人员在发布镶嵌数据集时访问各个栅格的像素块
利用ArcGISTiledMapServiceLayer显示影像：

<!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"/>    <style>        html,body,#map{            height:100%;            wigth:100%;            margin:0;            padding:0;        }    </style>    <script src="http://js.arcgis.com/3.9/"></script>    <script>        var map;        require([            "esri/map", "esri/layers/ArcGISImageServiceLayer",            "esri/layers/ImageServiceParameters", "dojo/parser", "dojo/domReady!"        ], function (            Map, ArcGISImageServiceLayer,            ImageServiceParameters, parser        ) {            parser.parse();            map = new Map("map", {                center: [-79.40, 43.64]            });            var params = new ImageServiceParameters();            params.noData = 0;            params.format = "jpgpng";            var imageServiceLayer = new ArcGISImageServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer", {                imageServiceParameters: params            });            map.addLayer(imageServiceLayer);        });    </script></head><body><div id="map"></div></body></html>

对于影像服务，另一个重要的功能是提供服务器端的栅格函数，包括坡度、坡向、色彩映射表、NDVI、晕渲地貌、山体阴影、统计数据和拉伸等，不过不是同一数据类型的影像服务不能同时提供上述所有功能
栅格函数对应的类是RasterFunction,该类的functionName属性指定执行那个栅格函数，variableName属性指定方位角，arguments属性指定执行栅格函数时需要的参数，例如计算山体阴影时，需要指定方位角、高度、高程因子等
指定好栅格函数之后，将其赋给ImageServiceParameters对象的renderingRule属性，这适合用于加入影像服务时就执行栅格函数的情况，如果加入了影像服务之后再执行栅格函数，则将栅格函数赋给ArcGISImageServiceLayer类的renderingRule属性。下面演示一下如何使用栅格函数：

<!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{            height:100%;            width:100%;            margin:0;            padding:0;        }    </style>    <script src="http://js.arcgis.com/3.9/"></script>    <script>        var map;        require(["esri/map","esri/layers/ArcGISImageServiceLayer","esri/layers/ImageServiceParameters","esri/layers/RasterFunction","esri/geometry/Extent",        "dojo/parser","dojo/domReady!"],function (Map,ArcGISImageServiceLayer,ImageServiceParameters,RasterFunction,Extent,parser) {            parser.parse();            var initExtent=new Extent({"xmin":-13224484.260283869,"ymin":4295127.124240531,"xmax":-13105721.93623988,"ymax":4362783.124240531,            "spatialReference":{"wkid":102100}});            map=new Map("map",{extent:initExtent});            var rasterFunction=new RasterFunction();            rasterFunction.functionName="Hillshade";            rasterFunction.variableName="DEM";            var arguments={};            arguments.Azimuth=215.0;            arguments.Altitude=60.0;            arguments.ZFactor=30.3;            rasterFunction.arguments=arguments;            var params=new ImageServiceParameters();            params.renderringRule=rasterFunction;            var imageServiceLayer=new ArcGISImageServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/CaliforniaDEM/ImageServer",{                imageServicesParemeters:params            });            map.addLayer(imageServiceLayer);        })    </script></head><body><div id="map"></div></body></html>

欢迎指正

阅读全文

0 0