2016-05-13 2 views
3

Я работаю над проектом, который преобразует слайд-изображения цифровой гистологии (микроскопа) в пиксели JPEG размером 256x256 пикселей, размещенные в архитектуре Google Maps. Поскольку эти ткани установлены на фоне полностью белого (see example here), я использую программу, которая при преобразовании файлов слайдов микроскопа в черепичные JPEG-файлы также удаляет полностью белые плитки. Это экономит огромное количество пространства для хранения, а также приводит к тому, что на сервер загружается гораздо меньше файлов, что полезно, поскольку у меня нет контроля над сервером (я использую хранилище Google).Вызов «плитки по умолчанию» в Картах Google

Однако это оставляет пустые отверстия на изображении. Я пытаюсь загрузить сценарий Google Maps для загрузки одного полностью белого изображения JPEG, если в этом месте нет фрагмента. Я не могу найти ответ нигде, и мои навыки программирования в лучшем случае новичок. Самое близкое, что я могу найти, это использовать tile overlays,, но я не всегда буду знать, какие плитки нужно заменить, и кажется, что это необходимая информация, чтобы заполнить эти незаполненные области.

Мой текущий (очень очень простой сценарий) выглядит следующим образом:

<html> <head> 
 
    < script type = "text/javascript" 
 
src = "https://maps.googleapis.com/maps/api/js?sensor=true&v=3" > < /script> 
 
<script type="text/javascript 
 
"> 
 
\t function initialize() 
 
\t { 
 
     \t geocoder = new google.maps.Geocoder(); 
 
\t  var myOptions = { 
 
\t \t zoom: 2, 
 
\t \t center: new google.maps.LatLng(0,0), 
 
\t \t mapTypeControl: false, 
 
\t \t streetViewControl: false, 
 
\t \t navigationControl: true, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t  } 
 
      map = new google.maps.Map(document.getElementById(" 
 
map_canvas "), myOptions); 
 
\t  var VM_Map = new google.maps.ImageMapType({ 
 
\t \t \t name: 'Digital Histology' 
 
\t \t \t alt: 'Digital Histology', 
 
\t \t \t getTileUrl: function(coord, zoom) {return customGetTileURL(coord, zoom);}, 
 
\t \t \t tileSize: new google.maps.Size(256, 256), 
 
\t \t \t minZoom: 1, 
 
\t \t \t maxZoom: 9, 
 
\t \t \t isPng: false 
 
\t \t \t }); 
 
\t \t map.mapTypes.set('VM_Map', VM_Map); 
 
\t   map.setMapTypeId('VM_Map'); 
 
} 
 
function customGetTileURL(a,b) { 
 
     return 'SERVER_PATH' + b + '/' + a.y + '/' + a.x + '.jpg' 
 
} 
 
</script> 
 
</head> 
 
<body id=" 
 
body " style=" 
 
margin: 0px; 
 
padding: 0px; 
 
overflow: hidden; 
 
" onLoad=" 
 
initialize() 
 
" > 
 
<div id=" 
 
map_canvas " style=" 
 
width: 100 % ; 
 
height: 100 % ; 
 
"></div> 
 
</body> 
 
</html>

Любые предложения будут глубоко признателен.

+0

просто определить по умолчанию плитку через [ErrorDocument404] (https://httpd.apache.org/docs /2.4/custom-error.html) –

+0

Мне нужно управлять сервером, чтобы это сделать, да? У меня нет контроля над сервером (я плачу Google за хранение ... Я добавлю это в сообщение). – Brandon

+0

, когда вам нужна белая плитка для недостающих плиток, просто определите белый фон для всех плиток. –

ответ

1

Есть некоторые варианты, которые у вас есть, но они зависят от вашей настройки и количества контроля над вами.

1.Option: Кажется, что вы загружаете изображения с сервера: если сервер работает под вашим контролем и использует Apache или какое-либо другое решение для веб-серверов, которое можно настроить, вы можете настроить его для возврата по умолчанию изображение (в вашем случае - белое изображение), если запрошенное изображение не существует. См. this SO question о том, как это сделать с Apache. Я бы определенно пошел с этой опцией, если это возможно.

2.Option: Если вы знаете заранее, какие файлы не существуют, вы можете добавить их в некоторый объект js и всегда проверять, существуют ли они в первую очередь, и если не вернуть URL-адрес белого изображения. Таким образом, вы бы переменную JS со структурой, как это:

non_existing_images = {SAMPLE_ZOOM_1: 
         {SAMPLE_X_COORD_1: 
          {SAMPLE_Y_COORD_1:true, SAMPLE_Y_COORD_2:true, ...}, 
         SAMPLE_X_COORD_2: 
          {SAMPLE_Y_COORD_1:true, SAMPLE_Y_COORD_2:true, ...} 
         ...}, 
         SAMPLE_ZOOM_2:... 
         } 

Тогда есть функция:

function loadNonExistingImages(){ 
    //this function would determine, which images do not exist on your server. and then save it in not_existing_images object. It may be a call to some backend server which returns this for you. 
} 

Если вы используете какой-то бэкэнд сервер, скрипт может подключаться сделать DB (если вы используете один для изображений) или каким-либо другим способом (проверьте, физически ли изображение), чтобы вернуть список изображений, которые не существуют. Используйте эту функцию, чтобы заполнить non_existing_images и после того, как она заполнила звонок initialize(); (если у вас нет серверного сервера, вы можете использовать js to check if images exist, но я настоятельно рекомендую это, если вы собираетесь использовать много изображений, потому что это приведет к огромному количеству запросов к серверу)

Тогда вам просто нужно настроить customGetTileURL функцию к чему-то вроде этого:

function customGetTileURL(a,b) { 
     if(non_existing_images[b] && non_existing_images[b][a.x] && non_existing_images[b][a.y]) return 'SERVER_PATH_TO_WHITE_IMAGE.jpg'; //if image doesn't exist return path to the white image 
     else return 'SERVER_PATH' + b + '/' + a.y + '/' + a.x + '.jpg' 
} 
+0

Спасибо за комментарий! У меня нет контроля над сервером (я использую Google Cloud Storage), хотя это похоже на хороший вариант, если у меня когда-нибудь будет один под моим контролем. Мне также нелегко узнать, какие плитки отсутствуют - я мог узнать, но последний тестовый файл, который у меня был, состоял из 20 000 пустых фрагментов (изначально 60 000 фрагментов), поэтому это не похоже на отличный вариант. – Brandon

+0

@Brandon - возможно, вы уже справились с этим, но выборка всех фрагментов сразу не всегда полезна. Установите границы и загружайте только те плитки, которые пересекают эти границы. Мы используем границы экрана + 50% в каждом направлении, чтобы пользователь мог перемещаться поблизости достаточно легко. Это делает несколько вещей: уменьшает полезную нагрузку до дюжины или около того плиток для каждого экрана); улучшает работу сайта; делает проверку существования плитки тривиальной. Это требует вызова сборщика стилей, когда границы меняются на ранее невидимые границы, но это небольшой компромисс. –

+0

D'oh - должно было ясно указать, что для пользователей с контролем над httpd.conf и/.htaccess, этап проверки состояния плитки в JavaScript является операционным решением, так как сервер может быть установлен на замените несуществующие изображения прозрачной черепицей глобально (через 'RewriteRule' в' httpd.conf'), или это можно сделать для каждой директории с помощью 'ErrorDocument 404/path/to/transparent.png' в' .htaccess' в корневом каталоге пирамиды плитки. Если это делается через 'httpd.conf', необходимо убедиться, что несуществование изображения зарегистрировано на стороне сервера, поэтому его можно оценить. –