kml 无法在谷歌地图上正确呈现

Question

我已经在谷歌地图上设置了 kml。问题是当用户开始放大和缩小世界的特定区域并同时平移地图时，kml 加载但是透明的。如果你知道它在哪里，你仍然可以点击它，但你看不到它。

您可以通过http://www.spectrumgeo.com/seismic-data-library/multi-client-library/interactive-map进行测试，如果您浏览到世界的澳大利亚部分并放大缩小并在整个大陆上平移，就会出现问题。当用户快速执行此操作时会发生这种情况。

地图目录下的htaccess

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

根目录下的htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_URI} !=/server-status
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

BrowserMatch MSIE ie
Header set X-UA-Compatible: IE=Edge
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie

# Disable Directory Browsing
Options All -Indexes

#needed for knowledge map
Header add "Access-Control-Allow-Origin" "*"
#Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

#ModPagespeedEnableFilters lazyload_images




#http://crunchify.com/how-to-speed-up-wordpress-leveraging-browser-caching-via-htaccess/
Header unset Pragma
Header unset ETag
FileETag None



<IfModule mod_headers.c>
# WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf|js|css)$">
    Header set Cache-Control "max-age=604800, public"

# 1day
#    Header set Cache-Control "max-age=86400, public"
</FilesMatch>
</IfModule>

## EXPIRES CACHING ##

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 weeks"
ExpiresByType image/jpeg "access 1 weeks"
ExpiresByType image/gif "access 1 weeks"
ExpiresByType image/png "access 1 weeks"
ExpiresByType text/css "access 1 days"
ExpiresByType text/html "access 1 weeks"
ExpiresByType application/pdf "access 1 weeks"
ExpiresByType text/x-javascript "access plus 1 days"
ExpiresByType application/x-shockwave-flash "access 1 months"
ExpiresByType image/x-icon "access 1 years"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Answer 1

放大您在澳大利亚的地图，似乎显示了很多功能。我怀疑您的 KML 文件已经非常接近 Google 将在服务器端呈现的 limits... 或者至少可以快速呈现的内容。

想到两个解决方案：

1. 在您的服务器上将 KML 渲染为透明图块，并使用图像叠加层而不是 KMLLayer 来渲染这些静态图块。
2. 渲染 KML 客户端。 GeoJSON 可能会更容易解析，但这些特征看起来像线条和多边形，您可以尝试在 JavaScript API 中原生渲染。如果您将 KML 转换为 JSON，google.maps.Data 层可能是一个很好的起点。

如果使用 KMLLayer 是您的唯一选择，那么确保您设置良好的 HTTP 缓存标头并真正快速地提供 KML 可以帮助最大限度地减少任何加载延迟。