любая технология для предварительного просмотра фотографий высокой четкости, может увеличивать и уменьшать масштаб, как карты Google - PullRequest
2 голосов
/ 26 мая 2011

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

Как я могу это сделать?

Спасибо. Bin

Ответы [ 3 ]

1 голос
/ 26 мая 2011

Если рассматриваемое изображение на самом деле является картой или чем-то, что может быть разумно наложено на карту, используйте MapTiler (http://www.maptiler.org/), чтобы разбить его на плитки, а затем используйте такой код для отображения плиток:

var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = 'tiles_dir';
var mapTypeId = 'Your Custom Map';

var mapType = new google.maps.ImageMapType({
    tileSize: new google.maps.Size(256,256),
    getTileUrl: function(coord,zoom) {
        return "img/"+tileDir+"/"+zoom+"/"+coord.x+"/"+coord.y+".png";
    }
});
var map = new google.maps.Map(document.getElementById("map_canvas"), 
        {center:new google.maps.LatLng(lat,lon),
         mapTypeId:google.maps.MapTypeId.ROADMAP,
         zoom:initialZoom,
         mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);

map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);

Обратите внимание, что Map Tiler устанавливает имя изображения в соответствии с API Google Maps v2. Если вы используете v3 (и вам следует!), Вам нужно взять каждое имя файла (например, 2001.png) и переместить его в имя файла, подходящее для v3. Чтобы сделать это в Linux или Mac, перейдите в каталог плитки и запустите этот скрипт (обратите внимание, что скрипт предполагает, что вы находитесь в каталоге плиток!):

#!/bin/bash

tiles=`ls -d */*/*`

for thisPath in $tiles
do
   thisFile=${thisPath#*/*/}
   oldY=${thisFile%.png}
   zoomX=${thisPath%/*}
   zoom=${thisPath%/*/*}
   newY=$(((1<<zoom) - oldY - 1))
   mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done

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

1 голос
/ 15 сентября 2012

Я только что нашел эту библиотеку, которая довольно гладкая: http://polymaps.org/

1 голос
/ 26 мая 2011

Конечно, есть Карты Google.Я абсолютно серьезно: GMaps API позволяет создавать пользовательские типы карт , вам нужно дать ему возможность показывать «плитки» (части вашего изображения) с заданным уровнем масштабирования.

Самая большая работа, которую я бы взял на себя, была бы в создании "плиток" из вашего изображения при различных уровнях масштабирования (разделить изображение на более мелкие прямоугольники), но я полагаю, что это можно автоматизировать.Пользовательский интерфейс, перетаскивание, масштабирование и тому подобное затем обрабатываются JavaScript-скриптом Google Maps.

(это работает, я создал настольную игру с такими пользовательскими плитками, используя Google Maps в качестве базовой структуры для ее отображения..)

...