调用一个“;默认瓦片”;在谷歌地图中

Calling a "default tile" in Google Maps

本文关键字：谷歌地图 默认 调用 一个      更新时间：2023-09-26

我正在进行一个项目，该项目将数字组织学（显微镜）幻灯片图像转换为谷歌地图架构中排列的256x256像素JPEG瓦片。由于这些组织是在完全白色的背景下设置的（见这里的示例），我使用的程序在将显微镜载玻片文件转换为平铺的JPEG时，也会删除完全白色的平铺。这节省了大量的存储空间，也减少了上传到服务器的文件，这很有帮助，因为我无法控制服务器（我使用的是谷歌存储）。

然而，这在图像中留下了空白。我正在尝试让谷歌地图脚本加载一个全白色JPEG图像，当瓷砖不在那个位置时。我在任何地方都找不到答案，我的编程技能充其量也只是新手水平。我能找到的最接近的东西是使用瓷砖覆盖，但我并不总是知道哪些瓷砖需要更换，而且这似乎是填补这些未填充区域的必要信息。

我目前（非常非常基本的脚本）如下：

< 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.选项：似乎您正在从服务器加载图像：如果服务器在您的控制下运行，并且它使用Apache或其他可以设置的Web服务器解决方案，则如果请求的图像不存在，您可以将其配置为返回默认图像（在您的情况下为白色图像）。请参阅这个SO问题，了解如何使用Apache实现这一点。如果可能的话，我肯定会选择这个选项。

2.选项：如果你事先知道哪些文件不存在，你可以将它们添加到一些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.
}

如果您使用某个后端服务器，脚本可以连接do DB（如果您正在使用一个用于图像的服务器），或者通过其他方式（检查图像是否实际存在）返回不存在的图像列表。使用该函数填充non_existing_images，填充后调用initialize();（如果你没有后端服务器，你可以使用js检查图像是否存在，但如果你要使用大量图像，我强烈反对这样做，因为这会导致对服务器的大量请求）

然后你只需要把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'
}
相关文章：