ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make the vector-labels example even uglier

Browse Source 
This example is a candidate for removal and replacement with rendering
tests.
This commit is contained in:
Andreas Hocevar
2017-09-07 23:33:18 +02:00
parent 94a4554083
commit 7a30e495ba
2 changed files with 74 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
examples/vector-labels.html
View File

@@ -80,6 +80,25 @@ tags: "geojson, vector, openstreetmap, label"
<option value="normal" selected="selected">Normal</option>
</select>
<br />
<label>Placement: </label>
<select disabled id="points-placement">
<option value="line">Line</option>
<option value="point" selected="selected">Point</option>
</select>
<br />
<label>Max Angle: </label>
<select disabled id="points-maxangle">
<option value="0.7853981633974483" selected="selected">45°</option>
<option value="2.0943951023931953">120°</option>
<option value="6.283185307179586">360°</option>
</select>
<br />
<label>Exceed Len: </label>
<select disabled id="points-exceedlength">
<option value="true">True</option>
<option value="false" selected="selected">False</option>
</select>
<br />
<label>Size: </label>
<input type="text" value="12px" id="points-size" />
<br />
@@ -131,7 +150,8 @@ tags: "geojson, vector, openstreetmap, label"
<br />
<label>Align: </label>
<select id="lines-align">
<option value="center" selected="selected">Center</option>
<option value="" selected="selected"></option>
<option value="center">Center</option>
<option value="end">End</option>
<option value="left">Left</option>
<option value="right">Right</option>
@@ -169,6 +189,25 @@ tags: "geojson, vector, openstreetmap, label"
<option value="normal">Normal</option>
</select>
<br />
<label>Placement: </label>
<select id="lines-placement">
<option value="line">Line</option>
<option value="point" selected="selected">Point</option>
</select>
<br />
<label>Max Angle: </label>
<select id="lines-maxangle">
<option value="0.7853981633974483" selected="selected">45°</option>
<option value="2.0943951023931953">120°</option>
<option value="6.283185307179586">360°</option>
</select>
<br />
<label>Exceed Len: </label>
<select id="lines-exceedlength">
<option value="true">True</option>
<option value="false" selected="selected">False</option>
</select>
<br />
<label>Size: </label>
<input type="text" value="12px" id="lines-size" />
<br />
@@ -220,7 +259,8 @@ tags: "geojson, vector, openstreetmap, label"
<br />
<label>Align: </label>
<select id="polygons-align">
<option value="center" selected="selected">Center</option>
<option value="" selected="selected"></option>
<option value="center">Center</option>
<option value="end">End</option>
<option value="left">Left</option>
<option value="right">Right</option>
@@ -258,6 +298,25 @@ tags: "geojson, vector, openstreetmap, label"
<option value="normal">Normal</option>
</select>
<br />
<label>Placement: </label>
<select id="polygons-placement">
<option value="line">Line</option>
<option value="point" selected="selected">Point</option>
</select>
<br />
<label>Max Angle: </label>
<select id="polygons-maxangle">
<option value="0.7853981633974483" selected="selected">45°</option>
<option value="2.0943951023931953">120°</option>
<option value="6.283185307179586">360°</option>
</select>
<br />
<label>Exceed Len: </label>
<select id="polygons-exceedlength">
<option value="true">True</option>
<option value="false" selected="selected">False</option>
</select>
<br />
<label>Size: </label>
<input type="text" value="10px" id="polygons-size" />
<br />

14
examples/vector-labels.js
View File

@@ -35,6 +35,9 @@ var myDom = {
rotation: document.getElementById('lines-rotation'),
font: document.getElementById('lines-font'),
weight: document.getElementById('lines-weight'),
placement: document.getElementById('lines-placement'),
maxangle: document.getElementById('lines-maxangle'),
exceedlength: document.getElementById('lines-exceedlength'),
size: document.getElementById('lines-size'),
offsetX: document.getElementById('lines-offset-x'),
offsetY: document.getElementById('lines-offset-y'),
@@ -50,6 +53,9 @@ var myDom = {
rotation: document.getElementById('polygons-rotation'),
font: document.getElementById('polygons-font'),
weight: document.getElementById('polygons-weight'),
placement: document.getElementById('polygons-placement'),
maxangle: document.getElementById('polygons-maxangle'),
exceedlength: document.getElementById('polygons-exceedlength'),
size: document.getElementById('polygons-size'),
offsetX: document.getElementById('polygons-offset-x'),
offsetY: document.getElementById('polygons-offset-y'),
@@ -86,6 +92,9 @@ var createTextStyle = function(feature, resolution, dom) {
var offsetX = parseInt(dom.offsetX.value, 10);
var offsetY = parseInt(dom.offsetY.value, 10);
var weight = dom.weight.value;
var placement = dom.placement ? dom.placement.value : undefined;
var maxAngle = dom.maxangle ? parseFloat(dom.maxangle.value) : undefined;
var exceedLength = dom.exceedlength ? (dom.exceedlength.value == 'true') : undefined;
var rotation = parseFloat(dom.rotation.value);
var font = weight + ' ' + size + ' ' + dom.font.value;
var fillColor = dom.color.value;
@@ -93,7 +102,7 @@ var createTextStyle = function(feature, resolution, dom) {
var outlineWidth = parseInt(dom.outlineWidth.value, 10);
return new ol.style.Text({
textAlign: align,
textAlign: align == '' ? undefined : align,
textBaseline: baseline,
font: font,
text: getText(feature, resolution, dom),
@@ -101,6 +110,9 @@ var createTextStyle = function(feature, resolution, dom) {
stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
offsetX: offsetX,
offsetY: offsetY,
placement: placement,
maxAngle: maxAngle,
exceedLength: exceedLength,
rotation: rotation
});
};