importar mapa de colores desde 'colormap';
https://openlayers.org/workshop/en/cog/colormap.html
¿Cómo usar esta utilidad en javascript?
estoy usando CDN de openlayers
https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css
Gracias por adelantado
Si el desarrollador no ha proporcionado una compilación de navegador para un paquete NPM, es posible que pueda usar una utilidad como bundle.run (consulte https://github.com/Rich-Harris/packd ). En este caso, eso funciona, pero yo le sugiero que descargue la compilación en su propio servidor
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>OpenLayers</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css"> <style> html, body, #map-container { margin: 0; height: 100%; width: 100%; font-family: sans-serif; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script> <script src="https://bundle.run/colormap@2.3.2"></script> </head> <body> <div id="map-container"></div> <script type="text/javascript"> const source = new ol.source.GeoTIFF({ sources: [ { // red reflectance url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B04.tif', max: 10000, }, { // near-infrared reflectance url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B08.tif', max: 10000, }, ], }); // near-infrared is the second band from above const nir = ['band', 2]; // near-infrared is the first band from above const red = ['band', 1]; const difference = ['-', nir, red]; const sum = ['+', nir, red]; const ndvi = ['/', difference, sum]; function getColorStops(name, min, max, steps, reverse) { const delta = (max - min) / (steps - 1); const stops = new Array(steps * 2); const colors = colormap({colormap: name, nshades: steps, format: 'rgba'}); if (reverse) { colors.reverse(); } for (let i = 0; i < steps; i++) { stops[i * 2] = min + i * delta; stops[i * 2 + 1] = colors[i]; } return stops; } const layer = new ol.layer.WebGLTile({ source: source, style: { color: [ 'interpolate', ['linear'], ndvi, // color ramp for NDVI values ...getColorStops('earth', -0.5, 1, 10, true), ], }, }); const map = new ol.Map({ target: 'map-container', layers: [layer], view: source.getView(), }); </script> </body> </html>La imagen NDVI es visible pero el mapa de capa abierta no es visible
