是否可以在Google v3中动态更改GeoServer覆盖的不透明度？

Question

我可以用谷歌地图中的滑块成功地改变定制瓷砖的不透明度.full.htm

但是，我不能用谷歌地图中的滑块改变GeoServer覆盖层的不透明度.test.htm

它们都使用类似的编码，但是当您调整第二个映射中的不透明度滑块时，我被警告setOpacity不是一个函数。是否有可能在Google中使用滑块动态地更改GeoServer覆盖层的不透明度？

对于自定义的平铺图，这里是我使用的代码

function CustomMapType(args){

                var opts = {

                      getTileUrl: function(coord, zoom) {

                        if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
                          return args.BaseUrl + "datatiles/none.png";
                        } 
                        var ymax = 1 << zoom;
                        var zFactor = Math.pow(2,zoom);
                        var y = ymax - coord.y -1;

                        var tileBounds = new google.maps.LatLngBounds(                              
                            map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x)*args.tileSize/zFactor, (coord.y+1)*args.tileSize/zFactor ) ),
                            map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x+1)*args.tileSize/zFactor, (coord.y)*args.tileSize/zFactor ) )
                         );

                        if (mapBounds.intersects(tileBounds)){

                            return args.BaseUrl + "datatiles/COGEO/" + zoom + "/x" + coord.x + "_y" + coord.y + ".png" ;
                        } else {

                            return args.BaseUrl + "datatiles/none.png";
                        }
                    },
                    tileSize: new google.maps.Size(args.tileSize, args.tileSize),
                    isPng: true,
                    maxZoom:  args.maxZoom,
                    minZoom:  args.minZoom
                };
                var map_type = new google.maps.ImageMapType(opts);
                map_type.name = args.name;
                map_type.alt = args.alt;

                return map_type;

            } //end CustomMapType()

function setTiles(_opacity){

                for(var i in customtiles){
                    map.overlayMapTypes.setAt(i, customtiles[i]);
                    customtiles[i].setOpacity(_opacity);
                }                   
            } 




            function changeMapTileOpacity(_opacity){

                for(var i in customtiles){
                    customtiles[i].setOpacity(_opacity);
                }
            }



            /** 
            * tile Opacity slider control
            */
            function FilterControl(controlDiv, map) {

                controlDiv.style.padding = '4px';
                var controlUI = document.createElement('DIV');
                controlUI.id = "opsContainer";
                controlUI.style.cssText="position:absolute;right:7px;width: 70px; height: 21px; z-index: 0; top: 10px;";                    

                var controlKnob = document.createElement('DIV');
                controlKnob.id = "knob";
                controlKnob.style.cssText="height: 21px; width: 13px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png); left: 22px; top: 0px; position: absolute; cursor: pointer; background-position: -70px 0px;";

                var controlOpSlider = document.createElement('DIV');
                controlOpSlider.id = "opSlider";
                controlOpSlider.style.cssText="height:21px; width:70px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png)";    

                controlOpSlider.appendChild(controlKnob);
                controlUI.appendChild(controlOpSlider);
                controlDiv.appendChild(controlUI);

                var opSlider = new ExtDraggableObject(controlKnob, { restrictY:true, container:controlOpSlider});
                opSlider.setValueX(opacity*57);

                var dragEndEvent = google.maps.event.addListener(opSlider, "dragend", function(e) {
                    var opVal = opSlider.valueX();
                    changeMapTileOpacity(opVal/57);
                });

            } //end FilterControl()

这是在mapLoad()函数中使用的。

/** 
                * create custom map type tile
                */ 
                customtiles[0] =  CustomMapType({
                    name        : 'AGS Geology',
                    alt         : 'Geologic Map Custom Tile',
                    tileSize    : 256,
                    BaseUrl     : "http://www.geology.ar.gov/geology/",
                    minZoom     : mapMinZoom,
                    maxZoom     : mapMaxZoom
                });


                setTiles(opacity);


                //add opacity slider to map
                var filterDiv = document.createElement('DIV');
                var mControl = new FilterControl(filterDiv, map);
                filterDiv.index = 1;
                filterDiv.style.cssText="position:absolute;right:7px;";
                map.controls[google.maps.ControlPosition.RIGHT_TOP].push(filterDiv);

关于GeoServer地图..。

function geoServerOverlay(args) {

var opts = {

    getTileUrl: function(coord, zoom)
    {
        var lULP = new google.maps.Point(coord.x*256,(coord.y+1)*256);
        var lLRP = new google.maps.Point((coord.x+1)*256,coord.y*256);

        var projectionMap = new MercatorProjection();

        var lULg = projectionMap.fromDivPixelToSphericalMercator(lULP, zoom);
        var lLRg  = projectionMap.fromDivPixelToSphericalMercator(lLRP, zoom);

        var lUL_Latitude = lULg.y;
        var lUL_Longitude = lULg.x;
        var lLR_Latitude = lLRg.y;
        var lLR_Longitude = lLRg.x;

        if (lLR_Longitude < lUL_Longitude){
          lLR_Longitude = Math.abs(lLR_Longitude);
        }
        return GEOSERVERBASE + "/geoserver/wms?" + wmsparams.join("&") + "&layers=" + args.geoLayer + "&bbox=" + lUL_Longitude + "," + lUL_Latitude + "," + lLR_Longitude + "," + lLR_Latitude + "&styles=" + args.geoStyle;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    alt: args.geoName    
};

return opts;

}

overlayMaps[0] = geoServerOverlay({
            geoLayer: Geo500K,
            geoStyle: 'qcm_Geo500K',                
            geoName: 'Geology 500K'
        }); 

var overlayMap = new google.maps.ImageMapType(overlayMaps[0]);

    map.overlayMapTypes.setAt(1,overlayMap); //set behind placeholder at 1 spot 

试图改变不透明..。

function changeMapTileOpacity(_opacity){

                for(var i in overlayMaps){
                    overlayMaps[i].setOpacity(_opacity);
                }
            }  

Answer 1

根据文档，ImageMapType对象有一个setOpacity方法。您的代码正在您的geoServerOverlay类(它不是ImageMapType对象)上调用它。

overlayMaps[0] = geoServerOverlay({
            geoLayer: Geo500K,
            geoStyle: 'qcm_Geo500K',                
            geoName: 'Geology 500K'
        });     

..。

overlayMaps[i].setOpacity(_opacity);

在我看来，您至少保存了对一个ImageMapType对象的引用：

    var overlayMap = new google.maps.ImageMapType(overlayMaps[0]);

因此，overlayMap.setOpacity应该可以工作，但您需要将其移到全局范围才能使用。