From 1e1020e90df0c7909cf95e359a7f3d9ced3ea096 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20Dub=C3=A9?= Date: Fri, 28 Feb 2014 09:38:31 -0500 Subject: [PATCH] Update vector-labels example Add forms to let the user change the labels as they want. Text 'Wrap' doesn't work properly. '\n' are supposed to allow line to break. --- examples/vector-labels.html | 267 ++++++++++++++++++++++++++++++++++++ examples/vector-labels.js | 194 +++++++++++++++++++++----- 2 files changed, 424 insertions(+), 37 deletions(-) diff --git a/examples/vector-labels.html b/examples/vector-labels.html index 2e3a4dfaab..ee9e4e6370 100644 --- a/examples/vector-labels.html +++ b/examples/vector-labels.html @@ -8,6 +8,45 @@ + Vector labels example @@ -28,6 +67,233 @@ +
+ +

Points

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ +

Lines

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ +

Polygons

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+
@@ -41,6 +307,7 @@
+
diff --git a/examples/vector-labels.js b/examples/vector-labels.js index 7477e87c6e..fb3fcb51f0 100644 --- a/examples/vector-labels.js +++ b/examples/vector-labels.js @@ -12,14 +12,88 @@ goog.require('ol.style.Style'); goog.require('ol.style.Text'); +var myDom = { + 'points': { + 'text': document.getElementById('points-text'), + 'align': document.getElementById('points-align'), + 'baseline': document.getElementById('points-baseline'), + 'font': document.getElementById('points-font'), + 'weight': document.getElementById('points-weight'), + 'size': document.getElementById('points-size'), + 'color': document.getElementById('points-color'), + 'outline': document.getElementById('points-outline'), + 'outline-width': document.getElementById('points-outline-width'), + 'maxreso': document.getElementById('points-maxreso') + }, + 'lines': { + 'text': document.getElementById('lines-text'), + 'align': document.getElementById('lines-align'), + 'baseline': document.getElementById('lines-baseline'), + 'font': document.getElementById('lines-font'), + 'weight': document.getElementById('lines-weight'), + 'size': document.getElementById('lines-size'), + 'color': document.getElementById('lines-color'), + 'outline': document.getElementById('lines-outline'), + 'outline-width': document.getElementById('lines-outline-width'), + 'maxreso': document.getElementById('lines-maxreso') + }, + 'polygons': { + 'text': document.getElementById('polygons-text'), + 'align': document.getElementById('polygons-align'), + 'baseline': document.getElementById('polygons-baseline'), + 'font': document.getElementById('polygons-font'), + 'weight': document.getElementById('polygons-weight'), + 'size': document.getElementById('polygons-size'), + 'color': document.getElementById('polygons-color'), + 'outline': document.getElementById('polygons-outline'), + 'outline-width': document.getElementById('polygons-outline-width'), + 'maxreso': document.getElementById('polygons-maxreso') + } +}; + +var getText = function(feature, resolution, dom) { + var type = dom['text'].value; + var maxResolution = dom['maxreso'].value; + var text = feature.getProperties().name; + + if (resolution > maxResolution) { + text = ''; + } else if (type == 'hide') { + text = ''; + } else if (type == 'shorten') { + text = text.trunc(12); + } else if (type == 'wrap') { + text = stringDivider(text, 16, '\n'); + } + + return text; +}; + + +var createTextStyle = function(feature, resolution, dom) { + var align = dom['align'].value; + var baseline = dom['baseline'].value; + var size = dom['size'].value; + var weight = dom['weight'].value; + var font = weight + ' ' + size + ' ' + dom['font'].value; + var fillColor = dom['color'].value; + var outlineColor = dom['outline'].value; + var outlineWidth = parseInt(dom['outline-width'].value, 10); + + return new ol.style.Text({ + textAlign: align, + textBaseline: baseline, + font: font, + text: getText(feature, resolution, dom), + fill: new ol.style.Fill({color: fillColor}), + stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}) + }); +}; + // Polygons -var vectorPolygons = new ol.layer.Vector({ - source: new ol.source.GeoJSON({ - projection: 'EPSG:3857', - url: 'data/geojson/polygon-samples.geojson' - }), - style: function(feature, resolution) { +var createPolygonStyleFunction = function() { + return function(feature, resolution) { var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', @@ -28,62 +102,65 @@ var vectorPolygons = new ol.layer.Vector({ fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }), - text: new ol.style.Text({ - font: '12px Arial', - text: feature.getProperties().name, - fill: new ol.style.Fill({color: 'blue'}), - stroke: new ol.style.Stroke({color: 'white', width: 3}) - }) + text: createTextStyle(feature, resolution, myDom.polygons) }); return [style]; - } -}); + }; +}; -// Lines -var vectorLines = new ol.layer.Vector({ +var vectorPolygons = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', - url: 'data/geojson/line-samples.geojson' + url: 'data/geojson/polygon-samples.geojson' }), - style: function(feature, resolution) { + style: createPolygonStyleFunction() +}); + + +// Lines +var createLineStyleFunction = function() { + return function(feature, resolution) { var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 2 }), - text: new ol.style.Text({ - font: '12px Arial', - text: feature.getProperties().name, - fill: new ol.style.Fill({color: 'green'}), - stroke: new ol.style.Stroke({color: 'white', width: 3}) - }) + text: createTextStyle(feature, resolution, myDom.lines) }); return [style]; - } -}); + }; +}; -// Points -var vectorPoints = new ol.layer.Vector({ +var vectorLines = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', - url: 'data/geojson/point-samples.geojson' + url: 'data/geojson/line-samples.geojson' }), - style: function(feature, resolution) { + style: createLineStyleFunction() +}); + + +// Points +var createPointStyleFunction = function() { + return function(feature, resolution) { var style = new ol.style.Style({ image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}), stroke: new ol.style.Stroke({color: 'red', width: 1}) }), - text: new ol.style.Text({ - font: '12px Arial', - text: feature.getProperties().name, - fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 1)'}), - stroke: new ol.style.Stroke({color: 'white', width: 3}) - }) + text: createTextStyle(feature, resolution, myDom.points) }); return [style]; - } + }; +}; + +var vectorPoints = new ol.layer.Vector({ + source: new ol.source.GeoJSON({ + projection: 'EPSG:3857', + url: 'data/geojson/point-samples.geojson' + }), + style: createPointStyleFunction() }); var map = new ol.Map({ @@ -102,3 +179,46 @@ var map = new ol.Map({ zoom: 8 }) }); + +var refreshPoints = function() { + vectorPoints.setStyle(createPointStyleFunction()); +}; + +var refreshLines = function() { + vectorLines.setStyle(createLineStyleFunction()); +}; + +var refreshPolygons = function() { + vectorPolygons.setStyle(createPolygonStyleFunction()); +}; + + +/** + * @param {number} n The max number of characters to keep. + * @return {string} Truncated string. + */ +String.prototype.trunc = String.prototype.trunc || + function(n) { + return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0); + }; + + +// http://stackoverflow.com/questions/14484787/wrap-text-in-javascript +function stringDivider(str, width, spaceReplacer) { + if (str.length > width) { + var p = width; + for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) { + } + if (p > 0) { + var left; + if (str.substring(p, p + 1) == '-') { + left = str.substring(0, p + 1); + } else { + left = str.substring(0, p); + } + var right = str.substring(p + 1); + return left + spaceReplacer + stringDivider(right, width, spaceReplacer); + } + } + return str; +}