Question

我可以使用Google地图中的滑块成功更改自定义图块的不透明度.... http://www.geology.ar.gov/geology/geology_map_full.htm

但是，我无法使用Google地图中的滑块更改GeoServer叠加层的不透明度... http://www.geology.ar.gov/geology/strat_geomap_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

根据documentation，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应该可以工作，但你需要将它移到全局范围才能使用它。

是否可以在Google Maps API v3中动态更改GeoServer叠加层的不透明度

1 个答案: