13 添加切片图层

        在之前的所有文章中，我们只是创建了一个默认的地图，然后在此地图上添加了一些鹰眼图之类的控件，那在我们实际的项目需求中经常所用到的功能还是有很多的，比如今天我们要说的地图添加切片图层。

       地图添加切片图层主要是用了“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>

 

posted @ 2018-09-27 10:57  X北辰北  阅读(232)  评论(0)  编辑  收藏  举报