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
| //4.16 加载天地图并添加倾斜摄影数据 _initSceneView416 = () => { const _self = this; const options = { url: 'https://js.arcgis.com/4.16/init.js', css: 'https://js.arcgis.com/4.16/esri/themes/light/main.css', }; loadModules( [ 'esri/Color', 'esri/request', 'esri/layers/BaseTileLayer', 'esri/Map', 'esri/views/SceneView', 'esri/layers/support/TileInfo', 'esri/layers/IntegratedMeshLayer', ], options, ) .then(([Color, esriRequest, BaseTileLayer, Map, SceneView, TileInfo, IntegratedMeshLayer]) => { let TdtLayer = BaseTileLayer.createSubclass({ properties: { urlTemplate: null, tint: { value: null, type: Color, }, subDomains: null, }, getTileUrl: function (level, row, col) { return this.urlTemplate .replace('{level}', level) .replace('{col}', col) .replace('{row}', row) .replace( '{subDomain}', this.subDomains[Math.round(Math.random() * (this.subDomains.length - 1))], ); }, fetchTile: function (level, row, col, options) { let url = this.getTileUrl(level + 1, row, col); return esriRequest(url, { responseType: 'image', //新增下面两句,解决乱片问题 allowImageDataAccess: true, signal: options.signal, }).then( function (response) { let image = response.data; let width = this.tileInfo.size[0]; let height = this.tileInfo.size[0]; let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); canvas.width = width; canvas.height = height; if (this.tint) { context.fillStyle = this.tint.toCss(); context.fillRect(0, 0, width, height); context.globalCompositeOperation = 'difference'; } context.drawImage(image, 0, 0, width, height); return canvas; }.bind(this), ); }, }); //定义瓦片结构 let tileInfo = new TileInfo({ //"dpi": 90.71428571428571, dpi: 96, rows: 256, cols: 256, compressionQuality: 0, origin: { x: -180, y: 90, }, spatialReference: { wkid: 4490, }, lods: [ { level: 0, resolution: 0.703125, scale: 295829355.454566 }, { level: 1, resolution: 0.3515625, scale: 147914677.727283 }, { level: 2, resolution: 0.17578125, scale: 73957338.863641 }, { level: 3, resolution: 0.087890625, scale: 36978669.431821 }, { level: 4, resolution: 0.0439453125, scale: 18489334.71591 }, { level: 5, resolution: 0.02197265625, scale: 9244667.357955 }, { level: 6, resolution: 0.010986328125, scale: 4622333.678978 }, { level: 7, resolution: 0.0054931640625, scale: 2311166.839489 }, { level: 8, resolution: 0.00274658203125, scale: 1155583.419744 }, { level: 9, resolution: 0.001373291015625, scale: 577791.709872 }, { level: 10, resolution: 0.0006866455078125, scale: 288895.854936 }, { level: 11, resolution: 0.00034332275390625, scale: 144447.927468 }, { level: 12, resolution: 0.000171661376953125, scale: 72223.963734 }, { level: 13, resolution: 8.58306884765625e-5, scale: 36111.981867 }, { level: 14, resolution: 4.291534423828125e-5, scale: 18055.990934 }, { level: 15, resolution: 2.1457672119140625e-5, scale: 9027.995467 }, { level: 16, resolution: 1.0728836059570313e-5, scale: 4513.997733 }, { level: 17, resolution: 5.3644180297851563e-6, scale: 2256.998867 }, { level: 18, resolution: 0.000002682209014892578, scale: 1128.499433 }, ], }); let tiledLayer = new TdtLayer({ urlTemplate: 'http://{subDomain}.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3', subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], tileInfo: tileInfo, }); let tdtzjLayer = new TdtLayer({ urlTemplate: 'http://{subDomain}.tianditu.com/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3', subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], tileInfo: tileInfo, }); let map = new Map({ spatialReference: { wkid: 4490, }, basemap: { baseLayers: [tiledLayer], referenceLayers: [tdtzjLayer], }, }); let mapView = new SceneView({ container: 'mainView', spatialReference: { wkid: 4490, }, map: map, center: { x: 117, y: 39, spatialReference: { wkid: 4490, }, }, }); let layer01 = new IntegratedMeshLayer({ url: 'http://www.arcgisonline.cn/server/rest/services/Hosted/Production_4/SceneServer', //copyright: "VRICON" }); mapView.map.add(layer01); }) .catch((err) => { console.log('三维场景实例化失败:', err); }); };
|