Skip to content

Commit

Permalink
Support drawn features (gmf-drawfeature) in gmf-permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
@adube
adube committed Apr 25, 2016
1 parent efbffa1 commit b9a2488
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 36 deletions.
166 changes: 149 additions & 17 deletions contribs/gmf/src/services/permalink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@ goog.require('gmf.TreeManager');
goog.require('ngeo.BackgroundEventType');
goog.require('ngeo.BackgroundLayerMgr');
goog.require('ngeo.Debounce');
goog.require('ngeo.FeatureHelper');
/** @suppress {extraRequire} */
goog.require('ngeo.Features');
goog.require('ngeo.FeatureOverlay');
goog.require('ngeo.FeatureOverlayMgr');
goog.require('ngeo.LayerHelper');
goog.require('ngeo.Popover');
goog.require('ngeo.StateManager');
goog.require('ngeo.format.FeatureHash');
goog.require('ol.Feature');
goog.require('ol.geom.Point');
goog.require('ol.layer.Group');
Expand All @@ -24,6 +28,7 @@ goog.require('ol.style.Style');
*/
gmf.PermalinkParam = {
BG_LAYER: 'baselayer_ref',
FEATURES: 'rl_features',
MAP_CROSSHAIR: 'map_crosshair',
MAP_TOOLTIP: 'map_tooltip',
MAP_X: 'map_x',
Expand Down Expand Up @@ -60,6 +65,8 @@ gmf.module.constant('gmfPermalinkOptions',
* manager.
* @param {ngeo.Debounce} ngeoDebounce ngeo Debounce service.
* @param {ngeo.FeatureOverlayMgr} ngeoFeatureOverlayMgr The ngeo feature
* @param {ngeo.FeatureHelper} ngeoFeatureHelper Ngeo feature helper service.
* @param {ol.Collection.<ol.Feature>} ngeoFeatures Collection of features.
* @param {ngeo.LayerHelper} ngeoLayerHelper Ngeo Layer Helper.
* @param {ngeo.StateManager} ngeoStateManager The ngeo StateManager service.
* @param {gmf.Themes} gmfThemes The gmf Themes service.
Expand All @@ -71,8 +78,25 @@ gmf.module.constant('gmfPermalinkOptions',
* @ngname gmfPermalink
*/
gmf.Permalink = function($timeout, ngeoBackgroundLayerMgr, ngeoDebounce,
ngeoFeatureOverlayMgr, ngeoLayerHelper, ngeoStateManager, gmfThemes,
gmfTreeManager, gmfPermalinkOptions) {
ngeoFeatureOverlayMgr, ngeoFeatureHelper, ngeoFeatures, ngeoLayerHelper,
ngeoStateManager, gmfThemes, gmfTreeManager, gmfPermalinkOptions) {

// == listener keys ==

/**
* The key for map view 'propertychange' event.
* @type {?ol.events.Key}
* @private
*/
this.mapViewPropertyChangeEventKey_ = null;

/**
* @type {Object.<number, gmf.Permalink.ListenerKeys>}
* @private
*/
this.listenerKeys_ = {};

// == properties from params ==

/**
* @type {ngeo.BackgroundLayerMgr}
Expand All @@ -92,6 +116,18 @@ gmf.Permalink = function($timeout, ngeoBackgroundLayerMgr, ngeoDebounce,
*/
this.featureOverlay_ = ngeoFeatureOverlayMgr.getFeatureOverlay();

/**
* @type {ngeo.FeatureHelper}
* @private
*/
this.featureHelper_ = ngeoFeatureHelper;

/**
* @type {ol.Collection.<ol.Feature>}
* @private
*/
this.ngeoFeatures_ = ngeoFeatures;

/**
* @type {ngeo.LayerHelper}
* @private
Expand All @@ -116,6 +152,9 @@ gmf.Permalink = function($timeout, ngeoBackgroundLayerMgr, ngeoDebounce,
*/
this.gmfTreeManager_ = gmfTreeManager;


// == other properties ==

/**
* @type {?ol.Map}
* @private
Expand Down Expand Up @@ -169,6 +208,14 @@ gmf.Permalink = function($timeout, ngeoBackgroundLayerMgr, ngeoDebounce,
}


/**
* @type {ngeo.format.FeatureHash}
* @private
*/
this.featureHashFormat_ = new ngeo.format.FeatureHash({
encodeStyles: false
});

// == event listeners ==

ol.events.listen(
Expand All @@ -185,21 +232,19 @@ gmf.Permalink = function($timeout, ngeoBackgroundLayerMgr, ngeoDebounce,
}.bind(this));
}.bind(this));


// == listener keys ==

/**
* The key for map view 'propertychange' event.
* @type {?ol.events.Key}
* @private
*/
this.mapViewPropertyChangeEventKey_ = null;

/**
* @type {Object.<number, gmf.Permalink.ListenerKeys>}
* @private
*/
this.listenerKeys_ = {};
// ngeoFeatures
// (1) read from features from the state manager first, add them
// (2) listen for further features added/removed
var features = this.getFeatures();
features.forEach(function(feature) {
this.featureHelper_.setStyle(feature);
this.addNgeoFeature_(feature);
}, this);
this.ngeoFeatures_.extend(features);
ol.events.listen(this.ngeoFeatures_, ol.CollectionEventType.ADD,
this.handleNgeoFeaturesAdd_, this);
ol.events.listen(this.ngeoFeatures_, ol.CollectionEventType.REMOVE,
this.handleNgeoFeaturesRemove_, this);

};

Expand Down Expand Up @@ -323,6 +368,24 @@ gmf.Permalink.prototype.getMapTooltip = function() {
};


// === NgeoFeatures (A.K.A. DrawFeature, RedLining) ===


/**
* Get the ngeo features from the state manager for initialization purpose
* @return {Array.<ol.Feature>} The features read from the state manager.
* @export
*/
gmf.Permalink.prototype.getFeatures = function() {
var features = [];
var f = this.ngeoStateManager_.getInitialValue(gmf.PermalinkParam.FEATURES);
if (f !== undefined && f !== '') {
features = this.featureHashFormat_.readFeatures(f);
}
return features;
};


/**
* Bind an ol3 map object to this service. The service will, from there on,
* listen to the properties changed within the map view and update the following
Expand Down Expand Up @@ -852,6 +915,75 @@ gmf.Permalink.prototype.unregisterDataLayerGroup_ = function() {
};


// === ngeoFeatures, A.K.A features from the DrawFeature, RedLining ===


/**
* @param {ol.CollectionEvent} event Collection event.
* @private
*/
gmf.Permalink.prototype.handleNgeoFeaturesAdd_ = function(event) {
var feature = event.element;
goog.asserts.assertInstanceof(feature, ol.Feature);
this.addNgeoFeature_(feature);
};


/**
* @param {ol.CollectionEvent} event Collection event.
* @private
*/
gmf.Permalink.prototype.handleNgeoFeaturesRemove_ = function(event) {
var feature = event.element;
goog.asserts.assertInstanceof(feature, ol.Feature);
this.removeNgeoFeature_(feature);
};


/**
* Listen to any changes that may occur within the feature in order to
* update the state of the permalink accordingly.
* @param {ol.Feature} feature Feature.
* @private
*/
gmf.Permalink.prototype.addNgeoFeature_ = function(feature) {
var uid = goog.getUid(feature);
this.addListenerKey_(
uid,
ol.events.listen(feature, ol.events.EventType.CHANGE,
this.handleNgeoFeaturesChange_, this),
true
);
};


/**
* Unregister any event listener from the feature.
* @param {ol.Feature} feature Feature.
* @private
*/
gmf.Permalink.prototype.removeNgeoFeature_ = function(feature) {
var uid = goog.getUid(feature);
this.initListenerKey_(uid); // clear event listeners
};


/**
* Called once upon initialization of the permalink service if there's at
* least one feature in the ngeoFeatures collection, then called everytime
* the collection changes or any of the features within the collection changes.
* @private
*/
gmf.Permalink.prototype.handleNgeoFeaturesChange_ = function() {
var features = this.ngeoFeatures_.getArray();
var data = this.featureHashFormat_.writeFeatures(features);

var object = {};
object[gmf.PermalinkParam.FEATURES] = data;
this.ngeoStateManager_.updateState(object);
};


/**
* @typedef {{
* goog: (Array.<goog.events.Key>),
Expand Down
6 changes: 4 additions & 2 deletions src/ol-ext/interaction/modify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,9 +214,11 @@ ngeo.interaction.Modify.prototype.removeFeature_ = function(feature) {
*/
ngeo.interaction.Modify.prototype.getFeatureCollection_ = function(feature) {
var features;
if (feature.get(ngeo.FeatureProperties.IS_CIRCLE) === true) {
var isCircle = feature.get(ngeo.FeatureProperties.IS_CIRCLE);
var isRectangle = feature.get(ngeo.FeatureProperties.IS_RECTANGLE);
if (isCircle === true || isCircle === 'true') {
features = this.circleFeatures_;
} else if (feature.get(ngeo.FeatureProperties.IS_RECTANGLE) === true) {
} else if (isRectangle === true || isRectangle === 'true') {
features = this.rectangleFeatures_;
} else {
features = this.otherFeatures_;
Expand Down
43 changes: 26 additions & 17 deletions src/services/featurehelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ ngeo.FeatureHelper.prototype.getLineStringStyle_ = function(feature) {

var strokeWidth = this.getStrokeProperty(feature);
var showMeasure = this.getShowMeasureProperty(feature);
var color = this.getColorProperty(feature);
var color = this.getRGBAColorProperty(feature);

var options = {
stroke: new ol.style.Stroke({
Expand All @@ -152,7 +152,7 @@ ngeo.FeatureHelper.prototype.getLineStringStyle_ = function(feature) {
ngeo.FeatureHelper.prototype.getPointStyle_ = function(feature) {

var size = this.getSizeProperty(feature);
var color = this.getColorProperty(feature);
var color = this.getRGBAColorProperty(feature);

var options = {
image: new ol.style.Circle({
Expand Down Expand Up @@ -183,13 +183,11 @@ ngeo.FeatureHelper.prototype.getPolygonStyle_ = function(feature) {

var strokeWidth = this.getStrokeProperty(feature);
var opacity = this.getOpacityProperty(feature);
var color = this.getColorProperty(feature);
var color = this.getRGBAColorProperty(feature);

// fill color with opacity
var rgbColor = ol.color.fromString(color);
var rgbaColor = rgbColor.slice();
rgbaColor[3] = opacity;
var fillColor = ol.color.toString(rgbaColor);
var fillColor = color.slice();
fillColor[3] = opacity;

var options = {
fill: new ol.style.Fill({
Expand Down Expand Up @@ -222,7 +220,7 @@ ngeo.FeatureHelper.prototype.getTextStyle_ = function(feature) {
var label = this.getNameProperty(feature);
var size = this.getSizeProperty(feature);
var angle = this.getAngleProperty(feature);
var color = this.getColorProperty(feature);
var color = this.getRGBAColorProperty(feature);

return new ol.style.Style({
text: this.createTextStyle_(label, size, angle, color)
Expand Down Expand Up @@ -317,7 +315,7 @@ ngeo.FeatureHelper.prototype.getHaloStyle_ = function(feature) {
image: new ol.style.Circle({
radius: size + haloSize,
fill: new ol.style.Fill({
color: 'white'
color: [255, 255, 255, 1]
})
})
});
Expand All @@ -329,7 +327,7 @@ ngeo.FeatureHelper.prototype.getHaloStyle_ = function(feature) {
var strokeWidth = this.getStrokeProperty(feature);
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'white',
color: [255, 255, 255, 1],
width: strokeWidth + haloSize * 2
})
});
Expand All @@ -338,7 +336,7 @@ ngeo.FeatureHelper.prototype.getHaloStyle_ = function(feature) {
var label = this.getNameProperty(feature);
size = this.getSizeProperty(feature);
var angle = this.getAngleProperty(feature);
var color = 'white';
var color = [255, 255, 255, 1];
style = new ol.style.Style({
text: this.createTextStyle_(label, size, angle, color, haloSize * 2)
})
Expand Down Expand Up @@ -384,6 +382,16 @@ ngeo.FeatureHelper.prototype.getColorProperty = function(feature) {
};


/**
* @param {ol.Feature} feature Feature.
* @return {ol.Color} Color.
* @export
*/
ngeo.FeatureHelper.prototype.getRGBAColorProperty = function(feature) {
return ol.color.fromString(this.getColorProperty(feature));
};


/**
* @param {ol.Feature} feature Feature.
* @return {string} Name.
Expand Down Expand Up @@ -415,13 +423,14 @@ ngeo.FeatureHelper.prototype.getOpacityProperty = function(feature) {
* @export
*/
ngeo.FeatureHelper.prototype.getShowMeasureProperty = function(feature) {
var showMeasure = (/** @type {boolean} */ (
feature.get(ngeo.FeatureProperties.SHOW_MEASURE)));
var showMeasure = feature.get(ngeo.FeatureProperties.SHOW_MEASURE);
if (showMeasure === undefined) {
showMeasure = false;
} else if (typeof showMeasure === 'string') {
showMeasure = (showMeasure === 'true') ? true : false;
}
goog.asserts.assertBoolean(showMeasure);
return showMeasure;
return /** @type {boolean} */ (showMeasure);
};


Expand Down Expand Up @@ -553,7 +562,7 @@ ngeo.FeatureHelper.prototype.export_ = function(features, format, fileName,
* @param {string} text The text to display.
* @param {number} size The size in `pt` of the text font.
* @param {number=} opt_angle The angle in degrees of the text.
* @param {string=} opt_color The color of the text.
* @param {ol.Color=} opt_color The color of the text.
* @param {number=} opt_width The width of the outline color.
* @return {ol.style.Text} Style.
* @private
Expand All @@ -564,14 +573,14 @@ ngeo.FeatureHelper.prototype.createTextStyle_ = function(text, size,
var angle = opt_angle !== undefined ? opt_angle : 0;
var rotation = angle * Math.PI / 180;
var font = ['normal', size + 'pt', 'Arial'].join(' ');
var color = opt_color !== undefined ? opt_color : '#000000';
var color = opt_color !== undefined ? opt_color : [0, 0, 0, 1];
var width = opt_width !== undefined ? opt_width : 3;

return new ol.style.Text({
font: font,
text: text,
fill: new ol.style.Fill({color: color}),
stroke: new ol.style.Stroke({color: '#ffffff', width: width}),
stroke: new ol.style.Stroke({color: [255, 255, 255, 1], width: width}),
rotation: rotation
});
};
Expand Down

0 comments on commit b9a2488

Please sign in to comment.