arcgis api 4.X 加载天地图3D_天地图 矢量底图加载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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154