Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I want use openlayers 2.13 dev and geoserver to achive the cluster of points. I user openlayers 2.13 dev 's "OpenLayers.WPSClient". here is my code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>wps</title> 
<link rel="stylesheet" type="text/css" href="./theme/default/style.css">
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map,build,gps1,gps2,wpsClient,pointStacker;
        var bounds = new OpenLayers.Bounds(
                113.458030700684, 34.6213035583496,
                113.84049987793, 34.9462623596191
        );

        var options={
            maxExtent: bounds,
            maxResolution: 0.0014940202236172,
            projection:'EPSG:4326',
            units:'m'
        }
        function init(){
            map=new OpenLayers.Map('map',options);
            build=new OpenLayers.Layer.WMS(
                    'buildings',
                    'http://localhost:8081/geoserver/gwc/service/wms',
                    {layers:'zhengzhou:buildarea_region',format:'image/png',tiled:true,transparent: true},
                    {isBaseLayer:true}
            );
            gps1=new OpenLayers.Layer.WMS(
                    'gps track',
                    'http://localhost:8081/geoserver/zhengzhou/wms',
                    {layers:'zhengzhou:gps_track',format:'image/png',tiled:true,transparent: true},
                    {isBaseLayer:false}
                    );
            gps2=new OpenLayers.Layer.Vector(
                    'cluster of points',
                    {
                        strategies : [new OpenLayers.Strategy.BBOX()],
                        protocol:new OpenLayers.Protocol.WFS({
                            url:'http://localhost:8081/geoserver/wfs',
                            featureType:'gps_track',
                            featureNS:'http://www.ahkeli.com',
                            geometryName: "the_geom",
                            featurePrefix: 'zhengzhou',
                            srsName:"EPSG:4326"
                        })
                    }
            );
            map.addLayer(build);
            map.addLayer(gps2);
            map.addControl(new OpenLayers.Control.LayerSwitcher({}))
            map.addControl(new OpenLayers.Control.PanZoomBar());
            var lonLat = new OpenLayers.LonLat(113.663221, 34.756871);
            map.setCenter(lonLat, 1);  
        }
        function cluster(){
            wpsClient=new OpenLayers.WPSClient({
                servers:{
                    local:'/geoserver/wps'
                }
            });

           pointStacker=wpsClient.getProcess('local','gs:PointStacker');
                      **pointStacker.execute({
                inputs:{
                    data:gps2.features,
                    cellSize:30,
                    outputBBOX:{projection: "EPSG:4326",bounds:bounds},
                    outputWidth:1024,
                    outputHeight:512
                },**
                success:function(output){
                    alert(output)

                }
            });

        }

    </script>
</head>
<body onload="init();">
    <button onclick="cluster();">cluster</button>
    <div id="map" class="workmap"></div>
</body>
</html>

but I don't know how to construct the pointStacker.execute especially outputBBOX, chrome gives me the error Uncaught TypeError: Cannot read property 'left' of undefined, meaning the source code's options.bounds.left could somebody give some help!

share|improve this question
add comment

1 Answer

I do it the right way as follows: wps var map,build,gps1,gps2,wpsClient,pointStacker; var bounds = new OpenLayers.Bounds( 113.458030700684, 34.6213035583496, 113.84049987793, 34.9462623596191 );

    var options={
        maxExtent: bounds,
        maxResolution: 0.0014940202236172,
        projection:'EPSG:4326',
        units:'m'
    }
    function init(){
        map=new OpenLayers.Map('map',options);
        build=new OpenLayers.Layer.WMS(
                'buildings',
                'http://localhost:8081/geoserver/gwc/service/wms',
                {layers:'zhengzhou:buildarea_region',format:'image/png',tiled:true,transparent: true},
                {isBaseLayer:true}
        );
        gps1=new OpenLayers.Layer.WMS(
                'gps track',
                'http://localhost:8081/geoserver/zhengzhou/wms',
                {layers:'zhengzhou:gps_track',format:'image/png',tiled:true,transparent: true},
                {isBaseLayer:false}
        );

        map.addLayer(build);

        map.addControl(new OpenLayers.Control.LayerSwitcher({}))
        map.addControl(new OpenLayers.Control.PanZoomBar());
        var lonLat = new OpenLayers.LonLat(113.663221, 34.756871);
        map.setCenter(lonLat, 1);
    }
    function cluster(){

       var wpsFormat=new OpenLayers.Format.WPSExecute();

       var doc=wpsFormat.write({
           identifier:"gs:PointStacker",
           dataInputs:[{
               identifier:"data",
               reference:{
                   mimeType:'text/xml',
                   href:'http://geoserver/wfs',
                   method:'POST',
                   body:{
                       wfs:{
                           version:'1.0.0',
                           url: "http://localhost:8081/geoserver/wfs",
                           featurePrefix: 'zhengzhou',
                           featureNS:'http://www.ahkeli.com',
                           featureType:'gps_track',
                           geometryName: "the_geom",
                           srsName:"EPSG:4326"
                       }
                   }
               }
           },
              {
                  identifier:"outputBBOX",
                  data:{
                      boundingBoxData:{
                          projection: "EPSG:4326",
                          bounds:bounds
                      }
                  }
              },
               {
                   identifier:"cellSize",
                   data:{
                       literalData:{
                           value:30
                       }
                   }
               },
               {
                   identifier:"outputWidth",
                   data:{
                       literalData:{
                           value:256
                       }
                   }
               },
               {
                   identifier:"outputHeight",
                   data:{
                       literalData:{
                           value:256
                       }
                   }
               }
           ],
           responseForm:{
               rawDataOutput:{
                   mimeType:"application/json",
                   identifier:"result"
               }
           }

       });

        OpenLayers.Request.POST({
            url:"http://localhost:8081/geoserver/ows",
            data:doc,
            success:function(response){
                    alert(response.responseText) ;
            }
        });

    }

</script>

cluster

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.