ArcGIS api for javascript——圖層-創建定制的切片圖層類型的圖層

本文轉載自查看原文 2017-03-13 11:58 1412 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 arcgis api for javascript 學習（二）發布並調用地圖切片 ArcGIS創建tpk切片緩存 ArcGIS API For Javascript之動態圖層 GIS 地圖的圖層（切片/瓦片）概念 ArcGIS api for javascript——地圖配置-定制縮放動畫 JavaScript 數組對象切片 arcgis server地圖服務切片（10.4.1） Openlayer 3加載本地ArcGIS切片 ArcGIS API for JavaScript 入門教程[6] 再講數據——Map類之可操作圖層 python定制類(1)：__getitem__和slice切片