Download as
Browse Code »

Commit c2cffa75d7ef7549f98d302cee3cc45bfdff4f42

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

Conversão do editor vetorial de OL2 para OL3

Showing 1 changed file with 144 additions and 143 deletions   Show diff stats
ferramentas/editorol/editorol.js
  Diff comments   View file @c2cffa7
... ... @@ -60,7 +60,7 @@ i3GEO.editorOL =
60 60 opacidade : 0.8,
61 61 texto : "",
62 62 fillColor : "250,180,15",
63   - strokeWidth : 2,
  63 + strokeWidth : 5,
64 64 strokeColor : "250,150,0",
65 65 pointRadius : 4,
66 66 graphicName : "square",
... ... @@ -80,6 +80,8 @@ i3GEO.editorOL =
80 80 map : i3geoOL
81 81 }),
82 82 nomeFuncaoSalvar : "i3GEO.editorOL.salvaGeo()",
  83 + //substituir por i3GEO.Interface.openlayers.fundoDefault()
  84 + /*
83 85 e_oce : new ol.layer.Tile(
84 86 {
85 87 title : "ESRI Ocean Basemap",
... ... @@ -163,6 +165,7 @@ i3GEO.editorOL =
163 165 })
164 166 }),
165 167 fundo : "e_ims,e_wsm,ol_mma,ol_wms,top_wms",
  168 + */
166 169 kml : [],
167 170 layersIniciais : [],
168 171 //essa configuracao dos botoes afeta apenas o mashup
... ... @@ -976,35 +979,34 @@ i3GEO.editorOL =
976 979 i3GEO.util.comboTemas("editorOLcomboTemaEditavel", funcaoCombo, "editorOLondeComboTemaEditavel", "", false, "editavel");
977 980 }
978 981 },
  982 + //muda a classe do botao para marca-lo como ativo
  983 + marcaBotao : function(classeBotao){
  984 + //desmarca todos os botoes
  985 + var i, n, botoes = $i("i3GEObarraEdicao").getElementsByTagName("div");
  986 + n = botoes.length;
  987 + for(i = 0; i < n; i++){
  988 + botoes[i].className = botoes[i].className.replace("ItemActive","ItemInactive");
  989 + botoes[i].className = botoes[i].className.replace(classeBotao+"ItemInactive",classeBotao+"ItemActive");
  990 + }
  991 + i3GEO.editorOL.removeInteracoes();
  992 + },
  993 + //interacoes criadas ao ativar algum botao
  994 + //usado para remover as interacoes
  995 + interacoes : [],
  996 + removeInteracoes: function(){
  997 + var i, n;
  998 + n = i3GEO.editorOL.interacoes.length;
  999 + for(i = 0; i < n; i++){
  1000 + i3geoOL.removeInteraction(i3GEO.editorOL.interacoes[i]);
  1001 + }
  1002 + i3GEO.editorOL.interacoes = [];
  1003 + },
