Question

我正在开展洪水泛滥工作网站（USGS），并且在选择新的叠加层时遇到了释放PNG叠加层内存的问题。用户可以选择不同的叠加，然后将显示不同的淹没地图。问题是在选择了大约4-5个不同的叠加层后，内存填满并停止显示新选择的叠加层。我们正在尝试将我们的网站转换为Google Maps api v3。我们尽可能地减少了PNG文件的大小（它们平均为150kb）并且我的想法已经不多了。我在每次选择新的叠加层时将地图设置为null以及pngOverlay变量，但每次新选择时内存使用量增加约.40 GB。我也尝试使用.htaccess文件来消除PNG的缓存，这也无法正常工作。

我从网站上删除了所有jQuery和工作元素，以统治其他所有内容。这个版本只是地图和表格，没有设计元素。还是有同样的问题。我在下面发布了我的代码的精简版本，并将其放在可公开访问的服务器上 - http://il.water.usgs.gov/ifhp/test/

任何提示/解决方法都将非常感谢！谢谢。

//的index.php

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="STYLESHEET" type="text/css" href="stylesheets/3col.css">

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
    <script type="text/javascript" src="scripts/mapv3_3.js"></script>

</head>

<body onload="initialize()">
<!--[if lte IE 6]><script src="ie6/warning.js"></script><script>window.onload=function(){e("ie6/")}</script><![endif]-->
    <div>
        <form name="myform">
            <input onclick="loadPNG();" checked="true" type="radio" id="AreaButton" value="Area" name="OverlayType"/>Inundation area<br/>
            <input onclick="loadPNG();" type="radio" id="DepthsButton" value="Depths" name="OverlayType"/>Inundation depth<br/><br/>&nbsp;
            <select onchange="loadPNG();" type="select" id="GageHeightSelect" name="GageHeight" size="9">
                <option selected="true" value="6">&nbsp;&nbsp;570.62 (6.0)</option>
                <option value="7">&nbsp;&nbsp;571.62 (7.0)</option>
                <option value="8">&nbsp;&nbsp;572.62 (8.0)</option>
                <option value="9">&nbsp;&nbsp;573.62 (9.0)</option>
                <option value="10">&nbsp;&nbsp;574.62 (10.0)</option>
                <option value="11">&nbsp;&nbsp;575.62 (11.0)</option>
                <option value="12">&nbsp;&nbsp;576.62 (12.0)</option>
                <option value="13">&nbsp;&nbsp;577.62 (13.0)</option>
                <option value="14">&nbsp;&nbsp;578.62 (14.0)</option>
            </select>
        </form>
    </div>
    <div id="map_canvas"></div>
</body>

// mapv3_3.js

var map;
var pngOverlay;
var pngName;
var bounds;
var bounds9;
var bounds10;

var mylatlng = new google.maps.LatLng(41.62, -88.20);
var myLatlng1 = new google.maps.LatLng(41.5222527,-88.1925623); //coordinates for marker 1
var myLatlng2 = new google.maps.LatLng(41.69,-88.16638889); //coordinates for marker 2

var curdate= new Date();
var curtime=curdate.getTime();

function initialize() {
//MAP
var mapOptions = {
  center: mylatlng,
  zoom: 11
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

//MARKER IMAGES
var imageRefGage = new google.maps.MarkerImage('http://il.water.usgs.gov/ifhp/will/images/icon16.png',
    null,
    null,
    new google.maps.Point(16, 16),
    new google.maps.Size(32, 32));
var imageAuxGage = new google.maps.MarkerImage('http://il.water.usgs.gov/ifhp/will/images/icon16b.png',
    null,
    null,
    new google.maps.Point(16, 16),
    new google.maps.Size(32, 32));
var shad = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
    new google.maps.Size(37, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));


//MARKERS
var marker1 = new google.maps.Marker({
    position: myLatlng1, 
    map: map,
    title:"05540500",
    icon: imageRefGage,
    shadow: null
}); 

var marker2 = new google.maps.Marker({
    position: myLatlng2, 
    map: map,
    title:"05540290",
    icon: imageAuxGage,
    shadow: null
});

//SET BOUNDS
// bounds for loading inundation layer png files (default, applies to all but 2 layers)
var swBound = new google.maps.LatLng(41.49262999190302, -88.24375135362827);
var neBound = new google.maps.LatLng(41.72723485385204, -88.13178850320171);
    bounds = new google.maps.LatLngBounds(swBound, neBound);

// bounds for loading inundation layer new_surface9 png file
var swBound9 = new google.maps.LatLng(41.4970009997941, -88.23676753388432);
var neBound9 = new google.maps.LatLng(41.72228131551275, -88.14084620668086);
    bounds9 = new google.maps.LatLngBounds(swBound9, neBound9);

// bounds for loading inundation layer new_surface10 png file
var swBound10 = new google.maps.LatLng(41.49696802795427, -88.2368497532207);
var neBound10 = new google.maps.LatLng(41.72231432415114, -88.140818671907);
    bounds10 = new google.maps.LatLngBounds(swBound10, neBound10);

loadPNG();
};

function loadPNG() {
if (document.myform.GageHeight.value != "") {
    if (getCheckedValue(document.myform.elements['OverlayType']) == "Depths") {
        pngName = "new_depth" + document.myform.GageHeight.value + "-fs8";
    } else {
        pngName = "new_surface" + document.myform.GageHeight.value + "-fs8";
    }

    pngFile = "http://il.water.usgs.gov/kml_files/png/" + pngName + ".png";

    if (pngOverlay!=null) {
        pngOverlay.setMap(null);
        pngOverlay = null;
    } 

    if (pngName == "new_surface9-fs8") {
        pngOverlay = new google.maps.GroundOverlay(pngFile, bounds9); 
    } else if (pngName == "new_surface10-fs8") {
        pngOverlay = new google.maps.GroundOverlay(pngFile, bounds10); 
    } else {
        pngOverlay = new google.maps.GroundOverlay(pngFile, bounds); 
    }
    pngOverlay.setMap(map);
}
};

function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";
};

Answer 1

我无法确认泄漏（在FF中测试，当我尝试打开页面或其中一个图像时铬会立即崩溃）。

我想这里的问题是图像的大小（不是文件大小，50kb应该不是问题）。

用于叠加的图像尺寸为 6795 x 14239 px ，必须按比例缩小到例如在初始缩放11到 140x438 时，需要非常高的CPU使用率（参见Whats the rationale behind the YSlow rule "Don't Scale Images in HTML"）。

尝试使用尺寸合适的图像（取决于缩放级别）

发布时谷歌地图v3 PNG覆盖不释放内存

1 个答案: