Search code examples
javascriptd3.jsopenlayers-3projection

Set D3 projection in Openlayers 4

The Demo

I confused on D3 Integration using Openlayers 4.

The confused code is following ：var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);

Why set the value of 'scale' is '1' and the 'translate' is '[0, 0]' when init the Mercator projection

Solution

  • They are set there so that the bounds of the features can be computed, and, followingly, the correct scale and center can be deduced.

    Try putting an extra console.log(scale, center) into the canvasFunction, and then move the map, zoom it, or try emulating a high-DPI display (eg. in Chrome Developer Tools). You'll see how these values change with every pan and zoom.

    The values 1 and [0, 0] are set to ease the computations, as defaults are set so that the whole Earth map would be drawn by default (per scale and translate documentation). That's practical for when you're coding the function for the first time and want to see some sane results, but less useful when you need to compute the projected bounds.