Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Контурные карты в веб-браузере

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

Некоторое время назад мы получили запрос на создание инструмента для рисования простой топографической контурной карты любого места в мире и экспорта файла SVG с линиями

Некоторое время назад мы получили запрос на создание инструмента для рисования простой топографической контурной карты любого места в мире и экспорта файла 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 где методы могут быть умнее и учитывать аспект каждого отрезка, но здесь это просто трюк с тенями. До сих пор я не знал, что стандартные методы рендеринга холста включают падающие тени ! Есть легкий штрих вокруг всего многоугольника, но с одной стороны он скрыт тенью на заливке.

Есть легкий штрих вокруг всего многоугольника, но с одной стороны он скрыт тенью на заливке

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

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

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

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

Но делать дурацкие красивые вещи веселее

Как, черт возьми, вы рисуете контурные линии?