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 ...

随机推荐

PIC kit3问题
1.通过pic kit3烧录pic16F1938的时候,pic kit3自动更新了firmware,但是仍然烧录不了pic16F1938,然后再次用pic kit3烧录pic18F45k80时,一直显 ...
Site Isolation Design Document
This design document covers technical information about how Site Isolation is built. For a general ...
史上最简单的在 Yii2.0 中将数据导出成 Excel
在 vendor/yiisoft/yii2/helpers/ 创建一个 Excel.php <?php namespace yii\helpers; class Excel{ ...
C语言的常用printf打印占位符%d, %u, %f, %s, %c, %o, %x
占位符含义及用法代码: #include <stdio.h> int main(int argc, char const *argv[]) { , b = -; // 默认10进制赋值 ...
BZOJ3413: 匹配（后缀自动机，Parent树，线段树合并）
Description Input 第一行包含一个整数n(≤100000). 第二行是长度为n的由0到9组成的字符串. 第三行是一个整数m. 接下来m≤5·10行,第i行是一个由0到9组成的字符串s, ...
Python开发的简单记事本
---恢复内容开始--- 主要是利用python 自带的tkinter 库程序的基于python3.0以上 ,各个平台都可以使用包括linux ,windows , ...
紫书例题 11-13 UVa 10735（混合图的欧拉回路）（最大流）
这道题写了两个多小时-- 首先讲一下怎么建模我们的目的是让所有点的出度等于入度那么我们可以把点分为两部分, 一部分出度大于入度, 一部分入度大于出度那么显然, 按照书里的思路,将边方向后,就相当 ...
50个经典Sql语句
50个经典Sql语句 --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Cours ...
使用JNA，让java调用原生代码
JNA定义: JNA:java Native Access,是SUN公司开发的基于JNI的框架.JNI使得Java可以调用原生的c或者c++代码. JNA与JNI(Java Native Interf ...
Beat 'Em Up Game Starter Kit (横版格斗游戏) cocos2d-x游戏源代码
浓缩精华.专注战斗! 游戏的本质是什么?界面?养成?NoNo! 游戏来源于对实战和比赛的模拟,所以它的本源就是对抗.就是战斗! 是挥洒热血的一种方式! 一个游戏最复杂最难做的是什么?UI?商城? ...

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

描述

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

随机推荐

热门专题