1. Глобальные данные по высоте
2. Рисование контурных линий
3. Стилизованные карты из контуров

Некоторое время назад мы получили запрос на создание инструмента для рисования простой топографической контурной карты любого места в мире и экспорта файла SVG с линиями. Существуют хорошие глобальные карты местности с контурными линиями - например, в Картах Google они есть, как и многие стили Mapbox, - но интерес был в извлечении только контурных линий для внешнего использования. Хотя запрос превратился во что-то другое, мы все еще были заинтригованы этой идеей.

«Звучит слишком сложно», - подумал я сначала. Знаки вопроса были:

1. Как мы можем загрузить хорошие данные по высоте в любой точке мира? Я знаю, как найти хорошие ЦМР, но не по запросу в веб-приложении, и знаю только хорошие данные в США.
2. Как, черт возьми, вы рисуете контурные линии? Для меня это всегда была операция ГИС на рабочем столе или в командной строке.

Оказывается, я был неправ; ни то, ни другое ужасно сложно. Так что я построил вещь , Это больше доказательство концепции, чем что-либо еще, это инструмент, который позволяет вам рисовать контурную карту практически в любом месте, стилизовать ее до определенной степени и экспортировать в несколько форматов - возможно, наиболее полезно, GeoJSON для использования в дальнейшем картографировании или работе с ГИС. , Здесь действительно нет причудливых технологий. Это все JavaScript, с использованием Leaflet и D3.

Вы можете сделать несколько вещей здесь:

• Найдите место, которое вы хотите нанести на карту
• Выберите интервал линии контура (в метрах или футах) и более толстый интервал линии индекса (если есть)
• Укажите цвет линии и вес
• Используйте сплошной цвет или гипсометрические оттенки в качестве фоновой заливки
• Цвет возвышений над уровнем моря с различными батиметрическими цветами
• Нарисуйте карты в виде основных контурных линий или со стилизованным рельефным, освещенным видом
• Экспорт в GeoJSON, PNG или SVG

Попробуй и дайте нам знать, если вы найдете это полезным для чего-либо! Посмотрите на исходный код тоже, если вам интересно, как это работает, что в общих чертах описано ниже.

Глобальные данные по высоте

Первая большая задача - найти глобальные данные о высоте и загрузить их в браузер без особых хлопот. У нас есть хороший архив SRTM данных и кратко подумал о написании серверных функций для его доставки, но, по-моему, я размышлял над гораздо более простым маршрутом, несмотря на то, что использовал его в прошлом: Mapzen (RIP) плитки местности ,

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

Они выглядят безумными, потому что они не предназначены для непосредственного просмотра. Вместо, короткая формула декодирует красное, зеленое и синее значение пикселя в значение высоты, которое мы можем затем использовать по своему усмотрению. Я поместил невидимый слой листов холста в Leaflet, чтобы загрузить необходимые плитки ландшафта при перемещении карты. После загрузки они рисуются на холст, с которого мы можем прочитать эти значения RGB и, таким образом, сохранить большую таблицу значений высот для видимой области карты.

К счастью, несмотря на кончину Мапзена, их работа над плитками местности продолжается, так как весь набор доступны через Nextzen или Amazon S3 , Mapbox (еще жив) также предлагает плитки местности , Хотя качество данных варьируется от места к месту, эти наборы данных представляют собой работу некоторых преданных людей, чтобы собрать воедино лучшие данные, которые они могут для большей части мира - гораздо лучше, чем пытаться сделать это самостоятельно!

Рисование контурных линий

Отлично, у нас есть данные по высоте. Теперь нам просто нужно нарисовать контуры.

Я не знаю, как это сделать. Я не претендую на то, чтобы знать, как это сделать. Я понимаю основной рисованный метод , но мой реальный метод заключается в том, чтобы спросить GDAL сделать это.

Введите, что не удивительно, Майк Босток и довольно новый d3-контур Библиотека JavaScript. Все, что вам нужно сделать, это дать ему массив значений данных и набор пороговых значений (т. Е. Значений, вокруг которых вы хотите нарисовать линии, в данном случае заданных опциями пользователя), и он выполнит несколько магических заклинаний и даст вам контурные полигоны. Это полезно не только для географического отображения, но и для других типов диаграмм, как вы можете видеть в документации.

d3-contour возвращает контуры как GeoJSON, что очень удобно, потому что D3 также хорош в потребляя GeoJSON и выплевывая нарисованные формы для холста. Контуры и видимая карта основаны на координатах экрана, а не на географических координатах, но D3 не волнует. Чтобы экспортировать как пригодный для использования файл GeoJSON, мы можем использовать методы преобразования Leaflet, чтобы вернуться к географическим координатам.

Напомним, что всякий раз, когда карта перемещается и перерисовывается, она делает следующее:

1. Загрузить плитки местности
2. Нарисуйте плитки на невидимом холсте и расшифруйте их до значений высоты
3. Получить пороговые значения контурной линии на основе пользовательских параметров и текущего диапазона значений высот
4. Получите контурные полигоны с d3-контуром
5. Рисование контуров на холсте с указанными параметрами стиля

Когда параметры стиля меняются, нужно только перерисовать холст. Если интервал между линиями изменяется, ему необходимо пересчитать контуры, но не нужно перезагружать данные высот. Если карта движется, она должна сделать все.

Стилизованные карты из контуров

Этот маленький инструмент содержит один слегка причудливый стиль - подсвеченные контуры. Это по сути Контуры в стиле танака где каждая линия контура кажется поднятой над предыдущей и подсвеченной в одном направлении. Они выглядят как трехмерные, как слои дерева, вырезанные и сложенные. (Талантливые люди создали множество реальных физических карт такого типа.) Вы можете создавать их с помощью таких вещей, как ArcGIS или же QGIS где методы могут быть умнее и учитывать аспект каждого отрезка, но здесь это просто трюк с тенями. До сих пор я не знал, что стандартные методы рендеринга холста включают падающие тени ! Есть легкий штрих вокруг всего многоугольника, но с одной стороны он скрыт тенью на заливке.

Но стилистические возможности с контурными линиями не должны останавливаться на самих контурах. Я играл с некоторыми картами, которые используют контурные линии в качестве промежуточного шага при получении окончательного стиля, хотя не обязательно появляются на карте сами.

Одним из примеров является попытка гашюры , Контурные линии служат отправными точками для более коротких штрихов, которые перемещаются вниз по перпендикуляру к контуру, останавливаясь на следующей линии контура. Контуры несколько видны как разрывы на карте, но они не нарисованы. Я не совсем усовершенствовал это, но, возможно, это улучшение ранее сорванная работа с искусственными штрихами, которые были основаны на сетке.

Или мы можем увлечься штрихами только в эстетических целях, начиная с контуров, но позволяя штрихам течь дальше вниз по склону, сливаясь и окрашиваясь общим направлением, в котором они текут.

Наконец, всегда есть триповая анимация. Этот действительно показывает фактические контурные линии, но это не совсем обычная карта. Делать полезные вещи - это здорово, конечно. Но делать дурацкие красивые вещи веселее!

Похожие

Комментарии