Changes between Initial Version and Version 1 of ZooWebSite/Demo/GdalProfileJs


Ignore:
Timestamp:
Dec 1, 2010, 9:47:21 AM (9 years ago)
Author:
djay
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • ZooWebSite/Demo/GdalProfileJs

    v1 v1  
     1{{{
     2#!html
     3<!-- Add this in your header -->
     4<script type="text/javascript" src="/openlayers/lib/OpenLayers.js"></script>
     5<script type="text/javascript" src="js/highcharts.js"></script>
     6<script type="text/javascript">
     7var map, layer, lineLayer, pointLayer, select, hover, multi, control;
     8        var drawControls,points;
     9
     10        function initMap(){
     11           
     12            map = new OpenLayers.Map('map', {
     13                controls: [
     14                    new OpenLayers.Control.PanZoom(),
     15                    new OpenLayers.Control.Permalink(),
     16                    new OpenLayers.Control.Navigation()
     17                ]
     18            });
     19         
     20            layer = new OpenLayers.Layer.WMS(
     21                "States WMS/WFS",
     22                "http://demo1.zoo-project.org/cgi-bin/mapserv?map=/var/www/demo.zoo-project.org/htdocs/mapserver/mntfr.map",
     23                {layers: 'zoowpsmnt', format: 'image/png'}, {isBaseLayer:false}
     24            );
     25           
     26            layerLS = new OpenLayers.Layer.WMS(
     27                "Landsat baselayer",
     28                "http://wms.jpl.nasa.gov/wms.cgi?",
     29                {layers: 'modis', format: 'image/png'}, {isBaseLayer:true}
     30            );
     31            lineLayer = new OpenLayers.Layer.Vector("Line Layer");
     32            lineLayer.style={
     33                strokeColor: "#FD8F01",
     34                strokeWidth: 3,
     35                strokeDashstyle: "default",
     36                pointRadius: 6,
     37                pointerEvents: "visiblePainted"
     38            };
     39            pointLayer = new OpenLayers.Layer.Vector("Point Layer");
     40            pointLayer.style={
     41                fillColor: "#3E576F",
     42                fillOpacity: 0.9,
     43                pointRadius:4
     44            };
     45            drawControls = {
     46                line: new OpenLayers.Control.DrawFeature(lineLayer,
     47                        OpenLayers.Handler.Path)
     48            };
     49            map.addControl(drawControls["line"]);
     50            select = new OpenLayers.Layer.Vector("Selection", {styleMap:
     51                new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
     52            });
     53            hover = new OpenLayers.Layer.Vector("Hover");
     54            multi = new OpenLayers.Layer.Vector("Multi", {styleMap:
     55                new OpenLayers.Style({
     56                  fillColor:"red",
     57                  fillOpacity:0.4,
     58                  strokeColor:"red",
     59                  strokeOpacity:1,
     60                  strokeWidth:2
     61                })
     62            });
     63            map.addLayers([layer, layerLS, lineLayer, pointLayer, select, hover, multi]);
     64           
     65            control = new OpenLayers.Control.GetFeature({
     66                //box: true,
     67                //hover: true,
     68                //multipleKey: "shiftKey",
     69                //toggleKey: "ctrlKey",
     70                protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer)
     71            });
     72            control.events.register("featureselected", this, function(e) {
     73                select.addFeatures([e.feature]);
     74            });
     75            control.events.register("featureunselected", this, function(e) {
     76                select.removeFeatures([e.feature]);
     77            });
     78            control.events.register("hoverfeature", this, function(e) {
     79                hover.addFeatures([e.feature]);
     80            });
     81            control.events.register("outfeature", this, function(e) {
     82                hover.removeFeatures([e.feature]);
     83            });
     84            map.addControl(control);
     85            control.activate();
     86
     87            map.zoomToExtent(new OpenLayers.Bounds( -2.0041701,  41.9958302, 8.0041698,  52.0041701));
     88        }
     89        function simpleProcessing1(aProcess) {
     90          if(lineLayer.features.length == 0)
     91            return alert("No path created !");
     92          var url = '/zoosoo/?request=Execute&service=WPS&version=1.0.0&';
     93          var geojson=new OpenLayers.Format.GeoJSON();
     94          url += 'Identifier=GdalExtractProfile&DataInputs=RasterFile=topofr.tif@dataType=string;Geometry=';
     95          eval( "var toto= "+geojson.write(lineLayer.features[0],false)+";");
     96          var geom="{\"type\":\"LineString\",\"coordinates\":[";
     97          for(var i=0;i<toto.geometry.coordinates.length;i++){
     98             geom+="["+toto.geometry.coordinates[i][0]+","+toto.geometry.coordinates[i][1]+"]";
     99             if(i<toto.geometry.coordinates.length-1)
     100                geom+=",";
     101          }
     102          geom+="]}";
     103          url += geom+"@dataType=string&RawDataOutput=Profile";
     104
     105          var request = new OpenLayers.Request.XMLHttpRequest();
     106          request.open('GET',url,true);
     107          request.onreadystatechange = function() {
     108            if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
     109              var  reg=new  RegExp("[;]", "g");
     110              var tmp=request.responseText.split(reg);
     111              var idxs=new Array();
     112              var values= new Array();
     113              points=new Array();
     114              for(var i=0;i<tmp.length;i++){
     115                var  reg1=new  RegExp("[,]", "g");
     116                var tmpString=tmp[i]+"";
     117                var tmp1=tmpString.split(reg1);
     118                if(tmp1[0] && tmp1[1] && tmp1[2]){
     119                        idxs[i]=i;
     120                        values[i]=parseInt(tmp1[2]);
     121                        points[i]=[parseFloat(tmp1[0]),parseFloat(tmp1[1])];
     122                }
     123              }
     124              var chart = new Highcharts.Chart({
     125                chart: {
     126                        renderTo: 'chart_container',
     127                        zoomType: 'x'
     128                },
     129                title: {
     130                        text: 'The profile of your path'
     131                },
     132                xAxis: {
     133                        title: { text: 'Points' },
     134                        maxZoom: 10
     135                },
     136                yAxis: {
     137                        title: { text: null },
     138                        startOnTick: false,
     139                        showFirstLabel: false
     140                },
     141                legend: {
     142                        enabled: false
     143                },
     144                plotOptions: {
     145                        area: {
     146                                cursor: 'pointer',
     147                                point: {
     148                                        events: {
     149                                                click: function() {
     150                                                        if(pointLayer.features.length>0)
     151                                                                pointLayer.removeFeatures(pointLayer.features);
     152                                                        var tmpPoint=new OpenLayers.Geometry.Point(points[this.x][0],points[this.x][1]);
     153                                                        pointLayer.addFeatures([new OpenLayers.Feature.Vector(tmpPoint,null,null)]);
     154                                                }
     155                                        }
     156                                },
     157                                fillColor: {
     158                                        linearGradient: [0, 0, 0, 300],
     159                                        stops: [
     160                                                [0, '#FD8F01'],
     161                                                [1, 'rgba(255,255,255,0)']
     162                                        ]
     163                                },
     164                                lineWidth: 1,
     165                                marker: {
     166                                        enabled: false,
     167                                        states: {
     168                                                hover: {
     169                                                        enabled: true,
     170                                                        radius: 3
     171                                                }
     172                                        }
     173                                },
     174                                shadow: false,
     175                                states: {
     176                                        hover: {
     177                                                lineWidth: 1
     178                                        }
     179                                }
     180                        }
     181                },
     182                tooltip: {
     183                        formatter: function() {
     184                                return '<b>Altitude</b><br />Value : '+Highcharts.numberFormat(this.y, 0);
     185                        }
     186                },
     187                series: [{
     188                        name: 'Altitude',
     189                        type: 'area',
     190                        data: values
     191                }]
     192              });
     193
     194            }
     195          }
     196          request.send();
     197        }
     198        function restart(){
     199                if(lineLayer.features.length>0)
     200                        lineLayer.removeFeatures(lineLayer.features);
     201                if(pointLayer.features.length>0)
     202                        pointLayer.removeFeatures(pointLayer.features);
     203                document.getElementById("chart_container").innerHTML="";
     204                drawControls['line'].deactivate();
     205                isActivated=false;
     206        }
     207        var isActivated=false;
     208        function toggleControl() {
     209          if(!isActivated){
     210                drawControls['line'].activate();
     211                isActivated=true;
     212          }
     213          else{
     214                drawControls['line'].deactivate();
     215                isActivated=false;
     216          }
     217        }
     218</script>
     219}}}

Search

Context Navigation

ZOO Sponsors

http://www.zoo-project.org/trac/chrome/site/img/geolabs-logo.pnghttp://www.zoo-project.org/trac/chrome/site/img/neogeo-logo.png http://www.zoo-project.org/trac/chrome/site/img/apptech-logo.png http://www.zoo-project.org/trac/chrome/site/img/3liz-logo.png http://www.zoo-project.org/trac/chrome/site/img/gateway-logo.png

Become a sponsor !

Knowledge partners

http://www.zoo-project.org/trac/chrome/site/img/ocu-logo.png http://www.zoo-project.org/trac/chrome/site/img/gucas-logo.png http://www.zoo-project.org/trac/chrome/site/img/polimi-logo.png http://www.zoo-project.org/trac/chrome/site/img/fem-logo.png http://www.zoo-project.org/trac/chrome/site/img/supsi-logo.png http://www.zoo-project.org/trac/chrome/site/img/cumtb-logo.png

Become a knowledge partner

Related links

http://zoo-project.org/img/ogclogo.png http://zoo-project.org/img/osgeologo.png