Блог

Для данного файла GeoJSON, который в данном случае является границами округа Иллинойс, я перекрываю слой google.maps.Data() и слой D3.geo.path() с проекцией меркатора, и я замечаю смещение между обеими проекциями.

Слой данных Google (красным цветом) — это объект, который отображается на том же холсте, что и любое наложение Google (полигоны, маркеры, полилинии и т.д.), В то время как D3.geo.path() (синим цветом) отображается в контейнере SVG, который я накладываю поверх контейнера Google.

Как вы можете видеть, самые западные округа показывают границу Google слева от линии D3, в то время как на востоке граница D3 смещена влево.

Сначала я подумал, что неправильно центрирую контейнер SVG, но этот пример показывает, что смещение неравномерно, поэтому я не могу исправить это, играя с матрицей преобразования SVG.

Это явление случается с любым GeoJSON, независимо от масштаба изображения или места в мире, с которым я пытаюсь. Теперь это странно, потому что, если бы d3.geo.mercator() неправильно переводил координаты в пиксели, просчет не был бы равномерным. Это также не проблема аппроксимации, потому что она не зависит от масштабирования.

Это просто незначительная проблема с различными движками проекции? Я бы не ожидал, что Google, d3, leaflet и openlayers переведут пару координат в один и тот же пиксель, но я не хочу игнорировать это, потому что я, возможно, делаю что-то неправильно.

Любые идеи будут оценены. @mbostock, я призываю тебя.

РЕДАКТИРОВАТЬ: Мне потребовалось много времени, чтобы создать автономный пример, но это помогло мне лучше понять, что происходит под капотом.

Пожалуйста, смотрите http://bl.ocks.org/amenadiel/ba21cbada391e053d899