Geek asks and answers

Appropriate scaling level for booklet using d3 geodata

What do I want to do?

  • Overlay the SVG layer on top of the sheet (or any wireframe of the map).
  • Using position elements d3js and d3.geo.mercator in my SVG layer so that they are correctly placed above the sheet.
  • I have only access to the zoom level, the center of the map (lat / long), the width and height of the SVG map element.
  • I only need to listen to changes in the zoom level and the center of the map to know when to move SVG elements.

I already made an SVG element the same size as the booklet layer; and have it as an overlay.

How am I doing this now?

I have some global variables that match sheets (Map.zoom, Map.width, Map.height, Map.center).

Map.center = [43, -72];
Map.zoom = 3;

Map.projection = d3.geo.mercator()
            .center([Map.center[1], Map.center[0]])
             // I think this is the problem. I don't really understand this.
            .scale(256 * Math.pow(2, Map.zoom))
            .translate([Map.width / 2, Map.height / 2])

Map.lt = new L.Map...(center is Map.center, zoom is Map.zoom)

Map.projection.

:

function transform(d) {
    d = Map.projection(d.value.geometry.coordinates[0], d.value.geometry.coordinates[1]);

    return "translate(" + d[0] + "," + d[1] + ")";
}

, :

object.attr("transform", transform);

, .

[43, -72], x, y ( Map.projection), SVG, , - . , .

d3.geo.tile d3.geo.path(), .

, SVG, d3. , ; / d3.geo.mercator, . ?

!

Example

+3
2
Map.projection = d3.geo.mercator()
            .center([Map.center[1], Map.center[0]])
            .scale((1 << 8 + Map.zoom) / 2 / Math.PI)
            .translate([Map.width / 2, Map.height / 2])

, , .

+3

( JS - ES6):

const convertZoomLevelToMercator = (zoomLevel) =>
  Math.pow(2, 8 + zoomLevel) / 2 / Math.PI;
const convertZoomLevelFromMercator = (zoomLevelInMercator) =>
  Math.log(zoomLevelInMercator * 2 * Math.PI) / Math.LN2 - 8;

:

console.log(convertZoomLevelToMercator(1));
console.log(convertZoomLevelToMercator(5));
console.log(convertZoomLevelToMercator(10));
console.log(convertZoomLevelToMercator(15));
console.log(convertZoomLevelToMercator(20));
console.log('----');
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(1)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(5)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(10)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(15)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(20)));

:

81.48733086305042
1303.797293808806
41721.51340188181
1335088.428860218
42722829.72352698
----
1
5
10
15
20
0

More articles:


All Articles