Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature change layer color2 #14

Merged
merged 8 commits into from
Jun 23, 2017
Merged

Feature change layer color2 #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
80288a2
added event change:grayScaled
pjjmunier Jun 19, 2017
d01e07f
event change:graySclaed : inverted old/new values
pjjmunier Jun 19, 2017
3368870
removed grayScale option update from method _colorGrayscaleLayerSwitc…
pjjmunier Jun 22, 2017
6b46461
added event change:grayScaled
pjjmunier Jun 19, 2017
1c547d2
Merge branch 'feature-changeLayerColor2' of https://github.com/IGNF/g…
pjjmunier Jun 22, 2017
15931a1
adds grayscale toggle to events sample
gcebelieu Jun 23, 2017
b87cc6c
Merge branch 'feature-changeLayerColor2' of https://github.com/IGNF/g…
gcebelieu Jun 23, 2017
09e5056
IE compatibility for CustomEvent and doc
gcebelieu Jun 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions samples/ol3/ol3-events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ <h1>Abonnement aux evenements</h1>
<input type="checkbox" name="zoomChanged" onclick="listen(this);"/>zoomChanged<br/>
<input type="checkbox" name="centerChanged" checked="true" onclick="listen(this);"/>centerChanged<br/>
<input type="checkbox" name="layerChanged" onclick="listen(this);"/>layerChanged<br/>
<input type="button" name="grayScale" onclick="toggleGS();" value="Toggle Orthos Grayscale / Color"/>
</div>
<div id="outputDiv"></div>
<script type="text/javascript">
Expand Down Expand Up @@ -70,6 +71,16 @@ <h1>Abonnement aux evenements</h1>
}
}

function toggleGS(elem) {
lo = map.getLayersOptions(["ORTHOIMAGERY.ORTHOPHOTOS"]) ;
if (!lo || !lo["ORTHOIMAGERY.ORTHOPHOTOS"]) {
console.log(lo) ;
return ;
}
lo["ORTHOIMAGERY.ORTHOPHOTOS"].grayScaled = (lo["ORTHOIMAGERY.ORTHOPHOTOS"].grayScaled ? false : true) ;
map.modifyLayers(lo) ;
}

</script>
</body>
</html>
2 changes: 1 addition & 1 deletion src/Map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@
* LayerChanged Event. Triggered when one of the map's layers has changed in some way : <br/>
* * If a layer has be removed from the map, property **layerRemoved** will host the removed layer definition.
* * If a layer has be added to the map, property **layerAdded** will host the added layer definition.
* * If properties (among *visibility*, *opacity* and *position*) of a layer has changed, property **layerChanged** will host the modified layer definition and **property**, **oldValue** and **newValues** will host the modified property with its old and new value.
* * If properties (among *visibility*, *opacity*, *position* and *grayScaled*) of a layer has changed, property **layerChanged** will host the modified layer definition and **property**, **oldValue** and **newValues** will host the modified property with its old and new value.
* <br/>
* One can listen to this event with [Gp.Map.listen()](Gp.Map.html#listen) method
*
Expand Down
86 changes: 64 additions & 22 deletions src/ol3/OL3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ define([
visible : "visibility",
opacity : "opacity",
zIndex : "position",
grayScaled : "grayScaled",
minResolution : "maxZoom",
maxResolution : "minZoom"
} ;
Expand Down Expand Up @@ -2487,28 +2488,53 @@ define([
map.logger.trace("[OL3] listen : abonnement layerProperty : " + obsProperty) ;
this.libMap.getLayers().forEach(function (olLayer,i,array) {
var layerOpts = this._getLayerOpts(olLayer) ;
olEventKey = olLayer.on(
"change:" + obsProperty,
function (ol3evt) {
// la fonction _getCommonLayerParams permet de faire la conversion
// propriete ol3 => propriete commune
var oldOl3obj = {} ;
oldOl3obj[ol3evt.key] = ol3evt.oldValue ;
var oldCommonProp = map._getCommonLayerParams(oldOl3obj) ;
var newOl3obj = {} ;
newOl3obj[ol3evt.key] = this.get(ol3evt.key) ;
var newCommonProp = map._getCommonLayerParams(newOl3obj) ;
if ( obsProperty === "grayScaled" ) {

/** layerChangeGrayScaled callback */
var callBack = function (evt) {
action.call(context,{
property : OL3.LAYERPROPERTIES[ol3evt.key],
oldValue : oldCommonProp[OL3.LAYERPROPERTIES[ol3evt.key]],
newValue : newCommonProp[OL3.LAYERPROPERTIES[ol3evt.key]],
property : "grayScaled",
oldValue : evt.detail.oldValue,
newValue : evt.detail.newValue,
layerChanged : layerOpts
}) ;
},
olLayer
) ;
this._registerEvent(olEventKey,eventId,action,context) ;
olEventKey = null ;
};

var gpEventKey = {
type : "change:grayScaled",
handler : callBack,
target : olLayer
};

gpEventKey.target.addEventListener(gpEventKey.type, gpEventKey.handler);

this._registerEvent(gpEventKey, eventId, action, context) ;

} else {
olEventKey = olLayer.on(
"change:" + obsProperty,
function (ol3evt) {
// la fonction _getCommonLayerParams permet de faire la conversion
// propriete ol3 => propriete commune
var oldOl3obj = {} ;
oldOl3obj[ol3evt.key] = ol3evt.oldValue ;
var oldCommonProp = map._getCommonLayerParams(oldOl3obj) ;
var newOl3obj = {} ;
newOl3obj[ol3evt.key] = this.get(ol3evt.key) ;
var newCommonProp = map._getCommonLayerParams(newOl3obj) ;
action.call(context,{
property : OL3.LAYERPROPERTIES[ol3evt.key],
oldValue : oldCommonProp[OL3.LAYERPROPERTIES[ol3evt.key]],
newValue : newCommonProp[OL3.LAYERPROPERTIES[ol3evt.key]],
layerChanged : layerOpts
}) ;
},
olLayer
) ;

this._registerEvent(olEventKey,eventId,action,context) ;
olEventKey = null ;
}
},
map) ;
}
Expand Down Expand Up @@ -2563,10 +2589,16 @@ define([
var evKey = null ;
for (var i = 0 ; i < rEvents.length ; i ++) {
if (rEvents[i].action == action) {
evKey = rEvents[i].key ;
evKey = rEvents[i].key;
rEvents.splice(i,1) ;
this.logger.trace("[OL3] : forgetting : " + eventId + " (" + evKey + ")") ;
ol.Observable.unByKey(evKey) ;

if ( evKey.type === "change:grayScaled" ) {
evKey.target.removeEventListener(evKey.type, evKey.handler);
} else {
ol.Observable.unByKey(evKey) ;
}

// on decale i d'un cran en arriere pour ne pas sauter d'elements
i -= 1 ;
}
Expand Down Expand Up @@ -2598,6 +2630,17 @@ define([
}

this._colorGrayscaleLayerSwitch(gpLayer,toGrayScale);

var event = IMap.CustomEvent(
"change:grayScaled",
{
detail : {
oldValue : !toGrayScale,
newValue : toGrayScale
}
}
);
gpLayer.obj.dispatchEvent(event);
};

/**
Expand Down Expand Up @@ -2697,7 +2740,6 @@ define([
source.loadstartListenerKey = null;
source.loadendListenerKey = null;
}
gpLayer.options.grayScaled = toGrayScale;

// maj du cache
source.refresh();
Expand Down