<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="geometry" content="diagram"> <link rel="stylesheet" href="./assets/common.css"> <title>dem demo</title> <style> #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div> <div id="map"></div> <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <script src="./assets/jquery-3.2.1.min.js"></script> <script src="./assets/geotiff.browserify.min.js"></script> <script src="../build/L7.js"></script> <script> const scene = new L7.Scene({ id: 'map', viewMode: '3D', mapStyle: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true', // 样式URL center: [ 110.770672, 44.159869 ], pitch: 0, zoom: 3 }); scene.on('loaded', () => { const xhr = new XMLHttpRequest(); xhr.open('GET', ' https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status === 200) { // get binary data as a response const blob = this.response; const tiff = GeoTIFF.parse(blob); const image = tiff.getImage(); const values = image.readRasters()[0].values(); const m = image.getHeight(); const n = image.getWidth(); const layer = scene.RasterLayer({ zIndex: 2 }). source(values, { parser: { type: 'raster', width: n, height: m, min: 0, max: 8000, extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ] } }) .style({ rampColors: { colors: [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ], positions: [ 0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0 ] } }) .render(); console.log(layer); } }; xhr.send(); }); </script> </body> </html>