Enregistrer la dernière position des cartes

ReneRubalcava

<\/HEAD>

<\/P>

De temps en temps, on me demande de faire faire à une carte quelque chose qu'elle ne ferait normalement pas, mais qui a en fait parfaitement du sens. Étonnant, je sais<\/EM>.<\/P><\/P>Il y a quelque temps, un utilisateur a demandé si la carte pouvait sauvegarder certaines informations s'il devait fermer le navigateur et revenir plus tard. L'une de ces choses était la dernière position de la carte. Ils voulaient aussi une sauvegarde automatique lors des modifications et d'autres choses, mais les mêmes méthodes appliquées ici fonctionneront aussi pour cela.<\/P><\/P>Alors je me suis lancé comme un petit développeur heureux et bien sûr j'ai pensé, je vais juste utiliser windows.onunload<\/A>,<\/SPAN> en fait onbeforeunload<\/A><\/SPAN> est la méthode recommandée, et pour être sûr je vais utiliser dojo\/_base\/_unload<\/A> pour gérer les particularités. Je me suis dit que j'allais juste utiliser LocalStorage<\/A> et voilà, client super content. Et c'est vraiment aussi simple... à moins que vous n'utilisiez un appareil iOS<\/STRONG><\/A> (bien sûr il fallait que ce soit un problème iOS<\/EM>). Donc onbeforeunload<\/SPAN> n'est pas supporté dans mobile Safari, c'était décevant<\/EM>.<\/P><\/P>Puis je me suis dit, eh bien, pourquoi ne pas mettre à jour la position à chaque événement extent-change<\/A><\/SPAN> lors de l'utilisation d'un appareil iOS. Cela a fonctionné et j'ai passé cinq bonnes minutes à me féliciter (j'avais aussi une démangeaison<\/EM>).<\/P><\/P>Alors à quoi ressemble toute cette folie ?<\/P>Je vous présente un peu de code !<\/STRONG><\/EM><\/P>require([\n  'esri\/_map',\n  'dojo\/_on',\n  'dojo\/_base\/_unload',\n  'dojo\/_domReady!'\n], function (\n        Map, on, baseUnload\n) {\n  var supports_local_storage = function supports_local_storage() {\n    var test = 'has_local';\n    try {\n      localStorage.setItem(test, test);\n      localStorage.removeItem(test);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  };\n  var map = new Map("mapDiv", {\n    center: [-118, 34.5],\n    zoom: 8,\n    basemap: "topo"\n  });\n  if (supports_local_storage()) {\n    var vals, data, iOS, handler;\n    vals = localStorage.getItem(location.href + '--location');\n    if (vals) {\n      data = JSON.parse(vals);\n      map.centerAndZoom(data.center, data.zoom);\n    }\n    \/\/- gérer ce bug https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/A>\n    \/\/- Dans mes tests, un rafraîchissement du navigateur sous iOS ne déclenche pas\n    \/\/- window.onbeforeunload, donc si iOS, utiliser l'événement map pour écrire\n    \/\/- zoom et centre dans localStorage\n    iOS = \/(iPad|iPhone|iPod)\/g.test(navigator.userAgent);\n    handler = function() {\n      var loc = {\n        center: map.extent.getCenter(),\n        zoom: map.getLevel()\n      };\n      localStorage.setItem(location.href + '--location', JSON.stringify(loc));\n    };\n  & nbsp;if (!iOS) { \n & nbsp ;& nbsp ;& nbsp ;& nbsp ; baseUnload.addOnUnload(handler); \ n & nbsp ;& nbsp ;} else { \ n & nbsp ;& nbsp ;& nbsp ;& nbsp ; on(map, 'extent-change', handler); \ n & nbsp ;& nbsp ;} \ n & nbsp ;} \ n});< /PRE >< P >< / P >< P >Selon le support du navigateur, vous devrez peut-être utiliser < A href = "http /dojotoolkit.org/reference-guide/1.10/dojo/json.html " rel = "nofollow noopener noreferrer" target = "_blank" > dojo/json < /A > au lieu du JSON natif pour que cela fonctionne pauvre âme.< /P >< P >Et c'est tout ce qu'il y a à faire. La position est enregistrée dans < SPAN style = "font-family : 'courier new', courier ; " > LocalStorage < /SPAN > selon les besoins et lorsque l'application redémarre, elle vérifie s'il y a une position enregistrée et la recharge.< /P >< P >< /P >< P >Facile comme tout.< /P >< P >< IMG __jive_id = "83207" alt = "self-five.gif" class = "image-2 jive-image" src = "https /us.v-cdn.net/6038851/uploads/legacyfs/online/83207_self-five.gif" style = "height : auto ; " / >< /P >< P >< /P >< P >Vous pouvez voir une démo < A href = "http /www.odoe.net/apps/savelocation/" rel = "nofollow noopener noreferrer" target = "_blank" > en action ici < /A >.< /P >< P >< /P >< P >Pour plus d'astuces geodev, < A href = "http /odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank" > consultez mon blog < /A >.< /P >< /BODY >< /HTML >