Question

我正在尝试使用反投影将JPG底图投影到正交投影上。我已经能够在D3的第3版中使用它，但我在D3的v4中遇到了问题。出于某种原因，v4给了我源图像的边缘作为背景（而不是我指定的黑色背景）。 v4中的逆投影是否存在任何已知问题或对此有任何修复？

D3 v4 JSBin Link

<title>Final Project</title>
<style>

canvas {
  background-color: black;
} 

</style>
<body>
  <div id="canvas-image-orthographic"></div>
  <script src="//d3js.org/d3.v4.min.js"></script>
<script>

// Canvas element width and height
var width = 960,
    height = 500;

// Append the canvas element to the container div
var div = d3.select('#canvas-image-orthographic'),
    canvas = div.append('canvas')
        .attr('width', width)
        .attr('height', height);

// Get the 2D context of the canvas instance
var context = canvas.node().getContext('2d');

// Create and configure the Equirectangular projection
var equirectangular = d3.geoEquirectangular()
    .scale(width / (2 * Math.PI))
    .translate([width / 2, height / 2]);

// Create and configure the Orthographic projection
var orthographic = d3.geoOrthographic()
   .scale(Math.sqrt(2) * height / Math.PI)
   .translate([width / 2, height / 2])
   .clipAngle(90);

// Create the image element
var image = new Image(width, height);
image.crossOrigin = "Anonymous";
image.onload = onLoad;
image.src = 'https://tatornator12.github.io/classes/final-project/32908689360_24792ca036_k.jpg';

// Copy the image to the canvas context
function onLoad() {

    // Copy the image to the canvas area
    context.drawImage(image, 0, 0, image.width, image.height);

    // Reads the source image data from the canvas context
    var sourceData = context.getImageData(0, 0, image.width, image.height).data;

    // Creates an empty target image and gets its data
    var target = context.createImageData(image.width, image.height),
        targetData = target.data;

    // Iterate in the target image
    for (var x = 0, w = image.width; x < w; x += 1) {
        for (var y = 0, h = image.height; y < h; y += 1) {

            // Compute the geographic coordinates of the current pixel
            var coords = orthographic.invert([x, y]);

            // Source and target image indices
            var targetIndex,
                sourceIndex,
                pixels;

            // Check if the inverse projection is defined
            if ((!isNaN(coords[0])) && (!isNaN(coords[1]))) {

                // Compute the source pixel coordinates
                pixels = equirectangular(coords);

                // Compute the index of the red channel
                sourceIndex = 4 * (Math.floor(pixels[0]) + w * Math.floor(pixels[1]));
                sourceIndex = sourceIndex - (sourceIndex % 4);

                targetIndex = 4 * (x + w * y);
                targetIndex = targetIndex - (targetIndex % 4);

                // Copy the red, green, blue and alpha channels
                targetData[targetIndex]     = sourceData[sourceIndex];
                targetData[targetIndex + 1] = sourceData[sourceIndex + 1];
                targetData[targetIndex + 2] = sourceData[sourceIndex + 2];
                targetData[targetIndex + 3] = sourceData[sourceIndex + 3];

        }

    }
}

  // Clear the canvas element and copy the target image
    context.clearRect(0, 0, image.width, image.height);
    context.putImageData(target, 0, 0);

}


</script>

Answer 1

问题在于反转功能不是一对一的。我知道有两种方法可以解决问题。一，计算构成投影的光盘区域，并跳过该半径之外的像素。或者两个（我在下面使用），计算坐标的前向投影，看它们是否与你开始时的x，y坐标相匹配：

if ( 
  (Math.abs(x - orthographic(coords)[0]) < 0.5 ) &&
  (Math.abs(y - orthographic(coords)[1]) < 0.5 ) 
 )

基本上这要求[x,y]等于projection(projection.invert([x,y]))。通过确保该语句相等（或接近相等），则像素确实在投影盘中。这是必需的，因为多个svg点可以表示给定的lat长，但projection()仅返回您想要的那个。

上面的代码块中存在舍入误差的容差因子，只要前向投影在原始x的半个像素内，y坐标就会被绘制（看起来效果很好）：

我有一个更新的bin here（点击运行，我取消选中自动运行）。

当然，与计算投影光盘的半径相比，这是涉及计算更多的过程（但该方法仅限于投影到光盘的投影）。

这{{}}}的两个答案可能会进一步解释 - 它们涵盖了两种方法。

D3 v4反转功能

1 个答案: