📄 sldwizard.jsp
字号:
<!--Copyright (c) 2006 TOPP - www.openplans.org. All rights reserved.This code is licensed under the GPL 2.0 license, availible at the rootapplication directory.@author Brent Owens--><%@ taglib uri="/tags/struts-bean" prefix="bean" %><%@ taglib uri="/tags/struts-html" prefix="html" %><%@ taglib uri="/tags/struts-logic" prefix="logic" %><html><head></head><!-- color chooser --><link rel="stylesheet" href="js_color_picker_v2.css" media="screen"><script type="text/javascript" src="color_functions.js"></script><script type="text/javascript" src="js_color_picker_v2.js"></script><!-- ================================ --><!-- ---------- JAVASCRIPT ---------- --><!-- ================================ --><script language="JavaScript" type="text/JavaScript"><!--/** global variables **/var SERVERHOSTNAME = "sigma.openplans.org";//window.location.host;var SERVERURL = "http://"+SERVERHOSTNAME+"/geoserver/";var geo_xmlhttp = null; // AJAX-nessvar featureTypeName = ""; // our feature type that the style will go tovar geomType = ""; // the type of geometry we are making a style forvar columnNames; // the names of the columns of the feature type/** * Setup * * This will search through the feature type info and determine * what kind of geometry it uses. This is based on geoserver * output and not tested with anything else. */function setup(){ log("setup"); // we need an interval to read the jsp results. // javascript will load before the jsp code so we need to wait to use it. var myInterval = window.setInterval(function cheese(a,b) { ft = document.getElementById('span_ftName').innerHTML; // if doesn't equal 'undefined' log("ft = "+ft); if (ft != "undefined") { featureTypeName = document.getElementById('span_ftName').innerHTML; log("interval; featureTypeName = "+featureTypeName); ftInfo = document.getElementById('hidden_ft_attrs').innerHTML; log("ft info: "+ftInfo); columnNames = document.getElementById('hidden_ft_attrNames').innerHTML; ftInfoSplit = ftInfo.split(","); for(i=0;i<ftInfoSplit.length;i++) { var g = ftInfoSplit[i].split(":")[1]; if (g == "multiPointProperty" || g == "pointProperty" ) { geomType = "point"; break; } else if (g == "multiLineStringProperty" || g == "lineStringProperty" ) { geomType = "line"; break; } else if (g == "multiPolygonProperty" || g == "polygonProperty" ) { geomType = "polygon"; break; } } log("geomType = "+geomType); setScreenEditMenu(geomType); // set the appropriate html for editing clearInterval(myInterval); // cancel the interval timer } else log("undefined"); },300); }function setScreenEditMenu(geomType){ editForm = ""; if (geomType == "point") editForm = generatePointForm(); else if (geomType == "line") editForm = generateLineForm(); else if (geomType == "polygon") editForm = generatePolygonForm(); document.getElementById('mainEditDiv').innerHTML = editForm;}function generatePointForm(){ result = ""; result += '<tr><td colspan=4><b><u><font size="+1">Label names for the points:</font></u></b><br></td></tr>'; result += '<tr><td width=200 colspan=4><b>Name Field:</b> '+generateNameSelect()+' <i><font color="#92AEFF" size="-1">(This field is the label that will appear on the geometry.)</font></i></td></tr>'; result += '<tr><td width=200 colspan=4><b>Text Color:</b> '+generateColorPicker("labelColor")+' <i><font color="#92AEFF" size="-1">(This is the color of the label.)</font></i></td></tr>'; result += '<tr><td colspan=4><br><hr><b><u><font size="+1">Color of the points:</font></u></b></td></tr>'; result += '<tr><td width=120 align="right"><b>Color:</b></td><td width=100>'+generateColorPicker("fillColor")+'</td>'; result += '<td width=120 align="right"><b>Opacity:</b></td><td width=140><input type="text" id="fillOpacity" size=3 maxlength=3 value="1"></input> <i><font color="#92AEFF" size="-1">(0.0 - 1.0)</font></i></td></tr>'; result += '<tr><td colspan=4><br><hr><b><u><font size="+1">Point size and shape:</font></u></b><br></td></tr>'; result += '<tr><td width=200 colspan=4><b>Point Size:</b> <input type="text" id="pointSize" size=6 maxlength=6></input> <i><font color="#92AEFF" size="-1">(The diameter of the point in pixels.)</font></i><br> </td></tr>'; result += '<tr><td width=200 colspan=4><b>Point Shape:</b> <select name="pointShape" id="pointShape"> '; result += '<option>circle</option>'; result += '<option>square</option>'; result += '</select>'; result += '</td></tr>'; return result;}function generateLineForm(){ result = ""; result += '<tr><td colspan=4><b><u><font size="+1">Label names for the lines:</font></u></b><br></td></tr>'; result += '<tr><td width=200 colspan=4><b>Name Field:</b> '+generateNameSelect()+' <i><font color="#92AEFF" size="-1">(This field is the label that will appear on the geometry.)</font></i></td></tr>'; result += '<tr><td width=200 colspan=4><b>Text Color:</b> '+generateColorPicker("labelColor")+' <i><font color="#92AEFF" size="-1">(This is the color of the label.)</font></i></td></tr>'; result += '<tr><td colspan=4><br><hr><b><u><font size="+1">Color of the lines:</font></u></b><br></td></tr>'; result += '<tr><td width=150 align="right"><b>Color:</b></td><td width=100>'+generateColorPicker("lineColor")+'</td>'; result += '<td width=150 align="right"><b>Opacity:</b></td><td width=140><input type="text" id="lineOpacity" size=3 maxlength=3 value="1"></input> <i><font color="#92AEFF" size="-1">(0.0 - 1.0)</font></i></td></tr>'; result += '<tr><td colspan=4><br><hr><b><u><font size="+1">Line dimentions:</font></u></b><br></td></tr>'; result += '<tr><td width=200 colspan=4><b>Line width:</b> <input type="text" id="lineWidth" size=6 maxlength=6></input> <i><font color="#92AEFF" size="-1">(The width, or thickness, of the line in pixles.)</font></i><br> </td></tr>'; return result;}function generatePolygonForm(){ result = ""; result += '<tr><td colspan=4><b><u><font size="+1">Label names for the polygons:</font></u></b><br></td></tr>'; result += '<tr><td width=200 colspan=4><b>Name Field:</b> '+generateNameSelect()+' <i><font color="#92AEFF" size="-1">(This field is the label that will appear on the geometry.)</font></i><br> </td></tr>'; result += '<tr><td width=200 colspan=4><b>Text Color:</b> '+generateColorPicker("labelColor")+' <i><font color="#92AEFF" size="-1">(This is the color of the label.)</font></i></td></tr>'; result += '<tr><td colspan=4><br><hr><b><u><font size="+1">Color inside the polygons:</font></u></b><br></td></tr>'; result += '<tr><td width=120 align="right"><b>Fill Color:</b></td><td width=150>'+generateColorPicker("fillColor")+' </td>'; result += '<td width=120 align="right"><b>Fill Opacity:</b></td><td><input type="text" id="fillOpacity" size=3 maxlength=3 value="1"></input> <i><font color="#92AEFF" size="-1">(0.0 - 1.0)</font></i></td></tr>'; result += '<tr><td colspan=4><br><hr><b><u><font size="+1">Outline color of the polygons:</font></u></b><br></td></tr>'; result += '<tr><td width=120 align="right"><b>Outline Color:</b></td><td width=150>'+generateColorPicker("lineColor")+' </td>'; result += '<td width=120 align="right"><b>Outline Opacity:</b></td><td><input type="text" id="lineOpacity" size=3 maxlength=3 value="1"></input> <i><font color="#92AEFF" size="-1">(0.0 - 1.0)</font></i></td></tr>'; return result;}function generateColorPicker(colorFieldName){ result = '<input name="'+colorFieldName+'" id="'+colorFieldName+'" size="7" '; result += 'onChange="relateColor(\''+colorFieldName+'\', this.value);"> '; result += '<script language="javascript">relateColor(\'pick'+colorFieldName+'\', getObj(\''+colorFieldName+'\').value);</scr'+'ipt> '; result += '<a href="javascript:pickColor(\''+colorFieldName+'\');" id="pick'+colorFieldName+'" name="pick'+colorFieldName+'" style="border: 1px solid #000000; font-family:Verdana; font-size:10px; background=#FFFF33; '; result += 'text-decoration: none; " ><img src="../../data/images/colorpicker.jpg" width=12 height=12 border="none"></a>'; return result;}/** * Generates the <select> form field for column names based on feature type column names. */function generateNameSelect(){ formCode = '<select name="propertyName" id="propertyName">'; formCode += '<option>none</option>'; colNamesSplit = columnNames.split(","); for(i=0;i<colNamesSplit.length-1;i++) { if (colNamesSplit[i] != null && colNamesSplit[i] != "") { formCode += '<option>'+colNamesSplit[i]+'</option>'; } } formCode += "</select>"; return formCode;}/** * * This is the main function that reads in the form fields and generates * the SLD. * */function generateSLD(){ featureTypeName = document.getElementById('span_ftName').innerHTML; //alert("featureTypeName: "+featureTypeName); hideSuccessMessage(); // hide the SLD success message SLD=""; SLD += createSLDHeader(featureTypeName); SLDcore = "" if (geomType == "point") SLDcore += generatePointSLD(); else if (geomType == "line") SLDcore += generateLineSLD(); else if (geomType == "polygon") SLDcore += generatePolygonSLD(); matches = SLDcore.match("ERROR:"); if (matches != null && matches.length > 0) { alert(SLDcore); // alert the user with the error and return return; } SLD += SLDcore; // append the code if there were no errors SLD += createSLDFooter(); log("SLD:\n"+SLD); saveStyle(SLD); // send it using PutStyles request}/** * Point SLD generation */function generatePointSLD(){ propertyName = document.getElementById('propertyName').value; labelColor = document.getElementById('labelColor').value; fillColor = document.getElementById('fillColor').value; fillOpacity = document.getElementById('fillOpacity').value; pointSize = document.getElementById('pointSize').value; pointShape = document.getElementById('pointShape').value; if (labelColor.length == 6) labelColor = '#'+labelColor; if (fillColor.length == 6) fillColor = '#'+fillColor; var font; var halo; // check values to make sure they are in range and valid if (propertyName != "none" && (labelColor == null || labelColor == "") ) return "ERROR: label name specified, but no text color specified."; if (labelColor == null || labelColor == "") return "ERROR: Label color cannot be empty"; if (labelColor.length != 7) return "ERROR: Label color must be 7 characters long in hexadecimal (#00ff23)."; if (fillColor == null || fillColor == "") return "ERROR: Point color cannot be empty"; if (fillColor.length != 7) return "ERROR: Point color must be 7 characters long in hexadecimal (#00ff23)."; if (fillOpacity == null || fillOpacity == "") return "ERROR: Point opacity cannot be empty"; if (fillOpacity < 0.0 || fillOpacity > 1.0) return "ERROR: Point opacity must be between 0.0 and 1.0"; if (pointSize == null || pointSize == "") return "ERROR: Point size cannot be empty"; // create stroke var stroke; //stroke = createStroke(lineColor, lineOpacity); pointFill = createFill(fillColor, fillOpacity); graphicMark = createGraphic(pointShape, pointFill, stroke, pointSize, 1.0); SLDr = createSLDPointSymbolizer(graphicMark); textFont = createFont("Times New Roman", "Normal", 12); textFill = createFill(labelColor, 1.0); if (propertyName != null && propertyName != "none") SLDr += createTextSymbolizer(propertyName, textFont, halo, textFill); return SLDr;}/** * Line SLD generation */function generateLineSLD(){ propertyName = document.getElementById('propertyName').value; labelColor = document.getElementById('labelColor').value; lineColor = document.getElementById('lineColor').value; lineOpacity = document.getElementById('lineOpacity').value; lineWidth = document.getElementById('lineWidth').value; if (labelColor.length == 6) labelColor = '#'+labelColor; if (lineColor.length == 6) lineColor = '#'+lineColor; var halo; // check values to make sure they are in range and valid if (propertyName != "none" && (labelColor == null || labelColor == "") ) return "ERROR: label name specified, but no text color specified."; if (labelColor == null || labelColor == "") return "ERROR: Label color cannot be empty"; if (labelColor.length != 7) return "ERROR: Label color must be 7 characters long in hexadecimal (#00ff23)."; if (lineColor == null || lineColor == "") return "ERROR: Line color cannot be empty"; if (lineColor.length != 7) return "ERROR: Line color must be 7 characters long in hexadecimal (#00ff23)."; if (lineOpacity == null || lineOpacity == "") return "ERROR: Line opacity cannot be empty"; if (lineOpacity < 0.0 || lineOpacity > 1.0) return "ERROR: Line opacity must be between 0.0 and 1.0"; if (lineWidth == null || lineWidth == "") return "ERROR: Line width cannot be empty"; if (lineWidth < 0) return "ERROR: Line width must be a positive number"; // create stroke stroke = createStroke(lineColor, lineOpacity, lineWidth); SLDr = createSLDLineSymbolizer(stroke); textFont = createFont("Times New Roman", "Normal", 12);⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -