kml在谷歌地图上无法正确渲染

时间:2015-09-29 11:33:18

标签: google-maps-api-3 kml cache-control

我在谷歌地图上设置了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 ##

1 个答案:

答案 0 :(得分:1)

放大到您在澳大利亚各地的地图,看起来很多功能都会显示出来。我怀疑你的KML文件非常接近Google将呈现服务器端的limits ......或者至少可以快速呈现的内容。

我想到了两个解决方案:

  1. 将KML渲染到服务器上的透明图块中,并使用图像叠加层渲染这些静态图块而不是KMLLayer。
  2. 渲染KML客户端。 GeoJSON可能更容易解析,但这些功能看起来像线条和多边形,您可以尝试在JavaScript API中进行原生渲染。如果将KML转换为JSON,google.maps.Data图层可能是一个很好的起点。
  3. 如果使用KMLLayer是您唯一的选择,确保您设置好的HTTP缓存标头并快速为您的KML提供服务可以帮助减少任何加载延迟。