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

Timestamp:

Dec 1, 2010, 9:47:21 AM (13 years ago)

Author:

djay

Comment:

--

ZooWebSite/Demo/GdalProfileJs

@@ +1 @@
+{{{
+#!html
+<!-- Add this in your header -->
+<script type="text/javascript" src="/openlayers/lib/OpenLayers.js"></script>
+<script type="text/javascript" src="js/highcharts.js"></script>
+<script type="text/javascript">
+var map, layer, lineLayer, pointLayer, select, hover, multi, control;
+        var drawControls,points;
+
+        function initMap(){
+            
+            map = new OpenLayers.Map('map', {
+                controls: [
+                    new OpenLayers.Control.PanZoom(),
+                    new OpenLayers.Control.Permalink(),
+                    new OpenLayers.Control.Navigation()
+                ]
+            });
+          
+            layer = new OpenLayers.Layer.WMS(
+                "States WMS/WFS",
+                "http://demo1.zoo-project.org/cgi-bin/mapserv?map=/var/www/demo.zoo-project.org/htdocs/mapserver/mntfr.map",
+                {layers: 'zoowpsmnt', format: 'image/png'}, {isBaseLayer:false}
+            );
+            
+            layerLS = new OpenLayers.Layer.WMS(
+                "Landsat baselayer",
+                "http://wms.jpl.nasa.gov/wms.cgi?",
+                {layers: 'modis', format: 'image/png'}, {isBaseLayer:true}
+            );
+            lineLayer = new OpenLayers.Layer.Vector("Line Layer");
+            lineLayer.style={
+                strokeColor: "#FD8F01",
+                strokeWidth: 3,
+                strokeDashstyle: "default",
+                pointRadius: 6,
+                pointerEvents: "visiblePainted"
+            };
+            pointLayer = new OpenLayers.Layer.Vector("Point Layer");
+            pointLayer.style={
+                fillColor: "#3E576F",
+                fillOpacity: 0.9,
+                pointRadius:4 
+            };
+            drawControls = {
+                line: new OpenLayers.Control.DrawFeature(lineLayer,
+                        OpenLayers.Handler.Path)
+            };
+            map.addControl(drawControls["line"]);
+            select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
+                new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
+            });
+            hover = new OpenLayers.Layer.Vector("Hover");
+            multi = new OpenLayers.Layer.Vector("Multi", {styleMap: 
+                new OpenLayers.Style({
+                  fillColor:"red",
+                  fillOpacity:0.4,
+                  strokeColor:"red",
+                  strokeOpacity:1,
+                  strokeWidth:2
+                })
+            });
+            map.addLayers([layer, layerLS, lineLayer, pointLayer, select, hover, multi]);
+            
+            control = new OpenLayers.Control.GetFeature({
+                //box: true,
+                //hover: true,
+                //multipleKey: "shiftKey",
+                //toggleKey: "ctrlKey",
+                protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer)
+            });
+            control.events.register("featureselected", this, function(e) {
+                select.addFeatures([e.feature]);
+            });
+            control.events.register("featureunselected", this, function(e) {
+                select.removeFeatures([e.feature]);
+            });
+            control.events.register("hoverfeature", this, function(e) {
+                hover.addFeatures([e.feature]);
+            });
+            control.events.register("outfeature", this, function(e) {
+                hover.removeFeatures([e.feature]);
+            });
+            map.addControl(control);
+            control.activate();
+
+            map.zoomToExtent(new OpenLayers.Bounds( -2.0041701,  41.9958302, 8.0041698,  52.0041701));
+        }
+        function simpleProcessing1(aProcess) {
+          if(lineLayer.features.length == 0)
+            return alert("No path created !");
+          var url = '/zoosoo/?request=Execute&service=WPS&version=1.0.0&';
+          var geojson=new OpenLayers.Format.GeoJSON();
+          url += 'Identifier=GdalExtractProfile&DataInputs=RasterFile=topofr.tif@dataType=string;Geometry=';
+          eval( "var toto= "+geojson.write(lineLayer.features[0],false)+";");
+          var geom="{\"type\":\"LineString\",\"coordinates\":[";
+          for(var i=0;i<toto.geometry.coordinates.length;i++){
+             geom+="["+toto.geometry.coordinates[i][0]+","+toto.geometry.coordinates[i][1]+"]";
+             if(i<toto.geometry.coordinates.length-1)
+                geom+=",";
+          }
+          geom+="]}";
+          url += geom+"@dataType=string&RawDataOutput=Profile";
+
+          var request = new OpenLayers.Request.XMLHttpRequest();
+          request.open('GET',url,true);
+          request.onreadystatechange = function() {
+            if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
+              var  reg=new  RegExp("[;]", "g");
+              var tmp=request.responseText.split(reg);
+              var idxs=new Array();
+              var values= new Array();
+              points=new Array();
+              for(var i=0;i<tmp.length;i++){
+                var  reg1=new  RegExp("[,]", "g");
+                var tmpString=tmp[i]+"";
+                var tmp1=tmpString.split(reg1);
+                if(tmp1[0] && tmp1[1] && tmp1[2]){
+                        idxs[i]=i;
+                        values[i]=parseInt(tmp1[2]);
+                        points[i]=[parseFloat(tmp1[0]),parseFloat(tmp1[1])];
+                }
+              }
+              var chart = new Highcharts.Chart({
+                chart: {
+                        renderTo: 'chart_container',
+                        zoomType: 'x'
+                },
+                title: {
+                        text: 'The profile of your path'
+                },
+                xAxis: {
+                        title: { text: 'Points' },
+                        maxZoom: 10
+                },
+                yAxis: {
+                        title: { text: null },
+                        startOnTick: false,
+                        showFirstLabel: false
+                },
+                legend: {
+                        enabled: false
+                },
+                plotOptions: {
+                        area: {
+                                cursor: 'pointer',
+                                point: {
+                                        events: {
+                                                click: function() {
+                                                        if(pointLayer.features.length>0)
+                                                                pointLayer.removeFeatures(pointLayer.features);
+                                                        var tmpPoint=new OpenLayers.Geometry.Point(points[this.x][0],points[this.x][1]);
+                                                        pointLayer.addFeatures([new OpenLayers.Feature.Vector(tmpPoint,null,null)]);
+                                                }
+                                        }
+                                },
+                                fillColor: {
+                                        linearGradient: [0, 0, 0, 300],
+                                        stops: [
+                                                [0, '#FD8F01'],
+                                                [1, 'rgba(255,255,255,0)']
+                                        ]
+                                },
+                                lineWidth: 1,
+                                marker: {
+                                        enabled: false,
+                                        states: {
+                                                hover: {
+                                                        enabled: true,
+                                                        radius: 3
+                                                }
+                                        }
+                                },
+                                shadow: false,
+                                states: {
+                                        hover: {
+                                                lineWidth: 1
+                                        }
+                                }
+                        }
+                },
+                tooltip: {
+                        formatter: function() {
+                                return '<b>Altitude</b><br />Value : '+Highcharts.numberFormat(this.y, 0);
+                        }
+                },
+                series: [{
+                        name: 'Altitude',
+                        type: 'area',
+                        data: values
+                }]
+              });
+
+            }
+          }
+          request.send();
+        }
+        function restart(){
+                if(lineLayer.features.length>0)
+                        lineLayer.removeFeatures(lineLayer.features);
+                if(pointLayer.features.length>0)
+                        pointLayer.removeFeatures(pointLayer.features);
+                document.getElementById("chart_container").innerHTML="";
+                drawControls['line'].deactivate();
+                isActivated=false;
+        }
+        var isActivated=false;
+        function toggleControl() {
+          if(!isActivated){
+                drawControls['line'].activate();
+                isActivated=true;
+          }
+          else{
+                drawControls['line'].deactivate();
+                isActivated=false;
+          }
+        }
+</script>
+}}}