979 1004 criaBotoes : function(botoes) {
980 1005 if($i("i3GEObarraEdicao")){
981 1006 $i("i3GEObarraEdicao").style.display = "block";
982 1007 return;
983 1008 }
984   - var largura = 30, temp, controles = [], adiciona = true, sketchSymbolizers = {
985   - "Point" : {
986   - pointRadius : 4,
987   - graphicName : "square",
988   - fillColor : "white",
989   - fillOpacity : 1,
990   - strokeWidth : 1,
991   - strokeOpacity : 1,
992   - strokeColor : "#333333"
993   - },
994   - "Line" : {
995   - strokeWidth : 3,
996   - strokeOpacity : 1,
997   - strokeColor : "#666666",
998   - strokeDashstyle : "dash"
999   - },
1000   - "Polygon" : {
1001   - strokeWidth : 2,
1002   - strokeOpacity : 1,
1003   - strokeColor : "#666666",
1004   - fillColor : "white",
1005   - fillOpacity : 0.3
1006   - }
1007   - };
  1009 + var temp, controles = [], adiciona = true;
1008 1010 //cria o painel onde entrarão os icones
1009 1011 i3GEOpanelEditor = document.createElement("div");
1010 1012 i3GEOpanelEditor.id = "i3GEObarraEdicao";
... ... @@ -1018,24 +1020,24 @@ i3GEO.editorOL =
1018 1020 YAHOO.procura.container.panel.show();
1019 1021 };
1020 1022 i3GEOpanelEditor.appendChild(temp);
1021   - largura += 30;
1022 1023 }
1023 1024 if (botoes.pan === true) {
1024 1025 temp = document.createElement("div");
1025 1026 temp.className = "editorOLpanItemInactive olButton";
1026 1027 temp.title = "pan";
1027 1028 temp.onclick = function(){
  1029 + i3GEO.editorOL.marcaBotao("editorOLpan");
1028 1030 };
1029 1031 i3GEOpanelEditor.appendChild(temp);
1030   - largura += 30;
1031 1032 }
1032 1033 if (botoes.zoombox === true) {
1033 1034 temp = document.createElement("div");
1034 1035 temp.className = "editorOLzoomboxItemInactive olButton";
1035 1036 temp.title = "zoombox";
1036   - temp.onclick = i3GEO.barraDeBotoes.defBotao("zoomli").funcaoonclick;
  1037 + temp.onclick = function(){
  1038 + i3GEO.barraDeBotoes.defBotao("zoomli").funcaoonclick;
  1039 + };
1037 1040 i3GEOpanelEditor.appendChild(temp);
1038   - largura += 30;
1039 1041 }
1040 1042 if (botoes.zoomtot === true) {
1041 1043 temp = document.createElement("div");
... ... @@ -1049,7 +1051,6 @@ i3GEO.editorOL =
1049 1051 }
1050 1052 };
1051 1053 i3GEOpanelEditor.appendChild(temp);
1052   - largura += 30;
1053 1054 }
1054 1055 if (botoes.zoomin === true) {
1055 1056 temp = document.createElement("div");
... ... @@ -1060,7 +1061,6 @@ i3GEO.editorOL =
1060 1061 v.setZoom(v.getZoom() + 1);
1061 1062 };
1062 1063 i3GEOpanelEditor.appendChild(temp);
1063   - largura += 30;
1064 1064 }
1065 1065 if (botoes.zoomout === true) {
1066 1066 temp = document.createElement("div");
... ... @@ -1071,7 +1071,6 @@ i3GEO.editorOL =
1071 1071 v.setZoom(v.getZoom() - 1);
1072 1072 };
1073 1073 i3GEOpanelEditor.appendChild(temp);
1074   - largura += 30;
1075 1074 }
1076 1075 if (botoes.legenda === true) {
1077 1076 temp = document.createElement("div");
... ... @@ -1081,139 +1080,141 @@ i3GEO.editorOL =
1081 1080 i3GEO.editorOL.mostraLegenda();
1082 1081 };
1083 1082 i3GEOpanelEditor.appendChild(temp);
1084   - largura += 30;
1085 1083 }
1086 1084 if (botoes.distancia === true) {
1087 1085 temp = document.createElement("div");
1088 1086 temp.className = "editorOLdistanciaItemInactive olButton";
1089 1087 temp.title = $trad("d21t");
1090   - temp.onclick = i3GEO.barraDeBotoes.defBotao("mede").funcaoonclick;
  1088 + temp.onclick = function(){
  1089 + i3GEO.editorOL.marcaBotao("editorOLdistancia");
  1090 + i3GEO.barraDeBotoes.defBotao("mede").funcaoonclick;
  1091 + };
1091 1092 i3GEOpanelEditor.appendChild(temp);
1092   - largura += 30;
1093 1093 }
1094 1094 if (botoes.area === true) {
1095 1095 temp = document.createElement("div");
1096 1096 temp.className = "editorOLareaItemInactive olButton";
1097 1097 temp.title = $trad("d21at");
1098   - temp.onclick = i3GEO.barraDeBotoes.defBotao("area").funcaoonclick;
  1098 + temp.onclick = function(){
  1099 + i3GEO.editorOL.marcaBotao("editorOLarea");
  1100 + i3GEO.barraDeBotoes.defBotao("area").funcaoonclick;
  1101 + }
1099 1102 i3GEOpanelEditor.appendChild(temp);
1100   - largura += 30;
1101 1103 }
1102   - i3GEOpanelEditor.style.width = largura + "px";
1103   - i3GEO.editorOL.mapa.getViewport().getElementsByClassName("ol-overlaycontainer-stopevent")[0].appendChild(i3GEOpanelEditor);
1104   -
1105   - /*
1106   -
1107 1104 if (botoes.linha === true) {
1108   -
1109   - button = new OpenLayers.Control.DrawFeature(i3GEO.desenho.layergrafico, OpenLayers.Handler.Path, {
1110   - displayClass : "editorOLlinha",
1111   - title : $trad("dlinha"),
1112   - type : OpenLayers.Control.TYPE_TOOL,
1113   - callbacks : {
1114   - done : function(feature) {
1115   - var f = new OpenLayers.Feature.Vector(feature);
1116   - f["attributes"] = {
1117   - opacidade : i3GEO.editorOL.simbologia.opacidade,
1118   - texto : i3GEO.editorOL.simbologia.texto,
1119   - fillColor : i3GEO.editorOL.simbologia.fillColor,
1120   - strokeWidth : i3GEO.editorOL.simbologia.strokeWidth,
1121   - strokeColor : i3GEO.editorOL.simbologia.strokeColor,
1122   - pointRadius : i3GEO.editorOL.simbologia.pointRadius,
1123   - graphicName : i3GEO.editorOL.simbologia.graphicName
1124   - };
1125   - i3GEO.desenho.layergrafico.addFeatures([
1126   - f
1127   - ]);
1128   - if (document.getElementById("panellistagEditor")) {
1129   - i3GEO.editorOL.listaGeometrias();
1130   - }
1131   - i3GEO.editorOL.sobeLayersGraficos();
  1105 + temp = document.createElement("div");
  1106 + temp.className = "editorOLlinhaItemInactive olButton";
  1107 + temp.title = $trad("dlinha");
  1108 + temp.onclick = function(){
  1109 + i3GEO.editorOL.marcaBotao("editorOLlinha");
  1110 + var draw = new ol.interaction.Draw({
  1111 + type : "LineString"
  1112 + });
  1113 + //adiciona a interacao para poder ser removida
  1114 + i3GEO.editorOL.interacoes.push(draw);
  1115 + i3GEO.Interface.openlayers.interacoes[0].setActive(false);
  1116 + draw.on("drawend", function(evt) {
  1117 + evt.feature.setStyle(
  1118 + new ol.style.Style({
  1119 + stroke: new ol.style.Stroke({
  1120 + color: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
  1121 + width: i3GEO.editorOL.simbologia.strokeWidth
  1122 + }),
  1123 + fill: new ol.style.Fill({
  1124 + color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
  1125 + })
  1126 + })
  1127 + );
  1128 + i3GEO.desenho.layergrafico.getSource().addFeature(evt.feature);
  1129 + draw.setActive(false);
  1130 + draw.setActive(true);
  1131 + if (document.getElementById("panellistagEditor")) {
  1132 + i3GEO.editorOL.listaGeometrias();
1132 1133 }
1133   - }
1134   - });
1135   - controles.push(button);
1136   - adiciona = true;
1137   -
  1134 + });
  1135 + i3geoOL.addInteraction(draw);
  1136 + };
  1137 + i3GEOpanelEditor.appendChild(temp);
1138 1138 }
  1139 + //TODO falta definir imagem
1139 1140 if (botoes.ponto === true) {
1140   -
1141   - button = new OpenLayers.Control.DrawFeature(i3GEO.desenho.layergrafico, OpenLayers.Handler.Point, {
1142   - displayClass : "editorOLponto",
1143   - title : $trad("dponto"),
1144   - type : OpenLayers.Control.TYPE_TOOL,
1145   - callbacks : {
1146   - done : function(feature) {
1147   - var f, style_mark;
1148   - if (i3GEO.editorOL.simbologia.externalGraphic != "") {
1149   - style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
1150   - style_mark.externalGraphic = i3GEO.editorOL.simbologia.externalGraphic;
1151   - style_mark.graphicWidth = i3GEO.editorOL.simbologia.graphicWidth;
1152   - style_mark.graphicHeight = i3GEO.editorOL.simbologia.graphicHeight;
1153   - style_mark.fillOpacity = i3GEO.editorOL.simbologia.opacidade;
1154   - f = new OpenLayers.Feature.Vector(feature, null, style_mark);
1155   - } else {
1156   - f = new OpenLayers.Feature.Vector(feature);
1157   - }
1158   - f["attributes"] = {
1159   - opacidade : i3GEO.editorOL.simbologia.opacidade,
1160   - texto : i3GEO.editorOL.simbologia.texto,
1161   - fillColor : i3GEO.editorOL.simbologia.fillColor,
1162   - strokeWidth : i3GEO.editorOL.simbologia.strokeWidth,
1163   - strokeColor : i3GEO.editorOL.simbologia.strokeColor,
1164   - pointRadius : i3GEO.editorOL.simbologia.pointRadius,
1165   - graphicName : i3GEO.editorOL.simbologia.graphicName,
1166   - externalGraphic : i3GEO.editorOL.simbologia.externalGraphic,
1167   - graphicHeight : i3GEO.editorOL.simbologia.graphicHeight,
1168   - graphicWidth : i3GEO.editorOL.simbologia.graphicWidth
1169   - };
1170   - i3GEO.desenho.layergrafico.addFeatures([
1171   - f
1172   - ]);
1173   - if (document.getElementById("panellistagEditor")) {
1174   - i3GEO.editorOL.listaGeometrias();
1175   - }
1176   - i3GEO.editorOL.sobeLayersGraficos();
  1141 + temp = document.createElement("div");
  1142 + temp.className = "editorOLpontoItemInactive olButton";
  1143 + temp.title = $trad("dponto");
  1144 + temp.onclick = function(){
  1145 + i3GEO.editorOL.marcaBotao("editorOLponto");
  1146 + var draw = new ol.interaction.Draw({
  1147 + type : "Point"
  1148 + });
  1149 + //adiciona a interacao para poder ser removida
  1150 + i3GEO.editorOL.interacoes.push(draw);
  1151 + i3GEO.Interface.openlayers.interacoes[0].setActive(false);
  1152 + draw.on("drawend", function(evt) {
  1153 + evt.feature.setStyle(
  1154 + new ol.style.Style({
  1155 + image: new ol.style.Circle({
  1156 + radius: i3GEO.editorOL.simbologia.pointRadius,
  1157 + fill: new ol.style.Fill({
  1158 + color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
  1159 + }),
  1160 + stroke: new ol.style.Stroke({
  1161 + color: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
  1162 + width: i3GEO.editorOL.simbologia.pointRadius / 3
  1163 + })
  1164 + })
  1165 + })
  1166 + );
  1167 + i3GEO.desenho.layergrafico.getSource().addFeature(evt.feature);
  1168 + draw.setActive(false);
  1169 + draw.setActive(true);
  1170 + if (document.getElementById("panellistagEditor")) {
  1171 + i3GEO.editorOL.listaGeometrias();
1177 1172 }
1178   - }
1179   - });
1180   - controles.push(button);
1181   - adiciona = true;
1182   -
  1173 + });
  1174 + i3geoOL.addInteraction(draw);
  1175 + };
  1176 + i3GEOpanelEditor.appendChild(temp);
1183 1177 }
1184 1178 if (botoes.poligono === true) {
1185   -
1186   - button = new OpenLayers.Control.DrawFeature(i3GEO.desenho.layergrafico, OpenLayers.Handler.Polygon, {
1187   - displayClass : "editorOLpoligono",
1188   - title : $trad("dpol"),
1189   - type : OpenLayers.Control.TYPE_TOOL,
1190   - // handlerOptions: {holeModifier: "altKey"},
1191   - callbacks : {
1192   - done : function(feature) {
1193   - var f = new OpenLayers.Feature.Vector(feature);
1194   - f["attributes"] = {
1195   - opacidade : i3GEO.editorOL.simbologia.opacidade,
1196   - texto : i3GEO.editorOL.simbologia.texto,
1197   - fillColor : i3GEO.editorOL.simbologia.fillColor,
1198   - strokeWidth : i3GEO.editorOL.simbologia.strokeWidth,
1199   - strokeColor : i3GEO.editorOL.simbologia.strokeColor,
1200   - pointRadius : i3GEO.editorOL.simbologia.pointRadius,
1201   - graphicName : i3GEO.editorOL.simbologia.graphicName
1202   - };
1203   - i3GEO.desenho.layergrafico.addFeatures([
1204   - f
1205   - ]);
1206   - if (document.getElementById("panellistagEditor")) {
1207   - i3GEO.editorOL.listaGeometrias();
1208   - }
1209   - i3GEO.editorOL.sobeLayersGraficos();
  1179 + temp = document.createElement("div");
  1180 + temp.className = "editorOLpoligonoItemInactive olButton";
  1181 + temp.title = $trad("dpoligono");
  1182 + temp.onclick = function(){
  1183 + i3GEO.editorOL.marcaBotao("editorOLpoligono");
  1184 + var draw = new ol.interaction.Draw({
  1185 + type : "Polygon"
  1186 + });
  1187 + //adiciona a interacao para poder ser removida
  1188 + i3GEO.editorOL.interacoes.push(draw);
  1189 + i3GEO.Interface.openlayers.interacoes[0].setActive(false);
  1190 + draw.on("drawend", function(evt) {
  1191 + evt.feature.setStyle(
  1192 + new ol.style.Style({
  1193 + stroke: new ol.style.Stroke({
  1194 + color: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
  1195 + width: i3GEO.editorOL.simbologia.strokeWidth
  1196 + }),
  1197 + fill: new ol.style.Fill({
  1198 + color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
  1199 + })
  1200 + })
  1201 + );
  1202 + i3GEO.desenho.layergrafico.getSource().addFeature(evt.feature);
  1203 + draw.setActive(false);
  1204 + draw.setActive(true);
  1205 + if (document.getElementById("panellistagEditor")) {
  1206 + i3GEO.editorOL.listaGeometrias();
1210 1207 }
1211   - }
1212   - });
1213   - controles.push(button);
1214   - adiciona = true;
1215   -
  1208 + });
  1209 + i3geoOL.addInteraction(draw);
  1210 + };
  1211 + i3GEOpanelEditor.appendChild(temp);
1216 1212 }
  1213 +
  1214 + i3GEOpanelEditor.style.width = i3GEOpanelEditor.getElementsByTagName("div").length * 33 + "px";
  1215 + i3GEO.editorOL.mapa.getViewport().getElementsByClassName("ol-overlaycontainer-stopevent")[0].appendChild(i3GEOpanelEditor);
  1216 +
  1217 + /*
1217 1218 if (botoes.texto === true) {
1218 1219  
1219 1220 button = new OpenLayers.Control.DrawFeature(i3GEO.desenho.layergrafico, OpenLayers.Handler.Point, {
... ...