Download as
Browse Code »

Commit de0cc17b8695c995e6d3dfc42c6738cbc3780783

Authored by Edmar Moretti
1 parent 21ff17e6
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

Inclusão de botão de seleção no editor vetorial em OL3

Showing 5 changed files with 170 additions and 111 deletions   Show diff stats
classesphp/mapa_controle.php
  Diff comments   View file @de0cc17
... ... @@ -2282,7 +2282,7 @@ switch (strtoupper($funcao))
2282 2282 /*
2283 2283 Valor: LISTAEPSG
2284 2284  
2285   - Pega os c�digos de projeção EPSG.
  2285 + Pega os codigos de projeção EPSG.
2286 2286  
2287 2287 */
2288 2288 case "LISTAEPSG":
... ...
ferramentas/editorol/editorol.js
  Diff comments   View file @de0cc17
... ... @@ -213,6 +213,8 @@ i3GEO.editorOL =
213 213 maxext : "",
214 214 mapext : [-76.5125927, -39.3925675209, -29.5851853, 9.49014852081],
215 215 mapa : "",
  216 + //ids das features graficas selecionadas
  217 + idsSelecionados : [],
216 218 //utilizado pelo mashup
217 219 inicia : function() {
218 220 // ativabotoes e boolean
... ... @@ -986,7 +988,9 @@ i3GEO.editorOL =
986 988 n = botoes.length;
987 989 for(i = 0; i < n; i++){
988 990 botoes[i].className = botoes[i].className.replace("ItemActive","ItemInactive");
989   - botoes[i].className = botoes[i].className.replace(classeBotao+"ItemInactive",classeBotao+"ItemActive");
  991 + if(classeBotao){
  992 + botoes[i].className = botoes[i].className.replace(classeBotao+"ItemInactive",classeBotao+"ItemActive");
  993 + }
990 994 }
991 995 i3GEO.editorOL.removeInteracoes();
992 996 },
... ... @@ -1006,7 +1010,7 @@ i3GEO.editorOL =
1006 1010 $i("i3GEObarraEdicao").style.display = "block";
1007 1011 return;
1008 1012 }
1009   - var temp, controles = [], adiciona = true;
  1013 + var temp;
1010 1014 //cria o painel onde entrarão os icones
1011 1015 i3GEOpanelEditor = document.createElement("div");
1012 1016 i3GEOpanelEditor.id = "i3GEObarraEdicao";
... ... @@ -1098,7 +1102,7 @@ i3GEO.editorOL =
1098 1102 temp.onclick = function(){
1099 1103 i3GEO.editorOL.marcaBotao("editorOLarea");
1100 1104 i3GEO.barraDeBotoes.defBotao("area").funcaoonclick;
1101   - }
  1105 + };
1102 1106 i3GEOpanelEditor.appendChild(temp);
1103 1107 }
1104 1108 if (botoes.linha === true) {
... ... @@ -1183,7 +1187,7 @@ i3GEO.editorOL =
1183 1187 i3GEO.eventos.cliquePerm.desativa();
1184 1188 temp = document.createElement("div");
1185 1189 temp.className = "editorOLpoligonoItemInactive olButton";
1186   - temp.title = $trad("dpoligono");
  1190 + temp.title = $trad("dpol");
1187 1191 temp.onclick = function(){
1188 1192 i3GEO.editorOL.marcaBotao("editorOLpoligono");
1189 1193 var draw = new ol.interaction.Draw({
... ... @@ -1200,7 +1204,7 @@ i3GEO.editorOL =
1200 1204 width: i3GEO.editorOL.simbologia.strokeWidth
1201 1205 }),
1202 1206 fill: new ol.style.Fill({
1203   - color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
  1207 + color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
1204 1208 })
1205 1209 })
1206 1210 );
... ... @@ -1215,43 +1219,137 @@ i3GEO.editorOL =
1215 1219 };
1216 1220 i3GEOpanelEditor.appendChild(temp);
1217 1221 }
1218   -
  1222 +
  1223 + if (botoes.texto === true) {
  1224 + i3GEO.eventos.cliquePerm.desativa();
  1225 + temp = document.createElement("div");
  1226 + temp.className = "editorOLtextoItemInactive olButton";
  1227 + temp.title = $trad("dtexto");
  1228 + temp.onclick = function(){
  1229 + i3GEO.eventos.cliquePerm.desativa();
  1230 + i3GEO.editorOL.marcaBotao("editorOLtexto");
  1231 + var draw = new ol.interaction.Draw({
  1232 + type : "Point"
  1233 + });
  1234 + //adiciona a interacao para poder ser removida
  1235 + i3GEO.editorOL.interacoes.push(draw);
  1236 + i3GEO.Interface.openlayers.interacoes[0].setActive(false);
  1237 + draw.on("drawend", function(evt) {
  1238 + var texto = window.prompt("Texto", "");
  1239 + evt.feature.setStyle(
  1240 + new ol.style.Style({
  1241 + text: new ol.style.Text({
  1242 + text: texto,
  1243 + font: 'Bold ' + i3GEO.editorOL.simbologia.fontSize + 'px Arial',
  1244 + textAlign: 'left',
  1245 + stroke: new ol.style.Stroke({
  1246 + color: 'white',
  1247 + width: i3GEO.editorOL.simbologia.strokeWidth
  1248 + }),
  1249 + fill: new ol.style.Fill({
  1250 + color: i3GEO.editorOL.simbologia.fontColor
  1251 + }),
  1252 + zIndex: 2000
  1253 + })
  1254 + })
  1255 + );
  1256 + i3GEO.desenho.layergrafico.getSource().addFeature(evt.feature);
  1257 + draw.setActive(false);
  1258 + draw.setActive(true);
  1259 + i3GEO.editorOL.marcaBotao();
  1260 + });
  1261 + i3geoOL.addInteraction(draw);
  1262 + };
  1263 + i3GEOpanelEditor.appendChild(temp);
  1264 + }
  1265 +
  1266 + if (botoes.selecao === true) {
  1267 + i3GEO.eventos.cliquePerm.desativa();
  1268 + temp = document.createElement("div");
  1269 + temp.className = "editorOLselecaoItemInactive olButton";
  1270 + temp.title = $trad("d24t");
  1271 + temp.onclick = function(){
  1272 + i3GEO.editorOL.marcaBotao("editorOLselecao");
  1273 + var sel = new ol.interaction.Select();
  1274 + //adiciona a interacao para poder ser removida
  1275 + i3GEO.editorOL.interacoes.push(sel);
  1276 + i3GEO.Interface.openlayers.interacoes[0].setActive(false);
  1277 + sel.on("select", function(evt) {
  1278 + var i, n, id, f;
  1279 + n = evt.selected.length;
  1280 + for(i=0; i<n; i++){
  1281 + f = evt.selected[i];
  1282 + id = f.getId();
  1283 + if(id && i3GEO.util.in_array(id,i3GEO.editorOL.idsSelecionados)){
  1284 + i3GEO.editorOL.unselFeature(id);
  1285 + }
  1286 + else{
  1287 + id = i3GEO.util.uid();
  1288 + i3GEO.editorOL.idsSelecionados.push(id);
  1289 + f.setId(id);
  1290 + f.setProperties({
  1291 + fillColor: f.getStyle().getFill().getColor(),
  1292 + strokeColor: f.getStyle().getStroke().getColor()
  1293 + });
  1294 + f.getStyle().getFill().setColor('rgba(255, 255, 255, 0.5)');
  1295 + f.getStyle().getStroke().setColor('blue');
  1296 + }
  1297 + }
  1298 + if (n === 0){
  1299 + i3GEO.editorOL.unselTodos();
  1300 + }
  1301 + });
  1302 + i3geoOL.addInteraction(sel);
  1303 + };
  1304 + i3GEOpanelEditor.appendChild(temp);
  1305 + }
  1306 +
