（四）ArcGIS JS 加载切片地图服务

墨蓝 2021-09-14 16:26 501阅读 0赞

### 前言 ###

在上一篇博客讲述了怎么发布切片地图服务，在本章中介绍怎么在JavaScript加载切片地图服务。

### 准备 ###

*  在本地部署ArcGIS JS API/调用在线的API  
    
    
     *  [本地部署ArcGIS JS API][ArcGIS JS API]
 *  发布好的切片地图服务  
    
    
     *  [http://blog.csdn.net/idomyway/article/details/79250076][http_blog.csdn.net_idomyway_article_details_79250076]

### 思路 ###

1.  实例化地图对象
2.  实例化切片图层对象
3.  将切片图层对象添加到地图对象中

### 代码实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    </head>
    <body class="claro">
        <div id="map" style="height:800px;"></div>
        <script> require([ "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"], function(Map,ArcGISTiledMapServiceLayer) { var _Map=new Map(map); var _Dynamiclayer=new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/TiledService/MapServer"); _Map.addLayer(_Dynamiclayer); }); </script>
    </body>
    </html>

### 运行结果 ###

![这里写图片描述][SouthEast]

[ArcGIS JS API]: http://blog.csdn.net/idomyway/article/details/78648907
[http_blog.csdn.net_idomyway_article_details_79250076]: http://blog.csdn.net/idomyway/article/details/79250076
[SouthEast]: /images/20210726/61e1743cc4e14688b6fffed98967c512.png