arcgis for js 4.x 笔记（8）关于如何将arcgis发布的地图服务作为底图，并且能够控制比例尺

本文链接：https://blog.csdn.net/qq_25041297/article/details/107912150

如题，最近遇到这个问题表示十分郁闷，发布的地图服务作为底图却发现不能控制比例尺，给他设置初始zoom都没有用，后来在zhihu.geoscene.cn/上提问告诉了我得切片，这，果然我不是专业GIS就很尴尬

在这里插入图片描述

主要是你的发布的url得进行切片切片方式

-----来源 https://jingyan.baidu.com/article/ea24bc39e47b92da62b3310c.html
修改地图服务属性（修改为切片地图服务）

点击缓存->使用缓存中的切片->切片方案->设置缓存级别，如下图所示：

注：这个地方我设置的5个级别，可以看到缓存的大小是小于5M，当设置的级别越多时，缓存的大小基本成几何倍数增长。

图解ArcGIS Server之发布切片地图服务

在这里插入图片描述

但是中途遇到一个问题，有些服务设置切片换成也没用，
哪这个时候就应该使用TileLayer

TileLayer
require([“esri/layers/TileLayer”], function(TileLayer) { /* code goes here */ });
类： esri/layers/TileLayer
继承： TileLayer 层存取器
从以下版本开始： ArcGIS API for JavaScript 4.0
TileLayer允许您使用ArcGIS Server REST API公开的缓存地图服务，并将其作为图块图层添加到地图。缓存的服务从缓存访问磁贴，而不是动态渲染图像。由于它们已缓存，因此平铺图层的渲染速度比MapImageLayers快。要创建TileLayer的实例，您必须引用缓存的地图服务的URL。

require(["esri/layers/TileLayer"], function(TileLayer) {
  var layer = new TileLayer({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
  });
  // Add layer to map
});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Intro to MapView - Create a 2D map - 4.12</title>
		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
	<script src="https://js.arcgis.com/4.12/"></script>
	
		<script>
			require([
				"esri/Map",
				"esri/views/MapView",
				"esri/layers/TileLayer",
				"esri/layers/MapImageLayer",
				"esri/Basemap",
				"esri/widgets/BasemapToggle"
			], function(Map,
				MapView,
				MapImageLayer,
				TileLayer,
				Basemap, BasemapToggle) {

				var basemap = new Basemap({
					baseLayers: [
						new TileLayer({
							url: "你的url",
							title: "Basemap"
						})
					],
					title: "basemap",
					id: "basemap"
				});

				var map = new Map({
					basemap: basemap
				});
				// Create the MapView
				var view = new MapView({
					container: "viewDiv",
					map: map,
					center: [114.1462396600, 22.6498347100],
					zoom: 6
				
				});
				 
				 

			});
		</script>
	</head>

	<body>
		<div id="viewDiv"></div>
	</body>
</html>