Подтвердить что ты не робот

Является ли Leaflet хорошим инструментом для изображений без карты?

Я пишу веб-приложение, которое включает в себя навигацию технические иллюстрации (панорамирование, масштабирование, клик). Я полагаю, что Cloudmade Leaflet - хороший инструмент для этого, только потому, что кто-то использовал его сделать XKCD 1110 панорамированием/масштабированием, и мне очень нравится, как это получилось.

Очевидно, мне нужно было бы нарисовать и масштабировать мою оригинальную техническую иллюстрацию, но позвольте сказать, что тривиальная проблема, которую я решил. Если посмотреть на Leaflet API, то, похоже, мне придется преобразовать мои технические иллюстрации (.ai,.svg и .png файлы) в географический стандарт, такой как GeoJSON. Это похоже на неловкое предложение.

Может ли кто-нибудь порекомендовать Leaflet или какой-либо другой инструмент для навигации по не картам?

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете сделать это с помощью Листовки. (Я сделал именно это сам.)

Вам нужно преобразовать размеры пикселей в latlong (широта/долгота). Листовка предоставляет вам простой способ сделать это с помощью Simple "Справочной системы координат", map.project и map.unproject.

Сначала постройте свою карту следующим образом:

var map = L.map('map', {
  maxZoom: 20,
  minZoom: 20,
  crs: L.CRS.Simple
}).setView([0, 0], 20);

... и затем установите границы отображения (для изображения 1024x6145):

var southWest = map.unproject([0, 6145], map.getMaxZoom());
var northEast = map.unproject([1024, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

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

Ответ 2

Это работает для изображений, которые не черепичные.

function init() {
    var map = L.map('map', {
        maxZoom: 24,
        minZoom: 1,
        crs: L.CRS.Simple
    }).setView([0, 0], 1);

    map.setMaxBounds(new L.LatLngBounds([0,500], [500,0]));

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
    var imageBounds = [[250,0], [0,250]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map);
}

Ответ 3

Создатель брошюр здесь. Проверьте эту службу: http://hugepic.io/

Ответ 4

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

Прежде всего, вы должны понимать концепцию навигации по карте и соответствующие имена файлов плитки. Это понятие QuadTree. Пример того, как это работает, можно найти здесь.

Затем вам нужно вырезать свои необработанные технические иллюстрации в разных фрагментах. Если вы начинаете только с одного уровня масштабирования, это должно быть довольно простым. Затем вы можете использовать плитки в новом Листовом TileLayer. Когда вы хотите иметь масштабирование, это может стать немного сложнее. Вам нужно будет найти правильные границы для ваших плит и создать правильные имена файлов (см. Приведенные выше ссылки QuadTree).

Подводя итог: Листовка не должна быть проблемой в вашей задаче. Основная задача для вас - создать подходящие и правильные фрагменты из ваших исходных данных.

Ответ 6

Если вы хотите вариант без черепицы, вы можете сделать все, что нужно клиентам, без предварительной разбивки плитки

См. https://github.com/Murtnowski/GMap-JSlicer

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

Очень просто.

Ответ 7

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

https://build-failed.blogspot.pt/2012/11/zoomable-image-with-leaflet.html

В сущности, это использует GDAL2Tiles для правильного разделения плиток предсказуемым образом. Это тот инструмент, который легко доступен в большинстве дистрибутивов Linux (и, как утверждается, он отлично работает и в Mac OS X, используя порты или аналогичную вещь). Нет никакого водяного знака, ограничений по размеру и т.д. С этим инструментом. Поместите плитки на каталоги своего сервера, как объясняет в своей статье Педро Соуза.

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

var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString() + "\nZoom level is " + map.getZoom())
        .openOn(map);
}
map.on('click', onMapClick);

Мне удалось успешно заменить старый навигатор карт Flash на основе Leaflet и в основном реплицировать почти каждую функциональность Flash (даже используя те же маркеры и все!). Разумеется, с тем преимуществом, что Leaflet будет работать на устройствах iOS 😉 - и благодаря черепице решение с использованием Leaflet работает намного быстрее, чем старый подход на основе Flash...

Альтернативой может быть OpenLayers, который также может обрабатывать растровые изображения без черепицы - достаточно хорошо, если у вас относительно небольшое изображение.

Кстати, вот сравнение разных фреймворков - не все будут иметь дело со статическими изображениями: https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools