<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用symbolizers样式特征</title> <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" /> <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script> <style> table.tm { width: 100%; height: 95%; } table.tm td.left, table.tm td.right { border: 1px solid #ccc; margin: 0; padding: 0; } table.tm td.left { width: 75%; } table.tm td.right { width: 25%; vertical-align: top; padding: 5px; } td span { font-weight: bold; } </style> <script type="text/javascript"> function init(){ var map = new OpenLayers.Map("using_symbolizers"); var osm = new OpenLayers.Layer.OSM(); map.addLayer(osm); map.setCenter(new OpenLayers.LonLat(0,0), 3) var vectorLayer = new OpenLayers.Layer.Vector("Features"); vectorLayer.events.register('beforefeatureadded', vectorLayer, setFeatureStyle); map.addLayer(vectorLayer); var editingControl = new OpenLayers.Control.EditingToolbar(vectorLayer); map.addControl(editingControl); function setFeatureStyle(event) { var fillColor = getElementById('fillColor').get('value'); var fillOpacity = getElementById('fillOpacity').get('value')/100; var strokeColor = getElementById('strokeColor').get('value'); var strokeWidth = getElementById('strokeWidth').get('value'); var strokeOpacity = getElementById('strokeOpacity').get('value')/100; var pointRadius = getElementById('pointRadius').get('value'); var style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); style.fillColor = fillColor; style.fillOpacity = fillOpacity; style.strokeColor = strokeColor; style.strokeWidth = strokeWidth; style.strokeOpacity = strokeOpacity; style.pointRadius = pointRadius; event.feature.style = style; } } </script> </head> <body onload="init()"> <table class="tm"> <tr> <td class="left"> <div id="using_symbolizers" style=" 100%; height: 95%;"></div> </td> <td class="right"> <table> <tr> <td>Fill Color:</td> <td> <div data-dojo-type="dijit.form.DropDownButton"> <span>Color</span> <div data-dojo-type="dijit.TooltipDialog"> <div id="fillColor" data-dojo-type="dijit.ColorPalette" data-dojo-props="palette:'7x10'"></div> </div> </div> </td> </tr> <tr> <td>Fill Opacity: </td> <td> <div id="fillOpacity" dojoType="dijit.form.HorizontalSlider" value="100" minimum="0" maximum="100" intermediateChanges="true" showButtons="false" style="200px;"> <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:5px;"></div> <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> <li>0%</li> <li>50%</li> <li>100%</li> </ol> </div> </td> </tr> <tr> <td>Stroke Color:</td> <td> <div data-dojo-type="dijit.form.DropDownButton"> <span>Color</span> <div data-dojo-type="dijit.TooltipDialog"> <div id="strokeColor" data-dojo-type="dijit.ColorPalette" data-dojo-props="palette:'7x10'"></div> </div> </div> </td> </tr> <tr> <td>Stroke Width:</td> <td><input id="strokeWidth" dojoType="dijit.form.NumberSpinner" value="2" smallDelta="1" constraints="{min:1,max:10}" /></td> </tr> <tr> <td>Stroke Opacity: </td> <td> <div id="strokeOpacity" dojoType="dijit.form.HorizontalSlider" value="100" minimum="0" maximum="100" intermediateChanges="true" showButtons="false" style="200px;"> <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:5px;"></div> <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> <li>0%</li> <li>50%</li> <li>100%</li> </ol> </div> </td> </tr> <tr> <td>Point radius:</td> <td><input id="pointRadius" dojoType="dijit.form.NumberSpinner" value="4" smallDelta="1" constraints="{min:4,max:15}" /></td> </tr> </table> </td> </tr> </table> <!-- 地图 DOM 元素 --> <div id="image" style=" 100%; height: 100%;"></div> </body> </html>