前端加载自己制作的栅格切片服务充当底图

本文链接：https://blog.csdn.net/gislaozhang/article/details/144854782

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