Я ищу помощь в создании шкалы масштаба карты для использования с масштабируемой картой D3.js. Я часто создаю карты для своей работы, используя D3.js. Я никогда не размещал масштабную линейку на картах, которые строил в прошлом, но недавно получил запросы включить масштабную линейку на картах. Я искал в интернете какой-то пример, из которого можно было бы построить, но ничего не смог найти. Я играл с d3.scale.linear (), но я не могу создать что-нибудь полезное.

Я пытаюсь создать масштабную линейку карты, которая соответствующим образом корректирует свои числа при увеличении и уменьшении с помощью d3.behavior.zoom (). Будем весьма благодарны за любую помощь по этому вопросу (рабочая модель или что-то, из чего можно построить). Заранее спасибо.

1
TonyT 28 Май 2017 в 01:03

2 ответа

Лучший ответ

Есть несколько проблем, которые вам нужно решить в веб-шкале:

  • Расстояния на карте будут различаться в зависимости от проекции
  • Проекции D3 проектируют длинные данные, которые нельзя напрямую использовать для измерения физического расстояния
  • Физическое расстояние должно измеряться с использованием большого круга

Некоторое время назад я разработал масштаб для карты, используя формулу здесь для физического расстояния между географическими координатами. Но какие две точки вы используете для измерения расстояния? Я использовал две точки, которые при соединении образовывали линию через центр фрейма карты (по горизонтали, а не по краям для карты с альбомной ориентацией), масштаб около центра карты, скорее всего, наиболее характерен для масштаба карты в целом. Чтобы получить географическое местоположение точки, используя координаты SVG, используйте projection.invert([x,y]), чтобы узнать долготу и широту.

С этими двумя точками вы сможете рассчитать физическое расстояние и координату SVG, предоставив вам информацию, необходимую для шкалы. Это может выглядеть так:

var scaleWidth = width / 4;
var p1 = projection.invert([width/2 - scaleWidth/2, height / 2]);
var p2 = projection.invert([width/2 + scaleWidth/2, height / 2]);
var geoDistance = getDistance(p1,p2);

Где getDistance - это функция, которая возвращает расстояние по большому кругу между двумя географическими точками, а географическое расстояние, которое возвращает эта функция, представлено width/4 пикселями на карте. Теперь для простейшего масштаба вы можете нарисовать прямоугольник шириной width/4 pixels и обозначить его как расстояние, возвращаемое длиной getDistance.

Обратите внимание, что если вы выбираете те же две точки SVG каждый раз, что и ваши контрольные точки для шкалы, на шкале может отображаться округленная длина. Таким образом, вам нужно будет изменить расстояние, пока вы не получите достаточно круглое число, а затем нарисовать масштабную линейку в углу (если масштабная шкала шириной 1,954 км не подходит, это тоже будет быстрее).

Чтобы увеличить масштаб, просто перерисуйте (и пересчитайте расстояние между двумя центральными точками, коэффициент масштабирования не поможет вам в этом) и / или измените масштаб, чтобы представить новое физическое расстояние между контрольными точками (пересчитывая их по мере необходимости, чтобы получить округленное число ) .

Вот bl.ock масштаба в действии и его изображение ниже:

enter image description here

2
Andrew Reid 28 Май 2017 в 02:19