<!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="width: 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="width: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="width: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="width: 100%; height: 100%;"></div>
</body>
</html>
