ArcGIS api for javascript——图层-创建定制的切片图层类型的图层

描述

本例展示了如何创建一个定制图层，该图层访问来自WEB服务器的地图切片。这种方式最通用的用途是检索ArcGIS Server 9.2切片缓存或web上的其他地图切片服务。尽管本例使用的是一个ArcGIS Server 9.3服务，这仅仅是为了示范。当从9.3和更高版本时，最好使用ArcGISTileMapServiceLayer。

首先，代码声明一个继承esri.layers.TiledMapServiceLayer的定制的图层my.PortlandTiledMapServiceLayer。

dojo.declare("my.PortlandTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {

...

});

接下来定义一个图层的构造函数。除空间参考和范围外，构造函数还定义了tileInfo对象。esri.layers.TileInfo包含关于缓存切片大小和比例的信息。对于ArcGIS Server服务，切片信息可以在服务的缓存目录里的缓存配置文件(conf.xml)找到，也能通过服务目录检索这个信息。对于不是ArcGIS Server切片的Web地图，需要从服务器管理员或发布切片的单位组织获得切片的大小，比例等等信息。

constructor: function() {

  this.spatialReference = new esri.SpatialReference(...);

  this.initialExtent = (this.fullExtent = new esri.geometry.Extent(...));

...

  this.tileInfo = new esri.layers.TileInfo(...);

...

  this.onLoad(this);

最后getTileUrl方法被执行，按等级，方和列参数生成一个切片的URL。本例中，行数和列数需要转换为十六进制的并补0来获得正确的URL。定制图层的URL语法取决于访问的切片缓存的结构。

getTileUrl: function(level, row, col) {

  return "..." +

    "L" + dojo.string.pad(level, 2, '0') + "/" +

    "R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +

    "C" + dojo.string.pad(col.toString(16), 8, '0') + "." +

    "png";

这个函数增加了图层到地图。

function init() {

  var map = new esri.Map("map");

  map.addLayer(new my.PortlandTiledMapServiceLayer());

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Shapes and Symbols</title>

     <link rel="stylesheet" type="text/css" href="http://www.tilesqh.cn/arcgis_js_api/library/1.5/arcgis/js/dojo/dijit/themes/tundra/tundra.css">

     <script type="text/javascript" src="http://www.tilesqh.cn/arcgis_js_api/library/1.5/arcgis/index.jsp"></script>

     <script type="text/javascript">

       dojo.require("esri.map");

       dojo.require("esri.layers.agstiled");

       dojo.require("esri.toolbars.draw");  

       var map, tb;

       function init() {

         map = new esri.Map("map");

         dojo.connect(map, "onLoad", initToolbar);

         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

       }

       function initToolbar(map) {

         tb = new esri.toolbars.Draw(map);

         dojo.connect(tb, "onDrawEnd", addGraphic);

       }

       function addGraphic(geometry) {

         alert(222);

         var symbol = dojo.byId("symbol").value;

         if (symbol) {

             symbol = eval(symbol);

         }

         else {

           var type = geometry.type;

           if (type === "point" || type === "multipoint") {

             symbol = tb.markerSymbol;

           }

           else if (type === "line" || type === "polyline") {

             symbol = tb.lineSymbol;

           }

           else {

             symbol = tb.fillSymbol;

           }

         }

         map.graphics.add(new esri.Graphic(geometry, symbol));

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     <button onclick="tb.activate(esri.toolbars.Draw.POINT);">Point</button>

     <button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button>

     <button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">Extent</button>

     <button onclick="tb.activate(esri.toolbars.Draw.POLYLINE);">Polyline</button>

     <button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);">Freehand Polyline</button>

     <button onclick="tb.activate(esri.toolbars.Draw.POLYGON);">Polygon</button>

     <button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);">Freehand Polygon</button>

     <button onclick="tb.activate(esri.toolbars.Draw.LINE);">Line</button>

     <button onclick="tb.deactivate()">Deactivate</button>

     <select id="symbol">

       <option value="">--- Select Symbol ---</option>

       <option value="">--- Simple Marker Symbols ---</option>

       <option value="new esri.symbol.SimpleMarkerSymbol();">Default</option>

       <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]))">Square</option>

       <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 50, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([0,0,0]), 2))">Cross, dash outline</option>

       <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 25, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([0,0,255]), 2))">X, dot outline</option>

       <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]))">Diamond</option>

       <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15)">Diamond, 15 angle</option>

       <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15).setOffset(0,5)">Diamond, 15 angle, 5 offset in Y</option>

       <option value="">--- Picture Marker Symbols ---</option>

       <option value="">No Default</option>

       <option value="new esri.symbol.PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 51)">Simple Globe</option>

       <option value="new esri.symbol.PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 25, 25).setAngle(315)">Simple Globe, 25x25, 315 angle</option>

       <option value="new esri.symbol.PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 25).setAngle(315).setOffset(10,0)">Simple Globe, 25x25, 315 angle, 10 offsetx</option>

       <option value="">--- Simple Line Symbols ---</option>

       <option value="new esri.symbol.SimpleLineSymbol();">Default</option>

       <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NONE, new dojo.Color([255,0,0]), 1)">None</option>

       <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2)">Dash Dot</option>

       <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 3)">Dash</option>

       <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255,0,0]), 5)">Dot</option>

       <option value="">--- Cartographic Line Symbols ---</option>

       <option value="new esri.symbol.CartographicLineSymbol()">Default</option>

       <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10)">Solid</option>

       <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_ROUND)">Solid, round cap, round join</option>

       <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_SQUARE, esri.symbol.CartographicLineSymbol.JOIN_BEVEL)">Solid, square cap, bevel join</option>

       <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_MITER, 5)">Solid, round cap, miter (5) join</option>

       <option value="">--- Simple Fill Symbols ---</option>

       <option value="new esri.symbol.SimpleFillSymbol()">Default</option>

       <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">None</option>

       <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]))">Solid</option>

       <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_HORIZONTAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Horizontal</option>

       <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_FORWARDDIAGONAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Forward diagonal</option>

       <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONALCROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Diagonal cross</option>

       <option value="">--- Picture Fill Symbols ---</option>

       <option value="">No Default</option>

       <option value="new esri.symbol.PictureFillSymbol('images/sand.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Sand</option>

       <option value="new esri.symbol.PictureFillSymbol('images/mangrove.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Mangrove</option>

       <option value="new esri.symbol.PictureFillSymbol('images/swamp.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Swamp</option>

       <option value="new esri.symbol.PictureFillSymbol('images/stiple.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Ordered 10% Stiple</option>

     </select>

     <div id="map" style="width:1024px; height:512px; border:2px solid #000;" class="tundra"></div>

     <br />

     Zoom Slider :

     <input type="button" value="Hide" onclick="map.hideZoomSlider()" />

     <input type="button" value="Show" onclick="map.showZoomSlider()" />

   </body class="tundra">

 </html>

