OpenLayers 从值数组创建栅格网格答案

【问题标题】：OpenLayers Create raster grid from array of valuesOpenLayers 从值数组创建栅格网格
【发布时间】：2020-02-07 05:12:05
【问题描述】：

我正在尝试从数据数组创建栅格网格并在 OpenLayers 中显示图层。我找到了一个示例，但它适用于 OpenLayers v2，我无法弄清楚如何使用最新版本的 OpenLayers（5 或 6）来实现。

OpenLayers 2 示例： http://dev.openlayers.org/sandbox/august/trunk/playground/raster/raster-array.html

我知道要创建的栅格范围以及像元大小和投影。这个想法是使用 javascript 数组中的值在内部从头开始创建栅格图层，并最终将地图显示为基于值设置颜色的图像。我想我可以使用光栅。创建最终图像的操作（基于光栅值的 rgb 值），但我找不到第一步如何做；使用数组中的值创建栅格网格。

【问题讨论】：

标签： javascript openlayers openlayers-5 openlayers-6

【解决方案1】：

也许我做的这个例子可以帮助你，它遵循以下步骤：

创建画布
使用CanvasRenderingContext2D创建图片数据
根据你的数组修改（我在示例中使用随机值）
用图像数据填充画布
获取画布的url
使用带有StaticImage的网址

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
            #a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Array Image</title>
  </head>
  <body>
    <h2>Array Image</h2>
    <div id="map" class="map"></div>

        <script type="text/javascript">

    // Map views always need a projection.  Here we just want to map image
    // coordinates directly to map coordinates, so we create a projection that uses
    // the image extent in pixels.
    var width = 1024;
    var height = 968;
    var extent = [0, 0, width, height];
    var projection = new ol.proj.Projection({
      code: 'xkcd-image',
      units: 'pixels',
      extent: extent
    });

    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }

    var canvas = document.createElement('canvas');
    // canvas.width = width;
    // canvas.height = height;
    const ctx = canvas.getContext('2d');
    const imageData = ctx.createImageData(width, height);
    for (let i = 0; i < imageData.data.length; i += 4) {
      // Modify pixel data
      imageData.data[i + 0] = getRandomInt(255);  // R value
      imageData.data[i + 1] = getRandomInt(255);    // G value
      imageData.data[i + 2] = getRandomInt(255);  // B value
      imageData.data[i + 3] = 255;// getRandomInt(255);  // A value
    }
    // Draw image data to the canvas
    ctx.putImageData(imageData, 0, 0);
    var dataURL = canvas.toDataURL();

    var map = new ol.Map({
      layers: [
        new ol.layer.Image({
          source: new ol.source.ImageStatic({
            attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
            url: dataURL,
            projection: projection,
            imageExtent: extent
          })
        })
      ],
      target: 'map',
      view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 2,
        maxZoom: 8
      })
    });

    </script>
  </body>
</html>

参考资料：

【讨论】：

简直太棒了。谢谢！