13 新增切片圖層
阿新 • • 發佈：2018-10-31
在之前的所有文章中，我們只是建立了一個預設的地圖，然後在此地圖上添加了一些鷹眼圖之類的控制元件，那在我們實際的專案需求中經常所用到的功能還是有很多的，比如今天我們要說的地圖新增切片圖層。
地圖新增切片圖層主要是用了“esri/layers/ArcGISTiledMapServiceLayer”這個元件，此元件使用的前提是我們已經在AarcGIS Server上釋出了一個切片地圖服務，通過此服務的REST URL來將此切片圖層新增到地圖之上，效果如下所示：
在此示例中我們建立了一個空地圖，然後在此地圖上新增我們的切片地圖。那這樣的做法還可以實現另外一種功能，就是建立自定義底圖。具體操作如下：
1 我們先建立一個空地圖，如下：
map = new Map("map", {
});在此建立過程中並沒有指定地圖的任何引數，包括底圖、中心點座標等，建立完一個空地圖之後我們建立一個切片圖層。
2 使用切片服務元件來建立切片圖層，並通過map的addLayer方法將它新增到地圖之上，如下：
var tiled = new ArcGISTiledMapServiceLayer(" https://xqwserver.arcgis.cn:6443/arcgis/rest/services/datademo02/MapServer"); map.addLayer(tiled);
程式碼中切片服務地址是我們釋出在Server上的REST URL地址，可以在ArcGIS Server——>服務——>功能下面找到，如圖：
3 至此，在地圖上新增切片圖層功能已經實現，各位小夥伴可以試試呢。完整程式碼如下所示：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Tiled map service</title> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="https://js.arcgis.com/3.25/"></script> <script> var map; require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/geometry/Point", "esri/SpatialReference", "dojo/domReady!"], function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference) { map = new Map("map", { }); var tiled = new ArcGISTiledMapServiceLayer(" https://xqwserver.arcgis.cn:6443/arcgis/rest/services/datademo02/MapServer"); map.addLayer(tiled); } ); </script> </head> <body> <div id="map"></div> </body> </html>