• 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%;  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>
    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    数据结构 课程安排 (拓扑排序)
    数据结构 通畅工程 (最小生成树)
    01 C#基础
    计算机组成原理——第一章 系统概述
    数据结构——第八章 排序 第九章 文件
    数据结构——第七章 查找
    字符编码(转)
    数据结构——第六章 图
    NodeJS加密算法(转)
    入职总结
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794670.html
Copyright © 2020-2023  润新知