ArcGIS api for javascript——图层-创建定制的切片图层类型的图层
Posted xiaotian_小天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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());
}
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 7 <title>Shapes and Symbols</title> 8 <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"> 9 <script type="text/javascript" src="http://www.tilesqh.cn/arcgis_js_api/library/1.5/arcgis/index.jsp"></script> 10 <script type="text/javascript"> 11 dojo.require("esri.map"); 12 dojo.require("esri.layers.agstiled"); 13 dojo.require("esri.toolbars.draw"); 14 15 16 var map, tb; 17 function init() { 18 map = new esri.Map("map"); 19 dojo.connect(map, "onLoad", initToolbar); 20 21 map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer")); 22 23 } 24 25 function initToolbar(map) { 26 27 tb = new esri.toolbars.Draw(map); 28 dojo.connect(tb, "onDrawEnd", addGraphic); 29 } 30 31 function addGraphic(geometry) { 32 alert(222); 33 var symbol = dojo.byId("symbol").value; 34 if (symbol) { 35 symbol = eval(symbol); 36 } 37 else { 38 var type = geometry.type; 39 if (type === "point" || type === "multipoint") { 40 symbol = tb.markerSymbol; 41 } 42 else if (type === "line" || type === "polyline") { 43 symbol = tb.lineSymbol; 44 } 45 else { 46 symbol = tb.fillSymbol; 47 } 48 } 49 50 map.graphics.add(new esri.Graphic(geometry, symbol)); 51 } 52 53 dojo.addOnLoad(init); 54 </script> 55 </head> 56 <body class="tundra"> 57 <button onclick="tb.activate(esri.toolbars.Draw.POINT);">Point</button> 58 <button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button> 59 <button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">Extent</button> 60 <button onclick="tb.activate(esri.toolbars.Draw.POLYLINE);">Polyline</button> 61 <button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);">Freehand Polyline</button> 62 <button onclick="tb.activate(esri.toolbars.Draw.POLYGON);">Polygon</button> 63 <button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);">Freehand Polygon</button> 64 <button onclick="tb.activate(esri.toolbars.Draw.LINE);">Line</button> 65 66 <button onclick="tb.deactivate()">Deactivate</button> 67 68 <select id="symbol"> 69 <option value="">--- Select Symbol ---</option> 70 <option value="">--- Simple Marker Symbols ---</option> 71 <option value="new esri.symbol.SimpleMarkerSymbol();">Default</option> 72 <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> 73 <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> 74 <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> 75 <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> 76 <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> 77 <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> 78 <option value="">--- Picture Marker Symbols ---</option> 79 <option value="">No Default</option> 80 <option value="new esri.symbol.PictureMarkerSymbol(‘http://www.esri.com/graphics/aexicon.jpg‘, 51, 51)">Simple Globe</option> 81 <option value="new esri.symbol.PictureMarkerSymbol(‘http://www.esri.com/graphics/aexicon.jpg‘, 25, 25).setAngle(315)">Simple Globe, 25x25, 315 angle</option> 82 <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> 83 84 <option value="">--- Simple Line Symbols ---</option> 85 <option value="new esri.symbol.SimpleLineSymbol();">Default</option> 86 <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NONE, new dojo.Color([255,0,0]), 1)">None</option> 87 <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2)">Dash Dot</option> 88 <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 3)">Dash</option> 89 <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255,0,0]), 5)">Dot</option> 90 <option value="">--- Cartographic Line Symbols ---</option> 91 <option value="new esri.symbol.CartographicLineSymbol()">Default</option> 92 <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10)">Solid</option> 93 <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> 94 <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> 95 <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> 96 <option value="">--- Simple Fill Symbols ---</option> 97 <option value="new esri.symbol.SimpleFillSymbol()">Default</option> 98 <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> 99 <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> 100 <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> 101 <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> 102 <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> 103 <option value="">--- Picture Fill Symbols ---</option> 104 <option value="">No Default</option> 105 <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> 106 <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> 107 <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> 108 <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> 109 </select> 110 111 <div id="map" style="width:1024px; height:512px; border:2px solid #000;" class="tundra"></div> 112 113 <br /> 114 Zoom Slider : 115 <input type="button" value="Hide" onclick="map.hideZoomSlider()" /> 116 <input type="button" value="Show" onclick="map.showZoomSlider()" /> 117 118 </body class="tundra"> 119 </html> 120 121 122 123
以上是关于ArcGIS api for javascript——图层-创建定制的切片图层类型的图层的主要内容，如果未能解决你的问题，请参考以下文章
arcgis api for javascript 4.10版本的本地部署
Map学习(arcgis api for javascript3.18)
ArcGIS API for JavaScript学习：第一个地图