注意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>