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

Add a new font line height option in vector-label example

Browse Source
This commit is contained in:
Frederic Junod
2019-03-09 09:13:01 +01:00
committed by ahocevar
parent 4a7b3cde56
commit 425cd19922
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
examples/vector-labels.html
View File

@@ -103,6 +103,9 @@ tags: "geojson, vector, openstreetmap, label"
<label>Size: </label>
<input type="text" value="12px" id="points-size" />
<br />
<label>Line height: </label>
<input type="text" value="1" id="points-height" />
<br />
<label>Offset X:</label>
<input type="text" value="0" id="points-offset-x" />
<br />
@@ -212,6 +215,9 @@ tags: "geojson, vector, openstreetmap, label"
<label>Size: </label>
<input type="text" value="12px" id="lines-size" />
<br />
<label>Line height: </label>
<input type="text" value="1.2" id="lines-height" />
<br />
<label>Offset X:</label>
<input type="text" value="0" id="lines-offset-x" />
<br />
@@ -321,6 +327,9 @@ tags: "geojson, vector, openstreetmap, label"
<label>Size: </label>
<input type="text" value="10px" id="polygons-size" />
<br />
<label>Line height: </label>
<input type="text" value="1" id="polygons-height" />
<br />
<label>Offset X:</label>
<input type="text" value="0" id="polygons-offset-x" />
<br />

6
examples/vector-labels.js
View File

@@ -16,6 +16,7 @@ const myDom = {
font: document.getElementById('points-font'),
weight: document.getElementById('points-weight'),
size: document.getElementById('points-size'),
height: document.getElementById('points-height'),
offsetX: document.getElementById('points-offset-x'),
offsetY: document.getElementById('points-offset-y'),
color: document.getElementById('points-color'),
@@ -34,6 +35,7 @@ const myDom = {
maxangle: document.getElementById('lines-maxangle'),
overflow: document.getElementById('lines-overflow'),
size: document.getElementById('lines-size'),
height: document.getElementById('lines-height'),
offsetX: document.getElementById('lines-offset-x'),
offsetY: document.getElementById('lines-offset-y'),
color: document.getElementById('lines-color'),
@@ -52,6 +54,7 @@ const myDom = {
maxangle: document.getElementById('polygons-maxangle'),
overflow: document.getElementById('polygons-overflow'),
size: document.getElementById('polygons-size'),
height: document.getElementById('polygons-height'),
offsetX: document.getElementById('polygons-offset-x'),
offsetY: document.getElementById('polygons-offset-y'),
color: document.getElementById('polygons-color'),
@@ -84,6 +87,7 @@ const createTextStyle = function(feature, resolution, dom) {
const align = dom.align.value;
const baseline = dom.baseline.value;
const size = dom.size.value;
const height = dom.height.value;
const offsetX = parseInt(dom.offsetX.value, 10);
const offsetY = parseInt(dom.offsetY.value, 10);
const weight = dom.weight.value;
@@ -98,7 +102,7 @@ const createTextStyle = function(feature, resolution, dom) {
document.getElementsByTagName('head')[0].appendChild(openSans);
openSansAdded = true;
}
const font = weight + ' ' + size + ' ' + dom.font.value;
const font = weight + ' ' + size + '/' + height + ' ' + dom.font.value;
const fillColor = dom.color.value;
const outlineColor = dom.outline.value;
const outlineWidth = parseInt(dom.outlineWidth.value, 10);