1

データの配列からラスター グリッドを作成し、レイヤーを OpenLayers に表示しようとしています。例を見つけましたが、それは OpenLayers v2 用であり、最新バージョンの OpenLayers (5 または 6) でそれを行う方法がわかりません。

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

作成するラスターの範囲と、セル サイズと投影法を知っています。アイデアは、JavaScript 配列の値を使用してラスター レイヤーを内部的にゼロから作成し、最終的には値に基づいて色を設定する画像としてマップを表示することです。ラスターが使えると思います。最終的な画像 (ラスター値に基づく RGB 値) を作成する操作ですが、最初の手順を実行する方法が見つかりません。配列からの値を使用してラスター グリッドを作成します。

4

1 に答える 1

1

私が作成したこの例が役立つかもしれません。次の手順に従います。

  1. キャンバスを作成する
  2. CanvasRenderingContext2D画像データの作成に使用
  3. 配列に従って変更します（例ではランダムな値を使用しています）
  4. キャンバスを画像データで埋める
  5. キャンバスの URL を取得する
  6. で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>

参考文献:

于 2020-02-06T21:12:05.877 に答える