diff options
| author | Étienne Loks <etienne.loks@iggdrasil.net> | 2016-09-28 23:41:29 +0200 |
|---|---|---|
| committer | Étienne Loks <etienne.loks@iggdrasil.net> | 2016-09-28 23:41:29 +0200 |
| commit | 8c1c06e773bd71ded8a553af035859c897b40864 (patch) | |
| tree | 7cdb73fbcd9de32922451c239357754a28557b01 /chimere | |
| parent | 7f1a18283284729bfd5e4c438f0bc8675ba4e8bb (diff) | |
| download | Chimère-8c1c06e773bd71ded8a553af035859c897b40864.tar.bz2 Chimère-8c1c06e773bd71ded8a553af035859c897b40864.zip | |
JS ol3: smooth pan and zoom when clicking on a cluster
Diffstat (limited to 'chimere')
| -rw-r--r-- | chimere/static/chimere/js/jquery.chimere.js | 56 |
1 files changed, 34 insertions, 22 deletions
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index 87e22ea..7771b7f 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -513,7 +513,7 @@ var invisibleStyleIcon = new ol.style.Style({ // zoom on aggregated var key = feature.get('key'); - if (key.length > 3 && key.substring(0, 3) == 'agg' && + if (key && key.length > 3 && key.substring(0, 3) == 'agg' && settings._zoom_need_reload){ var current_zoom = settings.map.getView().getZoom(); if (current_zoom < settings._zoom_need_reload){ @@ -523,28 +523,39 @@ var invisibleStyleIcon = new ol.style.Style({ return } - var geom = feature.getGeometry(); - if (geom.getType() == 'Point'){ - settings.popup.setPosition(geom.getCoordinates()); - settings.popup.setOffset([feature.get('popup_offset_x'), - -feature.get('popup_offset_y')]); - } else if (geom.getType() == 'Polygon'){ - settings.popup.setPosition(geom.getInteriorPoint().getCoordinates()); - settings.popup.setOffset([0, 0]); - } else if (geom.getType() == 'LineString'){ - settings.popup.setPosition(geom.getCoordinateAt(0.5)); - settings.popup.setOffset([0, 0]); - } else if (geom.getType() == 'MultipleLineString'){ - settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5)); - settings.popup.setOffset([0, 0]); + if (key && key.length > 6 && key.substring(0, 7) == 'cluster'){ + var v = settings.map.getView(); + var pan = ol.animation.pan( + {duration: 500, source: v.getCenter()}) + var zoom = ol.animation.zoom( + {duration: 500, resolution: v.getResolution()}) + settings.map.beforeRender(pan, zoom); + v.setZoom(v.getZoom() + 1); + v.setCenter(feature.getGeometry().getCoordinates()); + } else { + var geom = feature.getGeometry(); + if (geom.getType() == 'Point'){ + settings.popup.setPosition(geom.getCoordinates()); + settings.popup.setOffset([feature.get('popup_offset_x'), + -feature.get('popup_offset_y')]); + } else if (geom.getType() == 'Polygon'){ + settings.popup.setPosition(geom.getInteriorPoint().getCoordinates()); + settings.popup.setOffset([0, 0]); + } else if (geom.getType() == 'LineString'){ + settings.popup.setPosition(geom.getCoordinateAt(0.5)); + settings.popup.setOffset([0, 0]); + } else if (geom.getType() == 'MultipleLineString'){ + settings.popup.setPosition(geom.getLineString(0).getCoordinatesAt(0.5)); + settings.popup.setOffset([0, 0]); + } + $(settings.popup_item).popover({ + 'placement': 'top', + 'html': true, + 'content': feature.get('name') + }); + $(settings.popup_item).popover('show'); + methods.display_feature_detail(key); } - $(settings.popup_item).popover({ - 'placement': 'top', - 'html': true, - 'content': feature.get('name') - }); - $(settings.popup_item).popover('show'); - methods.display_feature_detail(key); } else { $(settings.popup_item).popover('destroy'); } @@ -914,6 +925,7 @@ var invisibleStyleIcon = new ol.style.Style({ settings._remindUpdated = {}; settings._currentRemind = -1; function clusterGetStyle (feature, resolution){ + var key = feature.set('key', 'cluster'); var features = feature.get('features'); var size = features.length; var style = settings._styleCache[size]; |