arcgis api 4.X 加载天地图3D

在这里插入代码片

// 李瑶 创建其他地图地图（天地图） 2020.7.3
import * as esriLoader from "esri-loader";
/* 
***id: "天地图矢量"
***id: "天地图矢量注记"
***id: "天地图影像"
***id: "天地图影像注记" 
*/
export const createOtherMap3D = {}
createOtherMap3D.mapObj = {}
createOtherMap3D.view={}
createOtherMap3D.mapIsLoad = {}
createOtherMap3D.toCreateOtherMap = function (mapConfig) {
    esriLoader
        .loadModules(["esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/views/SceneView", "esri/WebMap", "esri/Map", "esri/layers/BaseTileLayer", "esri/request", "esri/widgets/ScaleBar"])
        .then(([SpatialReference, Extent, SceneView, WebMap, Map, BaseTileLayer, esriRequest, ScaleBar]) => {
            var MyTileLayer = BaseTileLayer.createSubclass({
                // properties of the custom tile layer
                properties: {
                    urlTemplate: null,
                },
                // override getTileUrl()
                // generate the tile url for a given level, row and column
                getTileUrl: function (level, row, col) {
                    return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
                },
                // override fetchTile() method to process the data returned
                // from the server.
                fetchTile: function (level, row, col, options) {
                    // call getTileUrl method to construct the Url for the image
                    // for given level, row and column
                    var url = this.getTileUrl(level, row, col);

                    // request for the tile based on the url returned from getTileUrl() method.
                    // the signal option ensures that obsolete requests are aborted.
                    return esriRequest(url, {
                        responseType: "image",
                        signal: options && options.signal
                    })
                        .then(function (response) {
                            // when esriRequest resolves successfully,
                            // process the image that is returned
                            var image = response.data;
                            var width = this.tileInfo.size[0];
                            var height = this.tileInfo.size[0];

                            // create a canvas with a filled rectangle
                            var canvas = document.createElement("canvas");
                            var context = canvas.getContext("2d");
                            canvas.width = width;
                            canvas.height = height;

                            // Apply the color provided the the layer to the fill rectangle
                            if (this.tint) {
                                context.fillStyle = this.tint.toCss();
                                context.fillRect(0, 0, width, height);
                                // apply multiply blend mode to canvas' fill color and the tile
                                // returned from the server to darken the tile
                                context.globalCompositeOperation = "multiply";
                            }
                            context.drawImage(image, 0, 0, width, height);
                            return canvas;
                        }.bind(this));
                }
            });
            var MapTileLayer = new MyTileLayer({
                //矢量墨卡托图层
                urlTemplate: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图密钥，自己去官网获取",
                title: "天地图矢量3D",
                id: "天地图矢量3D"
            });
            var AnoTileLayer = new MyTileLayer({
                //矢量注记层
                urlTemplate: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图密钥，自己去官网获取",
                title: "天地图矢量注记3D",
                id: "天地图矢量注记3D"
            });
            var MapImageTileLayer = new MyTileLayer({
                //影像图层
                urlTemplate: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图密钥，自己去官网获取",
                //tint: new Color("#004FBB"),
                title: "天地图影像3D",
                id: "天地图影像3D",
                visible: false
            });
            var AnoImageTileLayer = new MyTileLayer({
                //矢量注记层
                urlTemplate: "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图密钥，自己去官网获取",
                title: "天地图影像注记3D",
                id: "天地图影像注记3D",
                visible: false
            });

            // add the new instance of the custom tile layer the map
            var map = new WebMap({
                // layers: [MapImageTileLayer, AnoImageTileLayer],
                layers: [MapTileLayer, AnoTileLayer, MapImageTileLayer, AnoImageTileLayer],
                ground: "world-elevation",
            });
            map.when(() => {
                console.log('这是四个天地图地图加载好了', map);
                createOtherMap3D.mapIsLoad[mapConfig.mapId] = true
                createOtherMap3D.mapObj[mapConfig.mapId] = map
            }).catch((err) => {
                console.log('这是err', err);
            })
            // var view = new SceneView({
            //     container: "123",
            //     map: map,
            //     center: [-101.17, 21.78]
            //   });
            var view = new SceneView({
                container: mapConfig.mapId,
                map: map,
                // zoom: mapConfig.zoom,
                // center: [15, 65],
                center: mapConfig.center,
                // extent: ext
            });
            createOtherMap3D.view[mapConfig.mapId]=view
            view.zoom = 3;  // Sets the LOD to 3 (small map scale)
            view.zoom = 11; // Sets the LOD to 18 (large map scale)
            console.log('这是view11111111111111111111', view);
            view.goTo({
                center: [109.75, 19.22],
                zoom: 9,
                tilt: 30,
                heading: 360
            });
            // 移动zoom位置
            view.ui.move("zoom", "bottom-right");
            // 设置view视图padding
            view.ui.padding = { top: 15, left: 15, right: 15, bottom: 15 };
        })
}
/* 等待地图加载完成 */
createOtherMap3D.tillLoadedMap = function (mapId, fun) {
    setTimeout(() => {
        if (createOtherMap3D.mapIsLoad[mapId]) {
            console.log('这是看看什么时候有createOtherMap.mapIsLoad[mapId]', createOtherMap3D.mapIsLoad[mapId]);
            // console.log('这是createOtherMap.mapIsLoad[mapId]', createOtherMap.mapIsLoad[mapId]);
            fun()
        } else {
            // console.log('这是createOtherMap.mapIsLoad[mapId]',createOtherMap.mapIsLoad[mapId]);
            createOtherMap3D.tillLoadedMap(mapId, fun)
        }
    }, 500)
}
// 展示隐藏地图（） //通过id控制layer的展示和隐藏
createOtherMap3D.layerShowAndHidden = function (map, id, bool) {
    if (map.findLayerById(id)) {
        map.findLayerById(id).visible = bool
    }
}