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

Making the control's button work

Browse Source
This commit is contained in:
ahocevar
2013-08-09 20:34:55 +02:00
parent 871388d2c0
commit 19a00bbe27
2 changed files with 79 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/select-features.html
+47 -1
View File
@@ -9,6 +9,52 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Select features example</title> <title>Select features example</title>
<style type="text/css">
/* TODO: remove this after css/button refactoring */
.ol-select {
position: absolute;
background: rgba(255,255,255,0.4);
border-radius: 4px;
left: 8px;
padding: 2px;
top: 65px;
}
@media print {
.ol-select {
display: none;
}
}
.ol-select a {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 16px;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 22px;
width: 22px;
background-color: rgba(0, 60, 136, 0.2);
border-radius: 2px;
}
.ol-touch .ol-select a {
font-size: 20px;
height: 30px;
width: 30px;
line-height: 26px;
}
.ol-select.active a {
background-color: rgba(0, 60, 136, 0.6);
}
.ol-select a:hover {
background-color: rgba(0, 60, 136, 0.7);
}
.ol-select a:after {
content: "S";
}
</style>
</head> </head>
<body> <body>
@@ -38,7 +84,7 @@
<div class="span12"> <div class="span12">
<h4 id="title">Select features example</h4> <h4 id="title">Select features example</h4>
<p id="shortdesc">Example of using the Select control.</p> <p id="shortdesc">Example of using the Select control. Select features by clicking polygons. Hold the Shift-key to add to the selection. Click the 'S' button to toggle the control's active state.</p>
<div id="docs"> <div id="docs">
<p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p> <p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>
</div> </div>
src/ol/control/selectcontrol.js
+32 -12
View File
@@ -23,14 +23,28 @@ goog.require('ol.source.Vector');
ol.control.Select = function(opt_options) { ol.control.Select = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {}; var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @type {boolean}
* @private
*/
this.active_ = false;
/**
* @type {ol.layer.Vector}
* @protected
*/
this.layer = new ol.layer.Vector({ this.layer = new ol.layer.Vector({
source: new ol.source.Vector({parser: null}), source: new ol.source.Vector({parser: null}),
temp: true temp: true
}); });
/**
* @type {Array.<ol.layer.Layer>}
* @private
*/
this.layers_ = options.layers; this.layers_ = options.layers;
// TODO: css // TODO: css/button refactoring
var className = goog.isDef(options.className) ? options.className : var className = goog.isDef(options.className) ? options.className :
'ol-select'; 'ol-select';
@@ -75,12 +89,15 @@ ol.control.Select.prototype.toggleActive_ = function(browserEvent) {
* Activate the control. * Activate the control.
*/ */
ol.control.Select.prototype.activate = function() { ol.control.Select.prototype.activate = function() {
goog.dom.classes.add(this.element, 'active'); if (!this.active_) {
this.getMap().addLayer(this.layer); this.active_ = true;
// TODO: Implement box selection goog.dom.classes.add(this.element, 'active');
this.listenerKeys.push( this.getMap().addLayer(this.layer);
goog.events.listen(this.getMap(), ol.MapBrowserEvent.EventType.CLICK, // TODO: Implement box selection
this.handleClick, true, this)); this.listenerKeys.push(
goog.events.listen(this.getMap(), ol.MapBrowserEvent.EventType.CLICK,
this.handleClick, true, this));
}
}; };
@@ -88,12 +105,15 @@ ol.control.Select.prototype.activate = function() {
* Dectivate the control. * Dectivate the control.
*/ */
ol.control.Select.prototype.deactivate = function() { ol.control.Select.prototype.deactivate = function() {
if (!goog.array.isEmpty(this.listenerKeys)) { if (this.active_) {
goog.array.forEach(this.listenerKeys, goog.events.unlistenByKey); if (!goog.array.isEmpty(this.listenerKeys)) {
this.listenerKeys.length = 0; goog.array.forEach(this.listenerKeys, goog.events.unlistenByKey);
this.listenerKeys.length = 0;
}
this.getMap().removeLayer(this.layer);
goog.dom.classes.remove(this.element, 'active');
this.active_ = false;
} }
this.getMap().removeLayer(this.layer);
goog.dom.classes.remove(this.element, 'active');
}; };