1219 1307 i3GEOpanelEditor.style.width = i3GEOpanelEditor.getElementsByTagName("div").length * 33 + "px";
1220 1308 i3GEO.editorOL.mapa.getViewport().getElementsByClassName("ol-overlaycontainer-stopevent")[0].appendChild(i3GEOpanelEditor);
1221 1309  
1222 1310 /*
1223   - if (botoes.texto === true) {
  1311 +
  1312 + // botao de selecionar tudo
  1313 + if (botoes.selecaotudo === true) {
1224 1314  
1225   - button = new OpenLayers.Control.DrawFeature(i3GEO.desenho.layergrafico, OpenLayers.Handler.Point, {
1226   - displayClass : "editorOLtexto",
1227   - title : $trad("dtexto"),
1228   - type : OpenLayers.Control.TYPE_TOOL,
1229   - persist : true,
1230   - callbacks : {
1231   - done : function(feature) {
1232   - var texto = window.prompt("Texto", ""), label = new OpenLayers.Feature.Vector(feature);
1233   - label["attributes"] = {
1234   - opacidade : 0.1,
1235   - fillColor : "white",
1236   - strokeWidth : i3GEO.editorOL.simbologia.strokeWidth,
1237   - texto : texto,
1238   - pointRadius : 2,
1239   - graphicName : "square",
1240   - strokeColor : "black",
1241   - fontColor : i3GEO.editorOL.simbologia.fontColor,
1242   - fontSize : i3GEO.editorOL.simbologia.fontSize,
1243   - fontFamily : "Arial",
1244   - fontWeight : "bold",
1245   - labelAlign : "rt"
1246   - };
1247   - if (texto && texto !== "") {
1248   - i3GEO.desenho.layergrafico.addFeatures([
1249   - label
1250   - ]);
  1315 + button = new OpenLayers.Control.Button({
  1316 + displayClass : "editorOLselecaoTudo",
  1317 + trigger : function() {
  1318 + var fs = i3GEO.desenho.layergrafico.features, n = fs.length, i;
  1319 + for (i = 0; i < n; i++) {
  1320 + i3GEO.editorOL.selbutton.select(fs[i]);
  1321 + }
  1322 + },
  1323 + title : $trad("studo"),
  1324 + type : OpenLayers.Control.TYPE_BUTTON
  1325 + });
  1326 + controles.push(button);
  1327 + adiciona = true;
  1328 +
  1329 + }
  1330 + if (botoes.apaga === true) {
  1331 +
  1332 + button = new OpenLayers.Control.Button({
  1333 + displayClass : "editorOLapaga",
  1334 + trigger : function() {
  1335 + if (i3GEO.desenho.layergrafico.selectedFeatures.length > 0) {
  1336 + var x = window.confirm($trad("excsel") + "?");
  1337 + if (x) {
  1338 + i3GEO.editorOL.guardaBackup();
  1339 + i3GEO.desenho.layergrafico.removeFeatures(i3GEO.desenho.layergrafico.selectedFeatures);
  1340 + if (document.getElementById("panellistagEditor")) {
  1341 + i3GEO.editorOL.listaGeometrias();
  1342 + }
  1343 + if (typeof i3geoOL !== "undefined") {
  1344 + i3GEO.janela.tempoMsg($trad("meneditor1"));
  1345 + }
1251 1346 }
1252   - i3GEO.editorOL.sobeLayersGraficos();
  1347 + } else {
  1348 + i3GEO.janela.tempoMsg($trad("seluma"));
1253 1349 }
1254   - }
  1350 + },
  1351 + title : $trad("excsel"),
  1352 + type : OpenLayers.Control.TYPE_BUTTON
1255 1353 });
1256 1354 controles.push(button);
1257 1355 adiciona = true;
... ... @@ -1361,70 +1459,7 @@ i3GEO.editorOL =
1361 1459  
1362 1460 }
1363 1461 // botao de sele&ccedil;&atilde;o
1364   - if (botoes.selecao === true) {
1365   -
1366   - i3GEO.editorOL.selbutton = new OpenLayers.Control.SelectFeature(i3GEO.desenho.layergrafico, {
1367   - displayClass : "editorOLselecao",
1368   - title : $trad("d24t"),
1369   - type : OpenLayers.Control.TYPE_TOOL,
1370   - clickout : true,
1371   - toggle : true,
1372   - multiple : false,
1373   - hover : false,
1374   - toggleKey : "ctrlKey", // ctrl key removes from selection
1375   - multipleKey : "shiftKey", // shift key adds to selection
1376   - box : false
1377   - });
1378   - controles.push(i3GEO.editorOL.selbutton);
1379   - adiciona = true;
1380   -
1381   - }
1382   - // botao de selecionar tudo
1383   - if (botoes.selecaotudo === true) {
1384   -
1385   - button = new OpenLayers.Control.Button({
1386   - displayClass : "editorOLselecaoTudo",
1387   - trigger : function() {
1388   - var fs = i3GEO.desenho.layergrafico.features, n = fs.length, i;
1389   - for (i = 0; i < n; i++) {
1390   - i3GEO.editorOL.selbutton.select(fs[i]);
1391   - }
1392   - },
1393   - title : $trad("studo"),
1394   - type : OpenLayers.Control.TYPE_BUTTON
1395   - });
1396   - controles.push(button);
1397   - adiciona = true;
1398   -
1399   - }
1400   - if (botoes.apaga === true) {
1401   -
1402   - button = new OpenLayers.Control.Button({
1403   - displayClass : "editorOLapaga",
1404   - trigger : function() {
1405   - if (i3GEO.desenho.layergrafico.selectedFeatures.length > 0) {
1406   - var x = window.confirm($trad("excsel") + "?");
1407   - if (x) {
1408   - i3GEO.editorOL.guardaBackup();
1409   - i3GEO.desenho.layergrafico.removeFeatures(i3GEO.desenho.layergrafico.selectedFeatures);
1410   - if (document.getElementById("panellistagEditor")) {
1411   - i3GEO.editorOL.listaGeometrias();
1412   - }
1413   - if (typeof i3geoOL !== "undefined") {
1414   - i3GEO.janela.tempoMsg($trad("meneditor1"));
1415   - }
1416   - }
1417   - } else {
1418   - i3GEO.janela.tempoMsg($trad("seluma"));
1419   - }
1420   - },
1421   - title : $trad("excsel"),
1422   - type : OpenLayers.Control.TYPE_BUTTON
1423   - });
1424   - controles.push(button);
1425   - adiciona = true;
1426   -
1427   - }
  1462 +
1428 1463 // n&atilde;o dispon&iacute;vel ainda
1429 1464 if (botoes.propriedades === true) {
1430 1465  
... ... @@ -2138,12 +2173,18 @@ i3GEO.editorOL =
2138 2173 // i3GEO.editorOL.backup.addFeatures(i3GEO.desenho.layergrafico.features);
2139 2174 },
2140 2175 unselTodos : function() {
2141   - var n, i;
2142   - n = i3GEO.desenho.layergrafico.features.length;
2143   - for (i = 0; i < n; i++) {
2144   - i3GEO.desenho.layergrafico.features[i].renderIntent = "default";
2145   - i3GEO.editorOL.selbutton.unselect(i3GEO.desenho.layergrafico.features[i]);
  2176 + var i, n, f, s;
  2177 + s = i3GEO.desenho.layergrafico.getSource();
  2178 + n = i3GEO.editorOL.idsSelecionados.length;
  2179 + for(i=0; i<n; i++){
  2180 + f = s.getFeatureById(i3GEO.editorOL.idsSelecionados[i]);
  2181 + if(f){
  2182 + f.getStyle().getFill().setColor(f.getProperties().fillColor);
  2183 + f.getStyle().getStroke().setColor(f.getProperties().strokeColor);
  2184 + }
2146 2185 }
  2186 + i3GEO.editorOL.idsSelecionados = [];
  2187 + i3GEO.desenho.layergrafico.getSource().changed();
2147 2188 },
2148 2189 unselTodosBackup : function() {
2149 2190 var n, i;
... ... @@ -2153,6 +2194,17 @@ i3GEO.editorOL =
2153 2194 i3GEO.editorOL.selbutton.unselect(i3GEO.editorOL.backup.features[i]);
2154 2195 }
2155 2196 },
  2197 + unselFeature : function(id) {
  2198 + var f, s;
  2199 + s = i3GEO.desenho.layergrafico.getSource();
  2200 + f = s.getFeatureById(id);
  2201 + if(f){
  2202 + f.getStyle().getFill().setColor(f.getProperties().fillColor);
  2203 + f.getStyle().getStroke().setColor(f.getProperties().strokeColor);
  2204 + }
  2205 + i3GEO.editorOL.idsSelecionados.remove(id);
  2206 + i3GEO.desenho.layergrafico.getSource().changed();
  2207 + },
2156 2208 restauraBackup : function() {
2157 2209 if (i3GEO.editorOL.backup.features.length > 0) {
2158 2210 i3GEO.desenho.layergrafico.removeFeatures(i3GEO.desenho.layergrafico.features);
... ... @@ -2238,9 +2290,6 @@ i3GEO.editorOL =
2238 2290 selFeature : function(index) {
2239 2291 i3GEO.editorOL.selbutton.select(i3GEO.desenho.layergrafico.features[index]);
2240 2292 },
2241   - unselFeature : function(index) {
2242   - i3GEO.editorOL.selbutton.unselect(i3GEO.desenho.layergrafico.features[index]);
2243   - },
2244 2293 carregajts : function(funcao) {
2245 2294 if (i3GEO.configura) {
2246 2295 i3GEO.util.scriptTag(i3GEO.configura.locaplic + "/pacotes/jsts/lib/jsts.js", funcao, "i3GEOjts", true);
... ...
js/barradebotoes.js
  Diff comments   View file @de0cc17
... ... @@ -826,9 +826,9 @@ i3GEO.barraDeBotoes =
826 826 eval(l[b].constroiconteudo);
827 827 }
828 828 }
829   - YAHOO.util.Event.addListener($i(l[b].iddiv), "click", YAHOO.util.Event.preventDefault);
830   - YAHOO.util.Event.addListener($i(l[b].iddiv), "click", YAHOO.util.Event.stopPropagation);
831   - YAHOO.util.Event.addFocusListener($i(l[b].iddiv), YAHOO.util.Event.preventDefault);
  829 + //YAHOO.util.Event.addListener($i(l[b].iddiv), "click", YAHOO.util.Event.preventDefault);
  830 + //YAHOO.util.Event.addListener($i(l[b].iddiv), "click", YAHOO.util.Event.stopPropagation);
  831 + //YAHOO.util.Event.addFocusListener($i(l[b].iddiv), YAHOO.util.Event.preventDefault);
832 832 } while (b--);
833 833 }
834 834 if (padrao === "") {
... ...
js/ini_i3geo.js
  Diff comments   View file @de0cc17
... ... @@ -942,6 +942,7 @@ var i3GEO = {
942 942 + "px";
943 943 temp.style.width = w
944 944 + "px";
  945 + /*
945 946 YAHOO.util.Event.addListener(
946 947 temp,
947 948 "click",
... ... @@ -949,6 +950,7 @@ var i3GEO = {
949 950 YAHOO.util.Event.addFocusListener(
950 951 temp,
951 952 YAHOO.util.Event.preventDefault);
  953 + */
952 954 }
953 955 temp = $i(i3GEO.Interface.IDCORPO);
954 956 if (temp) {
... ...
js/util.js
  Diff comments   View file @de0cc17
... ... @@ -3397,6 +3397,14 @@ i3GEO.util =
3397 3397 m = Mustache.render(templateMustache, hashMustache);
3398 3398 m = m.replace(re, '&');
3399 3399 return m;
  3400 + },
  3401 + /**
  3402 + * Function: uid
  3403 + *
  3404 + * Retorna um ID unico baseado no tempo
  3405 + */
  3406 + uid : function(){
  3407 + return (new Date().getTime()).toString(36);
3400 3408 }
3401 3409 };
3402 3410  
... ...