Skip to content Skip to navigation

OpenLayers Maps

Ce tutoriel est pour créer une carte avec plusieurs couches commutables, avec des pop-ups et un titre. À l'avenir, je prévois d'écrire d'autres tutoriels sur des sujets de cartographie plus avancés, tels que les polygones, l'utilisation de fichiers kml et d'autres éléments. Pour l'instant cependant, voici les principales étapes et concepts à comprendre avec OpenLayers:

  1. Vous voulez créer ou utiliser un type de contenu avec un champ d'adresse géocodé
  2. Avec Vues, ​​créez une superposition de données Openlayers par type de contenu qui récupère les adresses en tant que points.
  3. Créez une carte OpenLayers liée aux données de cette superposition.
  4. Enfin, créez votre affichage OpenLayers Map avec Views, qui affiche tous vos superpositions.

Ce tutoriel couvre en particulier la création d'une carte principale basée sur un type de contenu principal et ajoute également une couche supplémentaire pour le profil d'un utilisateur.

Modules requis:

  • OpenLayers (7.x-2.0-beta9 ou supérieur): OpenLayers, Openlayers UI, OpenLayers Views
  • CTools
  • Vues 3 : Vues, ​​vues UI
  • Bibliothèques
  • Geofield (2.1 ou supérieur)
  • GeoPHP (1.7 ou supérieur)
  • Géocodeur (1.2 ou supérieur)
  • Champ d'adresse (7.x-1.0-beta5)
  • En remarque, bien que vous puissiez lier à une bibliothèque externe, il est préférable de placer une copie locale de la bibliothèque OpenLayers (OpenLayers-2.13 à partir de cet article) dans sites / all / libraries pour un rendu plus rapide. De cette façon, vos cartes ne doivent pas atteindre le site OpenLayers pour récupérer la bibliothèque. Si OpenLayers est installé et activé, vous pouvez utiliser cette commande Drush pour télécharger la bibliothèque localement:drush dl-openlayers

