注意mapview的center属性和tilelayer.fullExtent的区别。
前者是设置mapview显示的中心点坐标，
const view = new MapView({
container: "viewDiv",
map: map,
center:[100,25]
});
后者是读取服务本身的四至范围，如果服务本身四至范围很大，例如下图fullExtent是全球范围，服务展示的地图内容区域很小，例如initialExtent范围很小，会存在浏览地图视图时很难找到服务内容的情况。
如果栅格切片服务研究区很小，建议使用center属性来控制显示位置。
如下：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to layers | Sample | ArcGIS API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/TileLayer", "esri/Basemap", "esri/layers/MapImageLayer"], (
Map,
MapView,
TileLayer,
Basemap,
MapImageLayer
) => {
const tilelayer = new TileLayer({
url: "https://******/server/rest/services/demo/MapServer",
// This property can be used to uniquely identify the layer
});
let basemap = new Basemap({
baseLayers: tilelayer
});
const map = new Map({
basemap: basemap,
});
// map.add(layer);
const view = new MapView({
container: "viewDiv",
map: map,
center:[100,25]
});
/*****************************************************************
* Layers are promises that resolve when loaded, or when all their
* properties may be accessed. Once the population layer has loaded,
* the view will animate to it's initial extent.
*****************************************************************/
/* view.when(() => {
tilelayer.when(() => {
view.goTo(tilelayer.fullExtent).catch((error) => {
console.error(error);
});
});
});*/
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
