在 Google 地图中调用“默认图块”答案

【问题标题】：Calling a "default tile" in Google Maps在 Google 地图中调用“默认图块”
【发布时间】：2016-09-09 02:18:49
【问题描述】：

我正在开展一个项目，该项目将数字组织学（显微镜）幻灯片图像转换为按 Google 地图架构排列的 256x256 像素 JPEG 图块。由于这些组织设置在完全白色的背景 (see example here) 上，因此我使用的程序在将显微镜幻灯片文件转换为平铺 JPEG 时，它还会删除完全白色的瓷砖。这节省了大量的存储空间，并导致上传到服务器的文件更少，这很有帮助，因为我无法控制服务器（我正在使用 Google Storage）。

但是，这会在图像中留下空白。当该位置不存在图块时，我正在尝试让 Google 地图脚本加载单个全白 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>

任何建议将不胜感激。

【问题讨论】：

通过ErrorDocument404简单定义一个默认平铺
我需要控制服务器才能做到这一点，是吗？我无法控制服务器（我正在向 Google 支付存储费用...我会将其添加到帖子中）。
当你想要一个白色的瓷砖缺失瓷砖时，只需为所有瓷砖定义一个白色背景。
哦。呃。这样就行了！非常感谢！您想将其添加为答案，以便我给予您信任吗？
这不适用于@Brandon 的问题，因为他最多只使用缩放 9，但是创建一个使用白色（或透明）瓷砖作为空瓷砖的瓷砖金字塔是一个可怕的如果您的地图缩放在高缩放时覆盖大面积*并且您的要素是边界（例如，州边界；财产边界）。为什么？因为在缩放 > 15 时，空白图块占平均图块目录的约 95%，而缩放 > 15 则占所有图块的近 95%。每个空白切片文件为 360 字节，但由于 最小块大小，它在磁盘上占用 4KB。加载到边界限制；在客户端进行测试。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您有一些选项，但它们取决于您的设置和您对它的控制量。

1.选项：您似乎正在从服务器加载图像：如果服务器在您的控制下运行，并且它使用 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.
}

如果您使用一些后端服务器，脚本可以连接做数据库（如果您使用一个用于图像）或其他方式（检查图像是否实际存在）以返回不存在的图像列表。使用该函数填充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'
}

【讨论】：

感谢您的评论！我无法控制服务器（我使用的是 Google Cloud Storage），但如果我曾经拥有一台服务器，这似乎是一个不错的选择。我也不容易知道缺少哪些图块——我可以找出来，但我做的最后一个测试文件有 20,000 个空白图块（最初是 60,000 个图块），所以这似乎不是一个好的选择。
@Brandon - 你可能已经解决了这个问题，但是一次获取所有图块通常没有用。设置边界并仅加载与这些边界相交的图块。我们在每个方向上使用屏幕边界 + 50%，以便用户可以在附近合理无缝地导航。这做了几件事：将有效负载减少到每个屏幕的十几个图块）；提高网站响应能力；使检查瓷砖存在变得微不足道。当边界更改为以前未查看的边界时，它需要调用 tile-fetcher，但这是一个小的权衡。
D'oh - 应该明确指出，对于控制 httpd.conf 和/或 .htaccess 的用户，JavaScript 中的“检查 tile 是否存在”阶段是一个操作决策，因为服务器可以设置为全局用透明图块替换不存在的图像（通过httpd.conf 中的RewriteRule），或者可以在每个目录的基础上使用.htaccess 中的ErrorDocument 404 /path/to/transparent.png 在根目录中完成瓷砖金字塔。如果是通过httpd.conf 完成的，需要确保在服务器端记录不存在的图像，以便对其进行评估。