Étape A - Configurer le type de contenu

  1. Après avoir activé les modules requis répertoriés ci-dessus, créez un nouveau type de contenu, tel qu'un «événement» et ajoutez un champ d'adresse postale (j'appelle mon champ: Emplacement) et utilisez le widget «Formulaire d'adresse dynamique». Vous pouvez laisser les paramètres du champ par défaut ou les modifier au besoin. Notez que vous pouvez inclure d'autres champs si nécessaire pour votre type de contenu.
  2. Ensuite, ajoutez un autre champ appelé Geofield, de type Geofield et le widget 'Géocode d'un autre champ'. Cela traduit l'adresse de localisation ci-dessus en données utilisables par OpenLayers (latitude et longitude, essentiellement)
    1. Dans la page des paramètres pour cela, sous "Géocode du champ", sélectionnez le nom de votre champ d'adresse postale précédemment créé. Vous pouvez laisser le reste des paramètres à leur valeur par défaut.
  3. Naturellement, vous devrez créer quelques noeuds de ce contenu et entrer une adresse. Lorsque vous l'affichez, vous devriez voir un lat et long pour le Geofield qui a interprété votre champ de localisation. N'hésitez pas à gérer l'affichage pour votre type de contenu pour afficher ce champ en tant que OpenLayers.

Étape B - Vues: Configurer la superposition de données OpenLayers

  1. Créez une nouvelle vue appelée "OpenLayers Overlay - [votre type de contenu]" (ou ce que vous souhaitez)
    1. Basez-le sur le type de contenu: [votre type créé ci-dessus à l'étape A], non trié. Décochez les options de bloc et de page car une surimpression ne sera ni l'une ni l'autre. Cliquez sur "Continuer et modifier"
    2. Créer un affichage 'OpenLayers Data Overlay' à partir du maître
      1. Sous Champs, sélectionnez votre champ geofield créé à l'étape A.
        • Étiquette: none
        • Formatter: WKT
        • Options de données: utiliser la géométrie complète
      2. Vous pouvez également ajouter d'autres champs ici, par exemple Titre.
      3. Sous Format, cliquez sur 'Liste non formatée' et remplacez-la par: OpenLayers Vector Data Overlay et avant d'enregistrer sélectionnez Supplanter au lieu de Tous les affichages dans la liste déroulante.
        • Sources de données cartographiques: WKT
        • Champ WKT: Contenu: Geofield
        • Titre Champ: Contenu: Titre (si vous voulez un titre)
    3. Vous pouvez définir les critères de filtre pour n'afficher que les éléments à venir, par exemple si vous utilisez le module Date, sélectionnez des éléments qui ne sont que des éléments à venir, pas passés.
    4. Vous ne voulez pas de téléavertisseur, définissez cette option "Afficher tous les éléments" ou vous pouvez la limiter à 100
  2. Sauvegarder cette vue

Étape C - Créer une carte OpenLayer

  1. Assurez-vous d'abord que OpenLayers est configuré correctement sur admin / structure / openlayers. Lisez-vous correctement votre bibliothèque?
  2. Accédez à Administration »Structure» OpenLayers »Cartes (admin / structure / openlayers / maps)
  3. Ajouter une nouvelle carte, en entrant des informations pour au moins les éléments suivants:
    • Infos
      • titre de la carte
      • description de la carte
    • Section Layers & Styles / Couches et styles:
      • Superposer des couches
        • Recherchez la vue que vous venez de créer. Cliquez sur les cases à cocher activées et activées.
    • Maintenant sauvegardez cette carte, puis modifiez-la de nouveau, ce qui est nécessaire pour que nous puissions appliquer plus de paramètres à la vue que vous avez choisie.
    • Section Comportements
      • faites défiler jusqu'à 'Pop Up for Features' et activez ceci et sélectionnez votre carte.
    • Sauvegarder cette carte. Nous avons fini ici pour l'instant.

Étape D - Vues: Configurer OpenLayers Map

  1. Créez une nouvelle vue qui sera une page ou un bloc contenant nos superpositions mappées. Je trouve que l'utilisation d'un bloc donne plus de flexibilité puisque vous pouvez ensuite l'insérer dans d'autres zones de votre site.
  2. Format: OpenLayers Map et assurez-vous de remplacer l'affichage par défaut avant d'enregistrer.
  3. Pour les options de style, Forcer l'utilisation des champs et sous Carte, choisissez la carte OpenLayers que vous venez de créer à l'étape C.
  4. Créez le chemin d'accès à la page de votre carte ou attribuez-lui un nom de bloc clair (assurez-vous que les URL propres sont activées, car cela pourrait causer des problèmes autrement) ou définissez le nom de votre bloc.
  5. Enregistrez votre vue et jetez un coup d'œil à votre carte. Vous devriez voir de petits points orange (le marqueur par défaut) représentant les nœuds que vous avez créés précédemment.

Il existe d'autres options que vous pouvez essayer dans le préréglage OpenLayers, telles que des icônes groupées pour les marqueurs groupés, des limites pour votre carte afin que seule une zone particulière puisse être un navigateur, des cartes plein écran, des marqueurs de style personnalisés. : Module OpenLayers Plus ), et de nombreuses autres options.

Étape E (Facultatif) - Ajouter une autre superposition de données OpenLayers pour les profils utilisateur

  1. Pour créer une autre incrustation de données OpenLayers pour les profils utilisateur, répétez l'étape B ci-dessus, mais au lieu de regarder le contenu, nous voulons Profils. Cela suppose que vous avez déjà un champ de localisation et un champ géographique sur votre type de profil.
  2. (pour le contenu du profil uniquement). Pour accéder au nom d'utilisateur, créez une relation requise pour lier les profils à l'utilisateur qui en est le propriétaire.
  3. Rappelez-vous, OpenLayers doit être informé que vous avez une nouvelle surimpression, donc en vous référant à l'étape C, vous voulez aller à votre carte OpenLayers et sélectionner cette nouvelle superposition de vues en tant que couche. Puisque vous pouvez avoir plus d'une couche maintenant, il est logique d'activer le 'sélecteur de couche' pour pouvoir activer et désactiver les couches.

Voilà. Une fois que vous avez travaillé à travers cela et fait quelques couches, vous aurez l'idée de la façon dont tout se rapporte. OpenLayers a une solide réputation de flexibilité malgré les étapes à plusieurs niveaux. Il semble encore plus flexible que Leaflet, ce qui vaut également le coup d'œil. Espérons que bientôt je vais mettre en place un tutoriel sur Leaflet.

http://purewebmedia.biz/article/2014/08/01/create-multi-layer-map-drupal...