我正在从事一个项目，将数字组织学(显微镜)幻灯片图像转换为在 Google map 架构中排列的 256x256 像素 JPEG 图 block 。由于这些组织设置在完全白色的背景下 (see example here)，我正在使用一个程序，当将显微镜幻灯片文件转换为平铺的 JPEG 时，它也会删除完全白色的平铺。这节省了大量的存储空间，并减少了上传到服务器的文件，这很有用，因为我无法控制服务器(我使用的是 Google 存储)。
但是，这会在图像中留下空白孔。当该位置不存在图 block 时，我试图让 Google map 脚本加载单个全白 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
">
function initialize()
{
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeControl: false,
streetViewControl: false,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("
map_canvas "), myOptions);
var VM_Map = new google.maps.ImageMapType({
name: 'Digital Histology'
alt: 'Digital Histology',
getTileUrl: function(coord, zoom) {return customGetTileURL(coord, zoom);},
tileSize: new google.maps.Size(256, 256),
minZoom: 1,
maxZoom: 9,
isPng: false
});
map.mapTypes.set('VM_Map', VM_Map);
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>如有任何建议，我们将不胜感激。
最佳答案
您有一些选择，但它们取决于您的设置和您对其的控制程度。
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'
}
关于javascript - 在 Google map 中调用 "default tile"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37200612/