Fatal编程技术网
  • javascript/
  • Javascript OpenLayers从值数组创建光栅栅格

Javascript OpenLayers从值数组创建光栅栅格

javascript openlayers

Javascript OpenLayers从值数组创建光栅栅格,javascript,openlayers,openlayers-5,openlayers-6,Javascript,Openlayers,Openlayers 5,Openlayers 6,我试图从一组数据创建一个光栅网格，并在OpenLayers中显示该层。我已经找到了一个例子，但它是针对OpenLayers v2的，我不知道如何使用最新版本的OpenLayers（5或6）来实现它 OpenLayers 2的示例： 我知道要创建的光栅的范围以及单元大小和投影。其思想是使用javascript数组中的值从头开始在内部创建光栅层，并最终将地图显示为基于值设置颜色的图像。我想我可以用光栅。创建最终图像的操作（基于光栅值的rgb值），但我找不到如何执行第一步；使用数组中的值创建光栅栅格

我试图从一组数据创建一个光栅网格，并在OpenLayers中显示该层。我已经找到了一个例子，但它是针对OpenLayers v2的，我不知道如何使用最新版本的OpenLayers（5或6）来实现它

OpenLayers 2的示例：

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

也许我制作的这个示例可以帮助您，它遵循以下步骤：

  • 创建画布
  • 使用
    CanvasRenderingContext2D
    创建图像数据
  • 根据数组进行修改（我在示例中使用随机值）
  • 用图像数据填充画布
  • 获取画布的url
  • 将url与静态图像一起使用
    • 
.地图{
高度：400px；
宽度：100%；
}
#a{显示：无；}
阵列图像
阵列图像
//地图视图总是需要投影。这里我们只想映射图像
//坐标直接映射到地图坐标，所以我们创建一个使用
//以像素为单位的图像范围。
var宽度=1024；
变量高度=968；
变量范围=[0,0，宽度，高度]；
var投影=新的ol.proj.projection({
代码：“xkcd图像”，
单位：'像素'，
范围：范围
});
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
var canvas=document.createElement（'canvas'）；
//画布宽度=宽度；
//canvas.height=高度；
const ctx=canvas.getContext（'2d'）；
const imageData=ctx.createImageData（宽度、高度）；
对于（设i=0；i
    参考资料：

    <!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>