ArcGIS 切片/瓦片的发布与加载

Sw1zzle

已于 2024-05-01 21:52:03 修改

阅读量1.3w

点赞数 29

CC 4.0 BY-SA版权

于 2022-05-26 02:49:51 首次发布

本文链接：https://blog.csdn.net/sw1zzle/article/details/124967155

ArcGIS Server 同时被 2 个专栏收录

1 篇文章

订阅专栏

ArcGIS API for JavaScript

1 篇文章

订阅专栏

本文介绍如何在ArcMap中处理遥感影像并发布为切片服务，同时讲解了如何利用ArcGIS for JavaScript在网页上加载这些切片。

本文介绍了遥感影像在Arcmap上的发布与切片，并在网页通过ArcGIS for JavaScript加载。

一、影像预处理

首先在ArcMap中打开下载好的影像，本文用的是山东省齐河县的遥感影像数据（tif格式）。
在这里插入图片描述
一般来说，类似下图中的行政区图像或者横幅的全球影像，如果在下载时没有设置 BackGround 背景 和 Nodata 空数据 为 Transparent 透明，都会有白（黑）底 / 白（黑）斑。如果不处理的话，等发布切好切片再加载到网页上就追悔莫及了。

那怎么知道下载的影像是否有白底呢？在Arcmap中，可以右键点击 Table of Contents（ps：下文的选项都会带上英文，照顾没有汉化的同学，汉化的同学也可以趁此学一学专业英语）中的 Layers，找到 Properties，在 Frame 数据框 中把背景设一个自己喜欢的颜色。

可以明显看到，影像是有白底的，添加到地图上便会把底图盖住。
在这里插入图片描述
右键点击图层，选择 Properties ，找到 Symbology 符号化 ，因为是白底(255,255,255)，如果是黑底则是(0,0,0)，选择 Display Background Value:(R,G,B)→(255,255,255) as No Color，就可以看到下图中白底消失了。接下来去掉刚才在数据框中设置的底色就可以发布了。
在这里插入图片描述

二、瓦片的发布

a. 在Arcmap菜单栏依次选择 File → Share as → Service…，看到以下界面下一步即可。

在这里插入图片描述
b. 选择连接并修改服务名称。

c. 发布服务到文件夹：选择现有的文件夹 or 创建新的文件夹。

在这里插入图片描述
d. 进入到Service Editor页面，除开Caching选项几乎都不用修改。

Caching中可以选择Dynamically from the data 动态缓存 或 Using tiles from a cache 缓存切片 ，动态切片即为加载服务时动态地读取，缓存切片则会切好切片在本地缓存。一般来说较轻量级的数据选择动态缓存，而高级别的影像选择提前切好切片缓存。

Cache Settings中的 Tiling Scheme 切片计划 没有太大影响，只是一些行业预设常用的计划。如果选择 Suggest 建议 ，LOD会自动变化到适合的区间，根据需求进行小调整即可。决定切片等级的因素是下面的LOD。

下面选择的 Levels of Detail （LOD） 也很好理解，如果是经常玩3A大作的同学肯定很熟悉LOD选项，即细节等级，在这里可以理解为瓦片等级。选择默认即可。其下面的 World 和 Building 便可以大约了解切片最低等级和最高等级的切片的图像大小和范围。

Estimated Cache Size可以大概估计切片的整体大小，瓦片等级越高，其缓存大小更大。如果结果相对于期望过大或过小都可以再次调节切片等级来改变切片缓存大小。

Build cache automatically when the service is published 当服务发布时自动生成缓存 和 Build cache manually after the service is published 在服务发布之后手动添加缓存 ，一般来说，可以选自动生成，省去再打开服务去进行切片操作。

在这里插入图片描述
e. 点击右上角的 Analyze ，如果没有显示 Error，即可以选择 Publish （Warings都是一些不影响操作和结果的小问题，有兴趣可以自己翻译了读一读），然后稍等一会儿。

在这里插入图片描述

f. 发布期间会显示正在复制文件到服务器之类的提示。显示这个弹窗即发布成功。注意看提示：切片服务已经可用并正在生成，且可以查询切片状态。

在这里插入图片描述
g. 浏览器打开 localhost:6080/arcgis/manager，找到刚才发布的服务，点击标题右边四个蓝色小方块儿（表示切片）的图标，即可查看切片状态。可以看到下图中，我所发布的切片服务正在处理最后三级。

三、瓦片的加载

1、一些需要注意的点

a. 在发布的服务界面，选择 Capabilities，复制Rest URL，即可在网页端调用刚才的服务。
在这里插入图片描述
b. 调用切片的接口是esri/layers/TileLayer，必要的参数只有url，下文会有代码。

c. 还记得刚才反复提到的 切片已可用且正在缓存 吗？如果你在缓存未完全完成的时候调用了该url，它会将现有的、已生成的较低等级的切片添加到TileLayer，如果将视窗缩放到更高等级，图像不会变化，并且控制台会疯狂报错，不用担心，是因为高等级的切片还未生成。

2、代码实现

全部复制进新建html，TileLayer.url改成自己服务的url，无需任何依赖，打开便可以运行。

date：May 25 2022 主要用了esri/layers/TileLayer，TileLayer用来容纳瓦片地图。
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>TileLayer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.23/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>

  <script>
    require(["esri/config","esri/Map", "esri/views/MapView","esri/layers/TileLayer"],(esriConfig,Map, MapView,TileLayer) => {
	
	  //记得改成自己的apiKey
      esriConfig.apiKey = "Your apiKey";

      const map = new Map({
        basemap: "arcgis-imagery" // Basemap layer service
      });

       //记得改成自己的切片服务的REST url
      const tileLayer = new TileLayer({
          url: "Your REST url of tile service",
          tile: "Qihe"
        });


      //记得改成自己想要的中心的经纬度坐标
      
      //如果不知道经纬度，可以看我第一篇文章 最后一节 “另附 ” 中获取经纬度的方法
      //https://blog.csdn.net/Sw1zzle/article/details/114901183?spm=1001.2014.3001.5501
      const view = new MapView({
        map: map,
        center: [Longitude, latitude], 
        zoom: 13, // Zoom level
        container: "viewDiv" // Div element
      });

      map.add(tileLayer);

    });
  </script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
</html>