ArcGIS api for javascript——图层-创建定制的切片图层类型的图层的更多相关文章

ArcGIS api for javascript——动态创建图层列表
描述本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏.动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层 ...
ArcGIS api for javascript——地图配置-定制缩放动画，定制缩放框
描述本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...
ArcGIS api for javascript——地图配置-定制缩放动画
描述本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...
ArcGIS api for javascript——地图配置-定制平移动画
描述本例展示了当用户点击平移按钮时如何定制地图的动画.panDuration和panRate是Dojo动画属性,可以分别确定动画的duration和帧刷新的rate.这些属性的单位都是毫秒,panD ...
ArcGIS api for javascript——地图配置-定制导航箭头
描述本例展示了如何为平移地图包括自定义的按钮.地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元.表格里剩余的单元放置标签为8个主要方向的缩写的按钮.每个按钮调用地图上不同的平移函数.例 ...
ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
创建ArcGIS API for JavaScript的第一个示例程序
原文:创建ArcGIS API for JavaScript的第一个示例程序在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...
arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...

随机推荐

如何把非服务程序（一般的应用程序）注册为Windows服务
非服务程序:不是标准的服务形式的程序吧,只是普通的应用程序. 1.要实现这个功能要用到微软提供的两个小工具“instsrv.exe”和“srvany.exe”,工具可以从微软下载安装工具包得到:htt ...
nginx的location 匹配的规则问题
正则解释: ~ #匹配一个正则匹配,区分大小写~* #匹配一个正则,不区分大小写^~ #普通字符匹配,如果该选择匹配不匹配别的选项,一般用来匹配目录= #精确匹配匹配案例:location = / ...
[SDOI2008]沙拉公主的困惑线性筛_欧拉函数_逆元_快速幂
Code: #include<cstdio> using namespace std; typedef long long ll; const int maxn=10000000+1; l ...
NOIp2018模拟赛三十二
继续挂成傻逼成绩:100+0+10(90)=110 A全场一眼题,C没取模挂八十分,然后没特判特殊情况又挂十分 A:[agc009b]tournament(太简单,咕了) B:[ATC2142]Bu ...
luogu P4430 小猴打架(prufer编码与Cayley定理）
题意 n个点问有多少种有顺序的连接方法把这些点连成一棵树. (n<=106) 题解了解有关prufer编码与Cayley定理的知识. 可知带标号的无根树有nn-2种.然后n-1条边有(n-1) ...
[USACO4.1]篱笆回路Fence Loops
题目:USACO Training 4.1(在官网上提交需加文件输入输出).洛谷P2738. 题目大意:给你一张图里的边集,让你求出这张图的最小环. 解题思路:求最小环很简单,用Floyd即可.最重要 ...
python基础5（文件操作，with语句）
打开文件 #使用 open f = open('路径',mode = '打开模式', encoding='编码') #可以使用with语句打开,不需要关闭,可以同时打开多个文件 with open(' ...
紫书例题8-19 UVa 12265 （扫描法+单调栈）
首先可以用扫描法处理出一个height数组, 来保存从当前行开始, 每一个格子可以向上延伸的最大长度. 这种"延伸"的问题用扫描法, 因为往往这个时候可以利用前一次的结果来更新当前 ...
input range 模拟滑块
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
so near yet so far
Dear little yang So beautiful boy as you, the most beautiful boy is you who i ever saw, like a sun , ...

ArcGIS api for javascript——图层-创建定制的切片图层类型的图层

描述

ArcGIS api for javascript——图层-创建定制的切片图层类型的图层的更多相关文章

随机推荐

热门专题