Commit 80e0c14d7a7f5c8d3ea3178e49f41741e7c90dba

Authored by Edmar Moretti
1 parent 3592505c

Novo botão no mashup OpenLayers que permite capturar features de um layer e editar

Showing 43 changed files with 435 additions and 14 deletions   Show diff stats
aplicmap/ogcws.map
... ... @@ -50,7 +50,7 @@ WEB
50 50 METADATA
51 51 "ows_title" "I3Geo Brasil MMA"
52 52 "wms_title" "I3Geo Brasil MMA"
53   - "ows_abstract" "Web services gerados da base de dados do I3Geo. Para chamar um tema especificamente, veja o sistema de ajuda, digitando ogc.php?ajuda=, para uma lista compacta de todos os serviços, digite ogc.php?lista=temas"
  53 + "ows_abstract" "Web services gerados da base de dados do I3Geo. Para chamar um tema especificamente, veja o sistema de ajuda, digitando ogc.php?ajuda=, para uma lista compacta de todos os servicos, digite ogc.php?lista=temas"
54 54 "ows_keywordlist" "i3Geo"
55 55 "ows_onlineresource" ""
56 56 "ows_fees" "none"
... ... @@ -60,7 +60,7 @@ WEB
60 60 "ows_contactposition" ""
61 61 "ows_addresstype" ""
62 62 "ows_address" ""
63   - "ows_city" "Brasília"
  63 + "ows_city" "Brasilia"
64 64 "ows_stateorprovince" "DF"
65 65 "ows_postcode" ""
66 66 "ows_country" "Brasil"
... ...
mashups/openlayers.css
... ... @@ -76,6 +76,12 @@ background-position:-348px 0;
76 76 .olControlEditingToolbar .selecaoItemActive {
77 77 background-position:-348px -28px;
78 78 }
  79 +.olControlEditingToolbar .capturaItemInactive {
  80 +background-position:-377px 0;
  81 +}
  82 +.olControlEditingToolbar .capturaItemActive {
  83 +background-position:-377px -28px;
  84 +}
79 85  
80 86  
81 87  
... ...
mashups/openlayers.php
... ... @@ -90,7 +90,7 @@ if(!isset($botoes)){
90 90 $objBotoes[] = "'poligono':true";
91 91 $objBotoes[] = "'edita':true";
92 92 $objBotoes[] = "'apaga':true";
93   -
  93 + $objBotoes[] = "'captura':false";
94 94 }
95 95 else{
96 96 $botoes = str_replace(" ",",",$botoes);
... ... @@ -120,7 +120,8 @@ else{
120 120 {$objBotoes[] = "'edita':true";}
121 121 if(in_array("apaga",$botoes))
122 122 {$objBotoes[] = "'apaga':true";}
123   -
  123 + if(in_array("captura",$botoes))
  124 + {$objBotoes[] = "'captura':false";}
124 125 }
125 126 $botoes = "{".implode(",",$objBotoes)."}";
126 127 //
... ... @@ -185,6 +186,7 @@ Parâmetros:
185 186 poligono
186 187 edita
187 188 apaga
  189 + captura
188 190  
189 191 Para ver a lista de códigos de temas, que podem ser utilizados no parâmetro 'temas', acesse:
190 192 <a href='../ogc.php?lista=temas' >lista de temas</a>. Os códigos são mostrados em vermelho.
... ... @@ -202,7 +204,7 @@ Parâmetros:
202 204 <head>
203 205 <script type="text/javascript" src="../classesjs/compactados/classe_calculo_compacto.js"></script>
204 206 <script type="text/javascript" src="../pacotes/openlayers/OpenLayers.js.php"></script>
205   -<link rel="stylesheet" href="../pacotes/openlayers/theme/default/style.css" type="text/css" />
  207 +<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
206 208 <link rel="stylesheet" href="openlayers.css" type="text/css" />
207 209  
208 210 </head>
... ... @@ -256,9 +258,9 @@ function i3GeoMapaInicia(){
256 258 });
257 259 }
258 260 var botoes = <?php echo $botoes; ?>;
259   - criaBotoes(botoes);
  261 + i3GEOOLcriaBotoes(botoes);
260 262 };
261   -function criaBotoes(botoes){
  263 +function i3GEOOLcriaBotoes(botoes){
262 264 var sketchSymbolizers = {
263 265 "Point": {
264 266 pointRadius: 4,
... ... @@ -314,7 +316,7 @@ function criaBotoes(botoes){
314 316 if(botoes.legenda==true){
315 317 var button = new OpenLayers.Control.Button({
316 318 displayClass: "legenda",
317   - trigger: function(){mostraLegenda();},
  319 + trigger: function(){i3GEOOLmostraLegenda();},
318 320 title: "Legenda"
319 321 });
320 322 controles.push(button);
... ... @@ -364,17 +366,19 @@ function criaBotoes(botoes){
364 366 button = new OpenLayers.Control.WMSGetFeatureInfo({
365 367 maxFeatures:1,
366 368 infoFormat:'text/plain', //'application/vnd.ogc.gml',
367   - layers: pegaLayers(),
  369 + layers: i3GEOOLpegaLayers(),
368 370 queryVisible: true,
369 371 title: "Identificar",
370 372 displayClass: "identifica",
371 373 eventListeners: {
372 374 getfeatureinfo: function(event) {
  375 + var lonlat = i3geoOL.getLonLatFromPixel(event.xy);
  376 + var lonlattexto = "<hr><pre><span style=color:blue;cursor:pointer onclick='i3GEOOLcaptura(\""+lonlat.lon+","+lonlat.lat+"\")'>captura</span></pre>";
373 377 i3geoOL.addPopup(new OpenLayers.Popup.FramedCloud(
374 378 "chicken",
375 379 i3geoOL.getLonLatFromPixel(event.xy),
376 380 null,
377   - "<pre>"+event.text+"</pre>",
  381 + lonlattexto+"<pre>"+event.text+"</pre>",
378 382 null,
379 383 true
380 384 ));
... ... @@ -468,7 +472,33 @@ function criaBotoes(botoes){
468 472 controles.push(button);
469 473 var adiciona = true;
470 474 }
471   -
  475 + if(botoes.captura==true){
  476 + botaoCapturaOL = new OpenLayers.Control.GetFeature({
  477 + protocol: "",
  478 + displayClass: "captura",
  479 + title: "Captura geometria",
  480 + eventListeners: {
  481 + featureselected: function(e) {
  482 + layergrafico.addFeatures([e.feature]);
  483 + }
  484 + }
  485 + });
  486 + botaoCapturaOL.events.register(
  487 + "activate",
  488 + this,
  489 + function(e){
  490 + var layers = i3GEOOLpegaLayers();
  491 + var u = layers[0].url+"&request=getfeature&service=wfs";
  492 + u += "&typename="+layers[0].params.LAYERS;
  493 + u += "&filter=<Filter><Intersect><PropertyName>Geometry</PropertyName><gml:Point><gml:coordinates>-54,-12</gml:coordinates></gml:Point></Intersect></Filter>";
  494 + botaoCapturaOL.protocol = OpenLayers.Protocol.WFS({
  495 + url:u
  496 + });
  497 + }
  498 + );
  499 + controles.push(botaoCapturaOL);
  500 + var adiciona = true;
  501 + }
472 502 //
473 503 //adiciona o painel ao mapa se alguma op��o foi inserida
474 504 //
... ... @@ -477,7 +507,7 @@ function criaBotoes(botoes){
477 507 i3geoOL.addControl(panel);
478 508 }
479 509 }
480   -function mostraLegenda(){
  510 +function i3GEOOLmostraLegenda(){
481 511 var layers = pegaLayers()
482 512 var nlayers = layers.length;
483 513 var ins = "";
... ... @@ -491,7 +521,7 @@ function mostraLegenda(){
491 521 w.document.close();
492 522  
493 523 }
494   -function pegaLayers(){
  524 +function i3GEOOLpegaLayers(){
495 525 var layers = i3geoOL.layers;
496 526 var nlayers = layers.length;
497 527 var ins = new Array();
... ... @@ -502,6 +532,32 @@ function pegaLayers(){
502 532 }
503 533 return ins;
504 534 }
  535 +function i3GEOOLcaptura(lonlat){
  536 + var layers = i3GEOOLpegaLayers();
  537 + var u = layers[0].url+"&request=getfeature&service=wfs&version=1.0.0";
  538 + u += "&OUTPUTFORMAT=gml2&typename="+layers[0].params.LAYERS;
  539 + u += "&filter=<Filter><Intersect><PropertyName>Geometry</PropertyName><gml:Point><gml:coordinates>"+lonlat+"</gml:coordinates></gml:Point></Intersect></Filter>";
  540 + document.body.style.cursor="wait";
  541 + document.getElementById("i3geoMapa").style.cursor = "wait";
  542 + OpenLayers.Request.issue({
  543 + method: "GET",
  544 + url: u,
  545 + callback: function(retorno){
  546 + document.body.style.cursor="default";
  547 + document.getElementById("i3geoMapa").style.cursor = "default";
  548 + var fromgml = new OpenLayers.Format.GML({
  549 + geometryName: "msGeometry"
  550 + });
  551 + var gml = fromgml.read(retorno.responseText);
  552 + layergrafico.addFeatures(gml);
  553 + },
  554 + failure: function(){
  555 + document.body.style.cursor="default";
  556 + document.getElementById("i3geoMapa").style.cursor = "default";
  557 + alert("Erro");
  558 + }
  559 + })
  560 +}
505 561 i3GeoMapaInicia();
506 562 </script>
507 563 </body>
... ...
mashups/openlayers.png

14.2 KB | W: | H:

14.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
mashups/theme/default/framedCloud.css 0 → 100644
mashups/theme/default/google.css 0 → 100644
... ... @@ -0,0 +1,9 @@
  1 +.olLayerGoogleCopyright {
  2 + right: 3px;
  3 + bottom: 2px;
  4 +}
  5 +.olLayerGooglePoweredBy {
  6 + left: 2px;
  7 + bottom: 2px;
  8 +}
  9 +
... ...
mashups/theme/default/ie6-style.css 0 → 100644
... ... @@ -0,0 +1,7 @@
  1 +.olControlZoomPanel div {
  2 + background-image: url(img/zoom-panel-NOALPHA.png);
  3 +}
  4 +.olControlPanPanel div {
  5 + background-image: url(img/pan-panel-NOALPHA.png);
  6 +}
  7 +
... ...
mashups/theme/default/img/add_point_off.png 0 → 100644

1.58 KB

mashups/theme/default/img/add_point_on.png 0 → 100644

1.43 KB

mashups/theme/default/img/blank.gif 0 → 100644

42 Bytes

mashups/theme/default/img/close.gif 0 → 100644

1.05 KB

mashups/theme/default/img/drag-rectangle-off.png 0 → 100644

1.17 KB

mashups/theme/default/img/drag-rectangle-on.png 0 → 100644

1.19 KB

mashups/theme/default/img/draw_line_off.png 0 → 100644

1.53 KB

mashups/theme/default/img/draw_line_on.png 0 → 100644

1.37 KB

mashups/theme/default/img/draw_point_off.png 0 → 100644

1.57 KB

mashups/theme/default/img/draw_point_on.png 0 → 100644

1.43 KB

mashups/theme/default/img/draw_polygon_off.png 0 → 100644

1.51 KB

mashups/theme/default/img/draw_polygon_on.png 0 → 100644

1.37 KB

mashups/theme/default/img/editing_tool_bar.png 0 → 100644

3.81 KB

mashups/theme/default/img/move_feature_off.png 0 → 100644

1.51 KB

mashups/theme/default/img/move_feature_on.png 0 → 100644

1.35 KB

mashups/theme/default/img/navigation_history.png 0 → 100644

6.86 KB

mashups/theme/default/img/overview_replacement.gif 0 → 100644

79 Bytes

mashups/theme/default/img/pan-panel-NOALPHA.png 0 → 100644

566 Bytes

mashups/theme/default/img/pan-panel.png 0 → 100644

1.26 KB

mashups/theme/default/img/pan_off.png 0 → 100644

1.66 KB

mashups/theme/default/img/pan_on.png 0 → 100644

1.53 KB

mashups/theme/default/img/panning-hand-off.png 0 → 100644

3.78 KB

mashups/theme/default/img/panning-hand-on.png 0 → 100644

3.88 KB

mashups/theme/default/img/remove_point_off.png 0 → 100644

1.57 KB

mashups/theme/default/img/remove_point_on.png 0 → 100644

1.43 KB

mashups/theme/default/img/ruler.png 0 → 100644

1.18 KB

mashups/theme/default/img/save_features_off.png 0 → 100644

357 Bytes

mashups/theme/default/img/save_features_on.png 0 → 100644

364 Bytes

mashups/theme/default/img/view_next_off.png 0 → 100644

1.61 KB

mashups/theme/default/img/view_next_on.png 0 → 100644

1.65 KB

mashups/theme/default/img/view_previous_off.png 0 → 100644

1.52 KB

mashups/theme/default/img/view_previous_on.png 0 → 100644

1.55 KB

mashups/theme/default/img/zoom-panel-NOALPHA.png 0 → 100644

1.15 KB

mashups/theme/default/img/zoom-panel.png 0 → 100644

1.59 KB

mashups/theme/default/style.css 0 → 100644
... ... @@ -0,0 +1,343 @@
  1 +div.olMap {
  2 + z-index: 0;
  3 + padding: 0px!important;
  4 + margin: 0px!important;
  5 + cursor: default;
  6 +}
  7 +
  8 +div.olMapViewport {
  9 + text-align: left;
  10 +}
  11 +
  12 +div.olLayerDiv {
  13 + -moz-user-select: none;
  14 +}
  15 +
  16 +.olLayerGoogleCopyright {
  17 + left: 2px;
  18 + bottom: 2px;
  19 +}
  20 +.olLayerGooglePoweredBy {
  21 + left: 2px;
  22 + bottom: 15px;
  23 +}
  24 +.olControlAttribution {
  25 + font-size: smaller;
  26 + right: 3px;
  27 + bottom: 4.5em;
  28 + position: absolute;
  29 + display: block;
  30 +}
  31 +.olControlScale {
  32 + right: 3px;
  33 + bottom: 3em;
  34 + display: block;
  35 + position: absolute;
  36 + font-size: smaller;
  37 +}
  38 +.olControlScaleLine {
  39 + left: 10px;
  40 + bottom: 15px;
  41 + font-size: xx-small;
  42 +}
  43 +.olControlScaleLineBottom {
  44 + border: solid 2px black;
  45 + border-bottom: none;
  46 + margin-top:-2px;
  47 + text-align: center;
  48 +}
  49 +.olControlScaleLineTop {
  50 + border: solid 2px black;
  51 + border-top: none;
  52 + text-align: center;
  53 +}
  54 +
  55 +.olControlPermalink {
  56 + right: 3px;
  57 + bottom: 1.5em;
  58 + display: block;
  59 + position: absolute;
  60 + font-size: smaller;
  61 +}
  62 +
  63 +div.olControlMousePosition {
  64 + bottom: 0em;
  65 + right: 3px;
  66 + display: block;
  67 + position: absolute;
  68 + font-family: Arial;
  69 + font-size: smaller;
  70 +}
  71 +
  72 +.olControlOverviewMapContainer {
  73 + position: absolute;
  74 + bottom: 0px;
  75 + right: 0px;
  76 +}
  77 +
  78 +.olControlOverviewMapElement {
  79 + padding: 10px 18px 10px 10px;
  80 + background-color: #00008B;
  81 + -moz-border-radius: 1em 0 0 0;
  82 +}
  83 +
  84 +.olControlOverviewMapMinimizeButton {
  85 + right: 0px;
  86 + bottom: 80px;
  87 +}
  88 +
  89 +.olControlOverviewMapMaximizeButton {
  90 + right: 0px;
  91 + bottom: 80px;
  92 +}
  93 +
  94 +.olControlOverviewMapExtentRectangle {
  95 + overflow: hidden;
  96 + background-image: url("img/blank.gif");
  97 + cursor: move;
  98 + border: 2px dotted red;
  99 +}
  100 +.olControlOverviewMapRectReplacement {
  101 + overflow: hidden;
  102 + cursor: move;
  103 + background-image: url("img/overview_replacement.gif");
  104 + background-repeat: no-repeat;
  105 + background-position: center;
  106 +}
  107 +
  108 +.olLayerGeoRSSDescription {
  109 + float:left;
  110 + width:100%;
  111 + overflow:auto;
  112 + font-size:1.0em;
  113 +}
  114 +.olLayerGeoRSSClose {
  115 + float:right;
  116 + color:gray;
  117 + font-size:1.2em;
  118 + margin-right:6px;
  119 + font-family:sans-serif;
  120 +}
  121 +.olLayerGeoRSSTitle {
  122 + float:left;font-size:1.2em;
  123 +}
  124 +
  125 +.olPopupContent {
  126 + padding:5px;
  127 + overflow: auto;
  128 +}
  129 +.olControlNavToolbar {
  130 + width:0px;
  131 + height:0px;
  132 +}
  133 +.olControlNavToolbar div {
  134 + display:block;
  135 + width: 28px;
  136 + height: 28px;
  137 + top: 300px;
  138 + left: 6px;
  139 + position: relative;
  140 +}
  141 +
  142 +.olControlNavigationHistory {
  143 + background-image: url("img/navigation_history.png");
  144 + background-repeat: no-repeat;
  145 + width: 24px;
  146 + height: 24px;
  147 +
  148 +}
  149 +.olControlNavigationHistoryPreviousItemActive {
  150 + background-position: 0px 0px;
  151 +}
  152 +.olControlNavigationHistoryPreviousItemInactive {
  153 + background-position: 0px -24px;
  154 +}
  155 +.olControlNavigationHistoryNextItemActive {
  156 + background-position: -24px 0px;
  157 +}
  158 +.olControlNavigationHistoryNextItemInactive {
  159 + background-position: -24px -24px;
  160 +}
  161 +
  162 +.olControlNavToolbar .olControlNavigationItemActive {
  163 + background-image: url("img/panning-hand-on.png");
  164 + background-repeat: no-repeat;
  165 +}
  166 +.olControlNavToolbar .olControlNavigationItemInactive {
  167 + background-image: url("img/panning-hand-off.png");
  168 + background-repeat: no-repeat;
  169 +}
  170 +.olControlNavToolbar .olControlZoomBoxItemActive {
  171 + background-image: url("img/drag-rectangle-on.png");
  172 + background-color: orange;
  173 + background-repeat: no-repeat;
  174 +}
  175 +.olControlNavToolbar .olControlZoomBoxItemInactive {
  176 + background-image: url("img/drag-rectangle-off.png");
  177 + background-repeat: no-repeat;
  178 +}
  179 +.olControlEditingToolbar {
  180 + float:right;
  181 + right: 0px;
  182 + height: 30px;
  183 + width: 200px;
  184 +}
  185 +.olControlEditingToolbar div {
  186 + background-image: url("img/editing_tool_bar.png");
  187 + background-repeat: no-repeat;
  188 + float:right;
  189 + width: 24px;
  190 + height: 24px;
  191 + margin: 5px;
  192 +}
  193 +.olControlEditingToolbar .olControlNavigationItemActive {
  194 + background-position: -103px -23px;
  195 +}
  196 +.olControlEditingToolbar .olControlNavigationItemInactive {
  197 + background-position: -103px -0px;
  198 +}
  199 +.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
  200 + background-position: -77px -23px;
  201 +}
  202 +.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
  203 + background-position: -77px -0px;
  204 +}
  205 +.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
  206 + background-position: -51px 0px;
  207 +}
  208 +.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
  209 + background-position: -51px -23px;
  210 +}
  211 +.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive {
  212 + background-position: -26px 0px;
  213 +}
  214 +.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
  215 + background-position: -26px -23px ;
  216 +}
  217 +.olControlSaveFeaturesItemActive {
  218 + background-image: url(img/save_features_on.png);
  219 + background-repeat: no-repeat;
  220 + background-position: 0px 1px;
  221 +}
  222 +.olControlSaveFeaturesItemInactive {
  223 + background-image: url(img/save_features_off.png);
  224 + background-repeat: no-repeat;
  225 + background-position: 0px 1px;
  226 +}
  227 +
  228 +.olHandlerBoxZoomBox {
  229 + border: 2px solid red;
  230 + position: absolute;
  231 + background-color: white;
  232 + opacity: 0.50;
  233 + font-size: 1px;
  234 + filter: alpha(opacity=50);
  235 +}
  236 +.olHandlerBoxSelectFeature {
  237 + border: 2px solid blue;
  238 + position: absolute;
  239 + background-color: white;
  240 + opacity: 0.50;
  241 + font-size: 1px;
  242 + filter: alpha(opacity=50);
  243 +}
  244 +
  245 +.olControlPanPanel {
  246 + top: 10px;
  247 + left: 5px;
  248 +}
  249 +
  250 +.olControlPanPanel div {
  251 + background-image: url(img/pan-panel.png);
  252 + height: 18px;
  253 + width: 18px;
  254 + cursor: pointer;
  255 + position: absolute;
  256 +}
  257 +
  258 +.olControlPanPanel .olControlPanNorthItemInactive {
  259 + top: 0px;
  260 + left: 9px;
  261 + background-position: 0px 0px;
  262 +}
  263 +.olControlPanPanel .olControlPanSouthItemInactive {
  264 + top: 36px;
  265 + left: 9px;
  266 + background-position: 18px 0px;
  267 +}
  268 +.olControlPanPanel .olControlPanWestItemInactive {
  269 + position: absolute;
  270 + top: 18px;
  271 + left: 0px;
  272 + background-position: 0px 18px;
  273 +}
  274 +.olControlPanPanel .olControlPanEastItemInactive {
  275 + top: 18px;
  276 + left: 18px;
  277 + background-position: 18px 18px;
  278 +}
  279 +
  280 +.olControlZoomPanel {
  281 + top: 71px;
  282 + left: 14px;
  283 +}
  284 +
  285 +.olControlZoomPanel div {
  286 + background-image: url(img/zoom-panel.png);
  287 + position: absolute;
  288 + height: 18px;
  289 + width: 18px;
  290 + cursor: pointer;
  291 +}
  292 +
  293 +.olControlZoomPanel .olControlZoomInItemInactive {
  294 + top: 0px;
  295 + left: 0px;
  296 + background-position: 0px 0px;
  297 +}
  298 +
  299 +.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
  300 + top: 18px;
  301 + left: 0px;
  302 + background-position: 0px -18px;
  303 +}
  304 +
  305 +.olControlZoomPanel .olControlZoomOutItemInactive {
  306 + top: 36px;
  307 + left: 0px;
  308 + background-position: 0px 18px;
  309 +}
  310 +
  311 +.olPopupCloseBox {
  312 + background: url("img/close.gif") no-repeat;
  313 + cursor: pointer;
  314 +}
  315 +
  316 +.olFramedCloudPopupContent {
  317 + padding: 5px;
  318 + overflow: auto;
  319 +}
  320 +
  321 +.olControlNoSelect {
  322 + -moz-user-select: none;
  323 +}
  324 +
  325 +/**
  326 + * Cursor styles
  327 + */
  328 +
  329 +.olCursorWait {
  330 + cursor: wait;
  331 +}
  332 +.olDragDown {
  333 + cursor: move;
  334 +}
  335 +.olDrawBox {
  336 + cursor: crosshair;
  337 +}
  338 +.olControlDragFeatureOver {
  339 + cursor: move;
  340 +}
  341 +.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
  342 + cursor: -moz-grabbing;
  343 +}
... ...
ogc.php
... ... @@ -48,7 +48,6 @@ ogc.php?tema=bioma
48 48  
49 49 ogc.php?intervalo=0,50
50 50 */
51   -
52 51 //
53 52 //validações e includes
54 53 //
... ... @@ -109,6 +108,7 @@ foreach ($_GET as $k=&gt;$v)
109 108 if(strtolower($k) == "layer")
110 109 {$tema = $v;}
111 110 }
  111 +//$filter = html_entity_decode($filter);
112 112 if(count($_GET) == 0){
113 113 $tipo="intervalo";
114 114 $req->setParameter("REQUEST", "getCapabilities");
... ...