OpenLayers Создать растровую сетку из массива значений - PullRequest
Новая
       77

OpenLayers Создать растровую сетку из массива значений

0 голосов
/ 04 февраля 2020

Я пытаюсь создать растровую сетку из массива данных и отобразить слой в OpenLayers. Я нашел пример, но это для OpenLayers v2, и я не могу понять, как это сделать с последней версией OpenLayers (5 или 6).

Пример с OpenLayers 2: http://dev.openlayers.org/sandbox/august/trunk/playground/raster/raster-array.html

Я знаю размер растра, который я хочу создать, размер ячейки и проекцию. Идея состоит в том, чтобы создать растровый слой с нуля изнутри со значениями из массива javascript и, в конечном счете, отобразить карту в виде цветов, устанавливающих цвета на основе значений. Я думаю, что я могу использовать растр. Операция по созданию окончательного изображения (значение RGB на основе значения растра), но я не могу найти, как сделать первый шаг; создать растровую сетку со значениями из массива.

1 Ответ

0 голосов
/ 07 февраля 2020

Может быть, этот пример, который я сделал, может вам помочь, он выполняет следующие шаги:

  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>

Ссылки:

...