OpenLayers OpenLayers

Ticket #1406: wfs_reprojection.2.patch

File wfs_reprojection.2.patch, 5.4 kB (added by tschaub, 10 months ago)

wfs reprojected

  • lib/OpenLayers/Layer/WFS.js

    old new  
    277277         
    278278            var params = {BBOX: this.encodeBBOX ? tileBounds.toBBOX()  
    279279                                                : tileBounds.toArray()}; 
     280             
     281            if (this.map && !this.projection.equals(this.map.getProjectionObject())) { 
     282                var projectedBounds = tileBounds.clone(); 
     283                projectedBounds.transform(this.map.getProjectionObject(),  
     284                                          this.projection); 
     285                params.BBOX = this.encodeBBOX ? projectedBounds.toBBOX()  
     286                                              : projectedBounds.toArray(); 
     287            }                                   
     288 
    280289            url += "&" + OpenLayers.Util.getParameterString(params); 
    281290 
    282291            if (!this.tile) { 
    …… 
    434443     */ 
    435444    commit: function() { 
    436445        if (!this.writer) { 
    437             this.writer = new OpenLayers.Format.WFS({},this); 
     446            var options = {}; 
     447            if (this.map && !this.projection.equals(this.map.getProjectionObject())) { 
     448                options.externalProjection = this.projection; 
     449                options.internalProjection = this.map.getProjectionObject(); 
     450            }     
     451             
     452            this.writer = new OpenLayers.Format.WFS(options,this); 
    438453        } 
    439454 
    440455        var data = this.writer.write(this.features); 

  • examples/wfs-reprojection.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> 
     4    <style type="text/css"> 
     5        #map { 
     6            width: 550px; 
     7            height: 450px; 
     8            border: 1px solid black; 
     9        } 
     10    </style> 
     11    <script src="../lib/OpenLayers.js"></script> 
     12    <script src='http://maps.google.com/maps?file=api&amp;v=2.82&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 
     13    <script type="text/javascript"> 
     14 
     15        var map; 
     16        OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; 
     17        function init(){ 
     18 
     19            map = new OpenLayers.Map('map', { 
     20                projection: new OpenLayers.Projection("EPSG:900913"), 
     21                displayProjection: new OpenLayers.Projection("EPSG:4326"), 
     22                units: "m", 
     23                maxResolution: 156543.0339, 
     24                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 
     25                                                 20037508.34, 20037508.34) 
     26            }); 
     27 
     28            var g = new OpenLayers.Layer.Google("G", {sphericalMercator: true}); 
     29 
     30            // prepare to style the data 
     31            var styleMap = new OpenLayers.StyleMap({ 
     32                strokeColor: "black", 
     33                strokeWidth: 2, 
     34                strokeOpacity: 0.5, 
     35                fillOpacity: 0.2 
     36            }); 
     37            // create a color table for state FIPS code 
     38            var colors = ["red", "orange", "yellow", "green", "blue", "purple"]; 
     39            var code, fips = {}; 
     40            for(var i=1; i<=66; ++i) { 
     41                code = "0" + i; 
     42                code = code.substring(code.length - 2); 
     43                fips[code] = {fillColor: colors[i % colors.length]}; 
     44            } 
     45            // add unique value rules with your color lookup 
     46            styleMap.addUniqueValueRules("default", "STATE_FIPS", fips); 
     47 
     48            // create a wfs layer with a projection different than the map 
     49            // (only if your wfs doens't support your map projection) 
     50            var wfs = layer = new OpenLayers.Layer.WFS( 
     51                "States", 
     52                "http://geo.openplans.org/geoserver/ows", 
     53                {typename: 'topp:states'}, 
     54                { 
     55                    typename: 'states', 
     56                    featureNS: 'http://www.openplans.org/topp', 
     57                    projection: new OpenLayers.Projection("EPSG:4326"), 
     58                    extractAttributes: true, 
     59                    ratio: 1.2, 
     60                    styleMap: styleMap 
     61                } 
     62            ); 
     63 
     64            map.addLayers([g, wfs]); 
     65            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     66 
     67            // if you want to use Geographic coords, transform to ESPG:900913 
     68            var ddBounds = new OpenLayers.Bounds( 
     69                -73.839111,40.287907,-68.214111,44.441624 
     70            ); 
     71            map.zoomToExtent( 
     72                ddBounds.transform(map.displayProjection, map.getProjectionObject()) 
     73            ); 
     74        } 
     75    </script> 
     76  </head> 
     77  <body onload="init()"> 
     78 
     79  <h1 id="title">WFS Reprojection Example</h1> 
     80 
     81  <div id="tags"> 
     82  </div> 
     83  <p id="shortdesc"> 
     84        Shows the use of the WFS layer reprojection support  
     85  </p> 
     86 
     87        <div id="map"></div> 
     88 
     89  <div id="docs"> 
     90    <p>This example shows automatic WFS reprojection, displaying an 'unprojected' 
     91    WFS layer projected on the client side over Google Maps. The key configuration 
     92    here is the 'projection' option on the WFS layer.</p> 
     93    <p>Also shown is styleMap for the layer with unique value rules.  Colors 
     94    are assigned based on the STATE_FIPS attribute.</p> 
     95  </div> 
     96 
     97 
     98 
     99  </body> 
     100</html> 
     101 
     102