Download as
Browse Code »

Commit f02d41c93e596f30369c2e7bf65b1199ef28d613

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

--no commit message

Showing 1 changed file with 131 additions and 62 deletions   Show diff stats
ferramentas/editorol/editorol.js
  Diff comments   View file @f02d41c
... ... @@ -1031,18 +1031,29 @@ i3GEO.editorOL =
1031 1031 i3GEO.editorOL.interacoes.push(draw);
1032 1032 i3GEO.Interface.openlayers.interacoes[0].setActive(false);
1033 1033 draw.on("drawend", function(evt) {
  1034 + var simbolo, url;
  1035 + url = i3GEO.editorOL.simbologia.externalGraphic;
  1036 + if(url === ""){
  1037 + simbolo = new ol.style.Circle({
  1038 + radius: i3GEO.editorOL.simbologia.pointRadius,
  1039 + fill: new ol.style.Fill({
  1040 + color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
  1041 + }),
  1042 + stroke: new ol.style.Stroke({
  1043 + color: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
  1044 + width: i3GEO.editorOL.simbologia.pointRadius / 3
  1045 + })
  1046 + });
  1047 + }
  1048 + else{
  1049 + simbolo = new ol.style.Icon({
  1050 + src : url,
  1051 + size : [i3GEO.editorOL.simbologia.graphicWidth,i3GEO.editorOL.simbologia.graphicHeight]
  1052 + });
  1053 + }
1034 1054 evt.feature.setStyle(
1035 1055 new ol.style.Style({
1036   - image: new ol.style.Circle({
1037   - radius: i3GEO.editorOL.simbologia.pointRadius,
1038   - fill: new ol.style.Fill({
1039   - color: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')'
1040   - }),
1041   - stroke: new ol.style.Stroke({
1042   - color: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
1043   - width: i3GEO.editorOL.simbologia.pointRadius / 3
1044   - })
1045   - })
  1056 + image: simbolo
1046 1057 })
1047 1058 );
1048 1059 evt.feature.setId(i3GEO.util.uid());
... ... @@ -1168,11 +1179,8 @@ i3GEO.editorOL =
1168 1179 i3GEO.editorOL.idsSelecionados.push(id);
1169 1180 f.setId(id);
1170 1181 s = f.getStyle();
  1182 +
1171 1183 if(s.getImage()){
1172   - f.setProperties({
1173   - fillColor: s.getImage().getFill().getColor(),
1174   - strokeColor: s.getImage().getStroke().getColor()
1175   - });
1176 1184 f.setStyle(
1177 1185 new ol.style.Style({
1178 1186 image: new ol.style.Circle({
... ... @@ -1187,11 +1195,32 @@ i3GEO.editorOL =
1187 1195 })
1188 1196 })
1189 1197 );
  1198 + if(!s.getImage().getSrc){
  1199 + f.setProperties({
  1200 + fillColor: s.getImage().getFill().getColor(),
  1201 + strokeColor: s.getImage().getStroke().getColor(),
  1202 + externalGraphic: "",
  1203 + graphicHeight : 25,
  1204 + graphicWidth : 25
  1205 + });
  1206 + }
  1207 + else{
  1208 + f.setProperties({
  1209 + fillColor: "",
  1210 + strokeColor: "",
  1211 + externalGraphic: s.getImage().getSrc(),
  1212 + graphicHeight : s.getImage().getSize()[1],
  1213 + graphicWidth : s.getImage().getSize()[0]
  1214 + });
  1215 + }
1190 1216 }
1191 1217 else{
1192 1218 f.setProperties({
1193 1219 fillColor: s.getFill().getColor(),
1194   - strokeColor: s.getStroke().getColor()
  1220 + strokeColor: s.getStroke().getColor(),
  1221 + externalGraphic: "",
  1222 + graphicHeight : 25,
  1223 + graphicWidth : 25
1195 1224 });
1196 1225 s.getFill().setColor('rgba(255, 255, 255, 0.5)');
1197 1226 s.getStroke().setColor('blue');
... ... @@ -1597,13 +1626,24 @@ i3GEO.editorOL =
1597 1626 for(i=0; i<nsel; i++){
1598 1627 f = s.getFeatureById(i3GEO.editorOL.idsSelecionados[i]);
1599 1628 if(f){
1600   - f.setProperties({
1601   - fillColor: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
1602   - strokeColor: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
1603   - width: i3GEO.editorOL.simbologia.strokeWidth,
1604   - fontSize: i3GEO.editorOL.simbologia.fontSize,
1605   - fontColor: i3GEO.editorOL.simbologia.fontColor
1606   - });
  1629 + if(estilo === "externalGraphic" || estilo === "graphicWidth" || estilo === "graphicHeight"){
  1630 + f.setProperties({
  1631 + src: i3GEO.editorOL.simbologia.externalGraphic,
  1632 + size: [
  1633 + i3GEO.editorOL.simbologia.graphicWidth,
  1634 + i3GEO.editorOL.simbologia.graphicHeight
  1635 + ]
  1636 + });
  1637 + }
  1638 + else{
  1639 + f.setProperties({
  1640 + fillColor: 'rgba(' + i3GEO.editorOL.simbologia.fillColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
  1641 + strokeColor: 'rgba(' + i3GEO.editorOL.simbologia.strokeColor + ',' + i3GEO.editorOL.simbologia.opacidade + ')',
  1642 + width: i3GEO.editorOL.simbologia.strokeWidth,
  1643 + fontSize: i3GEO.editorOL.simbologia.fontSize,
  1644 + fontColor: i3GEO.editorOL.simbologia.fontColor,
  1645 + });
  1646 + }
1607 1647 }
1608 1648 }
1609 1649 },
... ... @@ -1713,43 +1753,39 @@ i3GEO.editorOL =
1713 1753 + '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
1714 1754 + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeColor\',\'i3GEOEditorOLcorContorno\');return false;" type="text" id="i3GEOEditorOLcorContorno" value="' + i3GEO.editorOL.simbologia.strokeColor + '" />'
1715 1755 + '</div>'
1716   - + '<p class=paragrafo >Cor do preenchimento</p>'
  1756 + + '<br><p class=paragrafo >Cor do preenchimento</p>'
1717 1757 + '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
1718 1758 + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fillColor\',\'i3GEOEditorOLcorPre\');return false;" type="text" id="i3GEOEditorOLcorPre" value="' + i3GEO.editorOL.simbologia.fillColor + '" />'
1719 1759 + '</div>'
1720   - + '<p class=paragrafo >Cor da fonte</p>'
  1760 + + '<br><p class=paragrafo >Cor da fonte</p>'
1721 1761 + '<div class="i3geoForm100 i3geoFormIconeAquarela" >'
1722 1762 + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fontColor\',\'i3GEOEditorOLcorFonte\');return false;" type="text" id="i3GEOEditorOLcorFonte" value="' + i3GEO.editorOL.simbologia.fontColor + '" />'
1723 1763 + '</div>'
1724   - + '<p class=paragrafo >Tamanho da fonte</p>'
  1764 + + '<br><p class=paragrafo >Tamanho da fonte</p>'
1725 1765 + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
1726 1766 + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'fontSize\',\'i3GEOEditorOLfontsize\');return false;" type="text" id="i3GEOEditorOLfontsize" value="' + i3GEO.editorOL.simbologia.fontSize + '" />'
1727 1767 + '</div>'
1728   - + '<p class=paragrafo >Opacidade (de 0 a 1)</p>'
  1768 + + '<br><p class=paragrafo >Opacidade (de 0 a 1)</p>'
1729 1769 + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
1730 1770 + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'opacidade\',\'i3GEOEditorOLopacidade\');return false;" type="text" id="i3GEOEditorOLopacidade" value="' + i3GEO.editorOL.simbologia.opacidade + '" />'
1731 1771 + '</div>'
1732   - + '<p class=paragrafo >Largura da linha/contorno</p>'
  1772 + + '<br><p class=paragrafo >Largura da linha/contorno</p>'
1733 1773 + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
1734 1774 + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'strokeWidth\',\'i3GEOEditorOLlarguraLinha\');return false;" type="text" id="i3GEOEditorOLlarguraLinha" value="' + i3GEO.editorOL.simbologia.strokeWidth + '" />'
  1775 + + '</div>'
  1776 + + '<br><p class=paragrafo >Url de uma imagem</p>'
  1777 + + '<div class="i3geoForm i3geoFormIconeEdita" >'
  1778 + + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'externalGraphic\',\'i3GEOEditorOLexternalGraphic\');return false;" type="text" id="i3GEOEditorOLexternalGraphic" value="' + i3GEO.editorOL.simbologia.externalGraphic + '" />'
  1779 + + '</div>'
  1780 + + '<br><p class=paragrafo >Largura da imagem</p>'
  1781 + + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
  1782 + + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'graphicWidth\',\'i3GEOEditorOLgraphicWidth\');return false;" type="text" id="i3GEOEditorOLgraphicWidth" value="' + i3GEO.editorOL.simbologia.graphicWidth + '" />'
  1783 + + '</div>'
  1784 + + '<br><p class=paragrafo >Altura da imagem</p>'
  1785 + + '<div class="i3geoForm100 i3geoFormIconeEdita" >'
  1786 + + '<input onchange="i3GEO.editorOL.mudaSimbolo(\'graphicHeight\',\'i3GEOEditorOLgraphicHeight\');return false;" type="text" id="i3GEOEditorOLgraphicHeight" value="' + i3GEO.editorOL.simbologia.graphicHeight + '" />'
1735 1787 + '</div>';
1736 1788  
1737   - //TODO incluir propriedades de uma figura
1738   - /*
1739   - + ' <tr>'
1740   - + ' <td>Url de uma figura</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'externalGraphic\',\'i3GEOEditorOLexternalGraphic\')" type="text" style="cursor:text" id="i3GEOEditorOLexternalGraphic" size="22" value="'
1741   - + i3GEO.editorOL.simbologia.externalGraphic
1742   - + '" /></td><td></td>'
1743   - + ' </tr>'
1744   - + ' <tr>'
1745   - + ' <td>Largura e altura</td><td><input onchange="i3GEO.editorOL.mudaSimbolo(\'graphicWidth\',\'i3GEOEditorOLgraphicWidth\')" type="text" style="cursor:text" id="i3GEOEditorOLgraphicWidth" size="4" value="'
1746   - + i3GEO.editorOL.simbologia.graphicWidth
1747   - + '" />&nbsp;<input onchange="i3GEO.editorOL.mudaSimbolo(\'graphicHeight\',\'i3GEOEditorOLgraphicHeight\')" type="text" style="cursor:text" id="i3GEOEditorOLgraphicHeight" size="4" value="'
1748   - + i3GEO.editorOL.simbologia.graphicHeight
1749   - + '" /></td><td></td>'
1750   - + ' </tr>'
1751   - */
1752   -
1753 1789 //TODO implementar ao atualizar OL3
1754 1790 /*
1755 1791 + '<br />'
... ... @@ -2122,10 +2158,24 @@ i3GEO.editorOL =
2122 2158 })
2123 2159 })
2124 2160 );
2125   - f.setProperties({
2126   - fillColor: st.getImage().getFill().getColor(),
2127   - strokeColor: st.getImage().getStroke().getColor()
2128   - });
  2161 + if(st.getImage().getSrc){
  2162 + f.setProperties({
  2163 + fillColor: "",
  2164 + strokeColor: "",
  2165 + externalGraphic: st.getImage().getSrc(),
  2166 + graphicHeight : st.getImage().getSize()[1],
  2167 + graphicWidth : st.getImage().getSize()[0]
  2168 + });
  2169 + }
  2170 + else{
  2171 + f.setProperties({
  2172 + fillColor: st.getImage().getFill().getColor(),
  2173 + strokeColor: st.getImage().getStroke().getColor(),
  2174 + externalGraphic: "",
  2175 + graphicHeight: "",
  2176 + graphicWidth: ""
  2177 + });
  2178 + }
2129 2179 }
2130 2180 else{
2131 2181 f.setProperties({
... ... @@ -2148,20 +2198,32 @@ i3GEO.editorOL =
2148 2198 st = f.getStyle();
2149 2199 //caso de ponto
2150 2200 if(st.getImage()){
2151   - f.setStyle(
2152   - new ol.style.Style({
2153   - image: new ol.style.Circle({
2154   - radius: i3GEO.editorOL.simbologia.pointRadius,
2155   - fill: new ol.style.Fill({
2156   - color: f.getProperties().fillColor
2157   - }),
2158   - stroke: new ol.style.Stroke({
2159   - color: f.getProperties().strokeColor,
2160   - width: i3GEO.editorOL.simbologia.pointRadius / 3
  2201 + if(st.getImage().getSrc || f.getProperties().externalGraphic != ""){
  2202 + f.setStyle(
  2203 + new ol.style.Style({
  2204 + image: new ol.style.Icon({
  2205 + src : f.getProperties().externalGraphic,
  2206 + size : [f.getProperties().graphicWidth,f.getProperties().graphicHeight]
2161 2207 })
2162 2208 })
2163   - })
2164   - );
  2209 + );
  2210 + }
  2211 + else{
  2212 + f.setStyle(
  2213 + new ol.style.Style({
  2214 + image: new ol.style.Circle({
  2215 + radius: i3GEO.editorOL.simbologia.pointRadius,
  2216 + fill: new ol.style.Fill({
  2217 + color: f.getProperties().fillColor
  2218 + }),
  2219 + stroke: new ol.style.Stroke({
  2220 + color: f.getProperties().strokeColor,
  2221 + width: i3GEO.editorOL.simbologia.pointRadius / 3
  2222 + })
  2223 + })
  2224 + })
  2225 + );
  2226 + }
2165 2227 }
2166 2228 else{
2167 2229 st.getFill().setColor(f.getProperties().fillColor);
... ... @@ -2185,8 +2247,14 @@ i3GEO.editorOL =
2185 2247 s = i3GEO.desenho.layergrafico.getSource();
2186 2248 f = s.getFeatureById(id);
2187 2249 if(f){
2188   - f.getStyle().getFill().setColor(f.getProperties().fillColor);
2189   - f.getStyle().getStroke().setColor(f.getProperties().strokeColor);
  2250 + if(f.getStyle().getSrc()){
  2251 + f.getStyle().setSrc(f.getProperties().externalGraphic);
  2252 + f.getStyle().setSize([f.getProperties().graphicWidth,f.getProperties().graphicHeight]);
  2253 + }
  2254 + else{
  2255 + f.getStyle().getFill().setColor(f.getProperties().fillColor);
  2256 + f.getStyle().getStroke().setColor(f.getProperties().strokeColor);
  2257 + }
2190 2258 }
2191 2259 i3GEO.editorOL.idsSelecionados.remove(id);
2192 2260 i3GEO.desenho.layergrafico.getSource().changed();
... ... @@ -2274,7 +2342,8 @@ i3GEO.editorOL =
2274 2342 i3GEO.editorOL.idsSelecionados.push(id);
2275 2343 f.setProperties({
2276 2344 fillColor: f.getStyle().getFill().getColor(),
2277   - strokeColor: f.getStyle().getStroke().getColor()
  2345 + strokeColor: f.getStyle().getStroke().getColor(),
  2346 + externalGraphic: ""
2278 2347 });
2279 2348 f.getStyle().getFill().setColor('rgba(255, 255, 255, 0.5)');
2280 2349 f.getStyle().getStroke().setColor('blue');
... ...