ArcGIS JS先添加動态圖層，再添加切片圖層後不顯示

場景：

         現在要在一個地圖上添加動态服務圖層和切片服務圖層，當建立好圖層之後，使用map.addLayer()方法，先把動态圖層加到地圖上，再把切片圖層加到地圖上，出現一個現象：隻能看到加載的動态圖層，切片圖層沒了。

現象：

先加載動态圖層，再加載切片圖層

所對應代碼：

<script>
    var map;
    require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer"
    ], function (Map, ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer) {
        map = new Map("mapDiv");
        //動态地圖服務圖層
        var dynamic = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        //切片地圖服務圖層
        var tiled = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

        //先添加動态地圖服務
        //If the first layer added to the map is an ArcGISDynamicMapServiceLayer,
        // the map will take on the projection of this layer.
        map.addLayer(dynamic);
        //再添加切片地圖服務
        map.addLayer(tiled);
    });
</script>
           

解決方法：

試了試，先添加切片圖層，再添加動态圖層，就沒有什麼問題了，兩個圖層都可以疊加到地圖上面。主要代碼如下：

<script>
    var map;
    require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer"
    ], function (Map, ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer) {
        map = new Map("mapDiv");
        //動态地圖服務圖層
        var dynamic = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        //切片地圖服務圖層
        var tiled = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

        // //先添加動态地圖服務
        // //If the first layer added to the map is an ArcGISDynamicMapServiceLayer,
        // // the map will take on the projection of this layer.
        // map.addLayer(dynamic);
        // //再添加切片地圖服務
        // map.addLayer(tiled);

        //改變順序，先添加切片圖層，再添加動态圖層
        map.addLayer(tiled);
        console.log(map.spatialReference);
        map.addLayer(dynamic);
    });
</script>
           

改變添加順序後的效果：

        現在可以看到兩個圖層已經疊起來了。到底是什麼原因呢？

原因分析：

        偶然找到一個官方的文檔(https://pan.baidu.com/s/1o8UhCxG)，裡面有這麼一段：

        緩存圖層指的就是切片圖層，如果先添加動态圖層，再添加切片圖層，由于切片圖層不會動态轉換空間參考，導緻地圖上隻有動态圖層；反之，如果先加載切片圖層，再加載動态圖層，由于動态圖層可以自動轉換空間參考，是以可以看到兩個圖層疊在了一起。