Je dois créer une carte Web montrant de nombreuses couches raster. J'utilise mapserver et je veux utiliser Openlayers, mais je ne trouve aucun bon tutoriel à ce sujet. Je vois quelques vieilles questions ( 1 et 2 ) disant qu'il n'y avait pas de bonne documentation. Les choses ont-elles changé récemment?
Je voudrais trouver un tutoriel enseignant des bases aux choses assez compliquées avec de bonnes explications du code et des images / exemples des résultats. Pour l'instant, j'ai réussi à faire uniquement la carte Web la plus simple avec mon fichier .map , mais je dois le personnaliser (ajouter des légendes, des couches de groupe, ajouter plus de contrôles, incorporer, etc.).
openlayers-2
references
Nadya
la source
la source
En plus des excellentes réponses ci-dessus, permettez-moi d'ajouter ma propre expérience. Il y a un an et demi, j'ai décidé que je voulais utiliser OpenLayers (OL) dans mon projet de maîtrise et j'ai décidé de l'apprendre. Je fais de la programmation et de la création de cartes numériques dans le cadre de mon travail d'archéologue depuis le début des années 1980, et je suis un utilisateur d'ArcGIS depuis 15 ans. Je suis heureux d'avoir choisi l'OL pour mon projet, mais ce ne fut pas toujours un chemin facile pour l'apprendre. Certaines choses n'étaient pas évidentes et n'ont été apprises que par essais et erreurs. J'ai donc quelques conseils pour les débutants.
Mon voyage d'apprentissage de l'OL a vraiment commencé lorsque je me suis inscrit à un compte de bibliothèque à 5 emplacements sur Safari Books Online pour 10 $ / mois USD. Je voulais revoir les livres avant d'acheter, et peu de magasins que l'on peut visiter proposent des livres informatiques liés au SIG. Il y a maintenant trois livres sur OL 2. Un livre plus récent de 58 pages appelé Instant OpenLayers Starter par Di Lorenzo et Allegri (avril 2013) est un bon début rapide, mais les deux premiers livres et leurs exemples de code (disponibles sur le site Web de l'éditeur) site, avec un échantillon gratuit du chapitre de chaque livre) étaient de bonnes ressources:
En raison de frustrations occasionnelles sur la compatibilité CSS et du navigateur, j'ai fini par apprendre également un cadre JavaScript. Je choisis Dojo parce que c'est ce que Perez a utilisé dans son livre. Le Dojo moderne (Dojo 1.7 +) est une approche sensiblement différente des versions antérieures, utilisant un format AMD (Asynchronous Module Definition). La façon de tout faire a changé. Je ne comprenais pas que ce livre par ailleurs excellent utilise une version pré-1.7 de Dojo qui était devenue obsolète 9 mois avant la publication du livre en août 2012. Esri a continué à utiliser le pré-1.7 Dojo dans son API JavaScript ArcGIS jusqu'à sa modernisation en juin 2012 , et ce fut un changement douloureux pour de nombreux développeurs ArcGIS Javascript.
Pour comprendre à quel point Dojo est mal pris en charge, à part un livre écrit en 2010 sur Dojo 1.3, la plupart des livres ont été écrits en 2007 et 2008. Il n'y a pas de livres publiés pour Modern Dojo - vous devez apprendre des ressources en ligne, presque toutes qui sont sur leur site web. Fondamentalement, pour travailler avec les exemples dans le livre de Perez, vous devez en savoir assez sur JavaScript pour ignorer les bits Dojo et déplacer les exemples en JavaScript simple ou dans votre framework de choix.
Rétrospectivement, j'aurais aimé être parti avec le framework ExtJS et GeoExt. ExtJS est gratuit si votre projet est open source, et parce que de nombreuses entreprises paient volontiers pour une version prise en charge, elles peuvent se permettre de passer du temps sur la documentation et les didacticiels complets du site Web.
J'apprends mieux en travaillant avec / en piratant des exemples. Les développeurs d'OpenLayers ont cette même philosophie que la documentation principale vers laquelle ils pointent pour l'apprentissage examine les exemples. Cependant, certains exemples OL sur leur site Web et ailleurs ont des problèmes qui peuvent faire trébucher les débutants. (Voir ci-dessous.)
Le fait de s'appuyer sur des exemples comme documentation signifie également que l'utilisateur n'a pas le sentiment d'un bon flux de travail pour développer une carte Web. Cela peut conduire à créer des cartes qui semblent incomplètes - par exemple, elles peuvent manquer de personnalisations CSS à l'interface utilisateur des cartes et de "look and feel". Remplacer le css OL avec des personnalisations semble intimidant pour le débutant, mais Firebug peut vous aider à trouver les noms d'éléments que vous devez remplacer. L'absence de sens d'un flux de travail accepté peut également conduire à la création de Frankencode, car les utilisateurs chausse-pied dans leur code comme ils le souhaitent.
Cela m'amène au dernier élément qui, selon moi, fait défaut à la documentation du site OL, un sentiment de "meilleures pratiques" pour les cartes OL. Existe-t-il une meilleure façon d'organiser mon code pour le rendre modulaire et robuste? Quels sont les pièges avec les fermetures JavaScript et les objets OL? Où dois-je déclarer mes styles? Etc.
Outre les divers fichiers obsolètes du Wiki, il y a deux problèmes généraux qu'un débutant doit être conscient lorsqu'il apprend à partir des exemples OL officiels et des documents API. Premièrement, il n'y a pas d'organisation sur la page d'exemples de développement OL sur le site Web OL. Il s'agit simplement de présenter le flux du fichier xml dans ce répertoire (example-list.xml) des exemples (207 au 13 février 2014) et de trier les lignes par ordre alphabétique par nom de fichier dans une grille. Des exemples plus avancés sont mélangés à des exemples de base. Vous pouvez rechercher les exemples par mot-clé, mais de nombreux exemples manquent de mots-clés et la fonction de recherche inclut le contenu et le titre de la page dans la recherche, pas seulement des mots-clés. Les résultats sont renvoyés avec le plus grand nombre de termes de recherche mis en correspondance en premier, suivi de la fréquence des mots. Un seul des termes de recherche doit être une correspondance pour apparaître dans les résultats. La page UserRecipes sur le Wiki OL répertorie environ 90 exemples organisés par catégorie, et cette catégorisation est une aide. Parmi ceux-ci, 66 sont des liens en direct vers les exemples sur la page d'exemples et les autres sont de mauvais liens vers des exemples supprimés.
Deuxièmement, il existe essentiellement deux versions de la documentation de l'API qui semblent être identiques à première vue. L'API officielle se trouve dans un répertoire appelé / apidocs et le bord de fuite, mais volatile, la bibliothèque de développeur se trouve dans un répertoire appelé / docs. Les URL sont les mêmes sinon. (Il existe également des versions de tronc.) Modifiez simplement l'adresse de la page pour voir l'autre version. Le Wiki note que la bibliothèque du développeur ne doit pas être utilisée car les propriétés, fonctions, etc. peuvent être supprimées de la bibliothèque à tout moment. Avec OpenLayers 3 étant proche de la réalité (il est disponible en version bêta et il y a un livre à ce sujet maintenant), je pense que peu de choses changeront dans OL 2 à l'avenir. L'accent est désormais mis sur l'OL 3.
En général, je trouve que les pages de l'API OL sont trop squelettiques, manquant souvent d'explications ou d'exemples illustratifs, en particulier pour quelqu'un qui est habitué aux bibliothèques avec une documentation API plus complète. De la façon dont il est présenté, vous n'obtenez pas une image claire de l'objet dont il hérite.
Parmi les exemples OL sur le Web en général, beaucoup utilisent des objets ou une syntaxe déconseillée car elle a été remplacée par des versions améliorées. Par exemple, Layer.Vector est désormais le moyen préféré de dessiner des marqueurs, car Layer.Marker est obsolète dans la version 3. Examinez le fichier deprecated.js pour vous assurer que vous n'utilisez pas d'objets en voie de disparition. Ou, au moins, sachez que si vous mettez à niveau votre code vers OL 3, vous devrez le changer.
En plus de l'atelier Boundless OpenLayers lié par Julien-Samuel Lacroix ci-dessus, IBM propose un didacticiel sympa, bien qu'il ait trois ans, qui utilise OpenLayers, MapServer, Google Gears et jQuery pour créer une application Web SIG complète: rapprochez les données d'OpenLayers : Utilisation de données provenant de plusieurs sources divergentes dans les cartes Web
Consultez également cet article utile sur le style du sélecteur de calques
Utilisez les mots OpenLayers et jsFiddle pour obtenir des exemples de violons OL. Le résultat du site techslides est une page répertoriant un certain nombre d'entre eux.
Enfin, sachez que les images cartographiques dans la plupart des exemples proviennent de serveurs OpenStreetMap (OSM) et que celles-ci descendent de temps en temps, planifiées ou non, et vous obtiendrez des tuiles roses à leur place. Parfois, vous penserez que vous avez foiré votre code. Vous pouvez vérifier l'état de la plateforme sur le wiki OpenStreetMap.
la source
Regardez l' atelier Boundless OpenLayers . Il couvre beaucoup de matériel. L'atelier utilise GeoServer au lieu de MapServer, mais vous pouvez simplement changer l'URL de l'exemple pour votre service MapServer WMS.
la source
Open Layers est un package fantastique, incroyablement flexible, mais il manque de documentation pour les débutants mais a une tonne de documentation détaillée pour les développeurs.
Ce que j'ai fait quand j'ai commencé, c'était de regarder tous les exemples , de choisir ceux qui avaient la fonctionnalité que je voulais, d'analyser le code et de construire la fonctionnalité étape par étape, de tester au fur et à mesure. J'ai trouvé qu'en essayant trop de fonctionnalités en un seul coup, il était plus difficile de se faire une idée des problèmes de concepts et de débogage.
Ensuite, j'ai trouvé GIS @ SE qui a été d'une grande aide sur des questions spécifiques, soit en recherchant les questions des autres, soit en posant les miennes.
En dehors de cela, @Julian vous a probablement donné la meilleure option en termes de tutoriels, ils sont assez bons.
la source
Juste pour mentionner, cette page d'OpenGeo m'a également été utile. Ils partent des bases et ont un bon exemple d' événements GetFeatureInfo avec suppression des popups.
la source