recherche
Maisoninterface Webjs tutorielComment créer une carte du centre commercial avec des données en temps réel à l'aide de WRLD

Ce didacticiel démontre la création de cartes interactives 3D en temps réel à l'aide de WRLD, améliorant l'expérience utilisateur avec les informations et la navigation dynamiques. Nous allons créer deux démos: l'une ajoutant des marqueurs interactifs à une carte du centre commercial intérieur, l'autre montrant la capacité de stationnement avec des polygones colorés. Le projet complet est disponible sur github.

How to Create a Mall Map with Real-time Data Using WRLD

Au-delà des simples cartes Google, WRLD permet des cartes 3D intérieures avec des marqueurs interactifs, offrant des expériences utilisateur uniques et des interactions d'interface utilisateur en Map.

How to Create a Mall Map with Real-time Data Using WRLD

Ce tutoriel couvre:

  • Configuration: Obtenir une clé API WRLD et préparer votre environnement de développement (Node.js, NPM, YARN).
  • Deux approches: en utilisant les outils intégrés de WRLD (concepteur de cartes, place du concepteur) pour une solution sans code ou créant une application personnalisée pour une plus grande flexibilité.
  • Contrôles de carte intérieure: Implémentation de commandes pour une navigation au sol facile dans le centre commercial.
  • Vue intérieure automatique: Réglage de la carte pour se charger automatiquement en vue intérieure.
  • Cartes de magasin personnalisées: Création de cartes de magasin dynamique affichant des données en temps réel (promotions, disponibilité).
  • Visualisation de la disponibilité du stationnement: Utilisation de polygones colorés pour représenter l'occupation de l'espace de stationnement.

Prérequis:

Compréhension de base des modules JavaScript Dom, Syntaxe ES6 et ES6. La familiarité avec la plate-forme WRLD est utile mais pas requise.

How to Create a Mall Map with Real-time Data Using WRLD

PRENDRE:

Créez un compte WRLD gratuit et obtenez votre clé API (voir "Building Dynamic Maps 3D" pour les instructions).

Construire la carte (approche de l'application personnalisée):

  1. Configuration du projet: Créer un dossier de projet, initialiser package.json et créer les répertoires et les fichiers nécessaires (Src / JS, Src / CSS, index.html, app.js, app.css, env .js).
  2. Dépendances: installer wrld.js, axios, babel (pour la compilation ES6), parcelle (bundler) et serveur JSON (pour une API manquée).
  3. Clé API: Ajoutez votre touche API WRLD à env.js.
  4. Carte de base: Créez une carte de base en utilisant Wrld.map() dans app.js, en spécifiant votre clé API, les coordonnées centrales, le niveau de zoom et l'activation des cartes intérieures.
  5. Contrôles intérieurs: Ajouter les scripts nécessaires (jQuery, jQuery UI, indoor_control.js) et un conteneur div (widget-container) à index.html. Initialisez le contrôle intérieur dans app.js.
  6. Entrée intérieure automatique: Déterminez l'ID de carte intérieure de l'événement indoormapenter et utilisez map.indoors.enter() pour entrer automatiquement la vue intérieure sur la charge de la carte.
  7. Données de carte de stockage: Créez un dossier data et remplissez-les avec db.json contenant des informations de magasin (coordonnées, coordonnées, heures d'ouverture). Exécutez json-server --watch data/db.json pour créer un serveur API local.
  8. Conception et implémentation des cartes de magasin: Créer des modèles HTML pour les cartes de magasin (en utilisant JSRender) et un service (api-service.js) pour récupérer les données du serveur JSON. Implémentez un service contextuel (popup-service.js) pour afficher les cartes de magasin dans les fenêtres contextuelles sur les clics de marqueur. Ajoutez des marqueurs à la carte dans app.js, en fixant des écouteurs de clic pour déclencher le service popup.
  9. Disponibilité de stationnement: Créer un fichier HTML distinct (parking.html) et un fichier javascript (parking.js). Rassemblez des coordonnées pour les zones de stationnement et créez des polygones à l'aide de Wrld.polygon(). Utilisez le codage couleur pour représenter l'occupation du stationnement. Implémentez les mises à jour en temps réel à l'aide de socket.io (installer socket.io, socket.io-client). Créez un serveur personnalisé (server.js) pour gérer les connexions Socket.io et diffuser les mises à jour de stationnement. Mettez à jour le code côté client pour écouter et gérer ces mises à jour.

How to Create a Mall Map with Real-time Data Using WRLD

Cette ventilation détaillée fournit un guide complet pour construire ces cartes 3D interactives. N'oubliez pas de consulter les liens fournis pour les extraits de code complets et plus de détails. Les possibilités d'extension de ces démos sont vastes, permettant une intégration avec des sources de données du monde réel et un large éventail d'applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Remplacer les caractères de chaîne en javascriptRemplacer les caractères de chaîne en javascriptMar 11, 2025 am 12:07 AM

Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi

jQuery Vérifiez si la date est validejQuery Vérifiez si la date est valideMar 01, 2025 am 08:51 AM

Des fonctions JavaScript simples sont utilisées pour vérifier si une date est valide. fonction isValidDate (s) { var bits = s.split ('/'); var d = new Date (bits [2] '/' bits [1] '/' bits [0]); return !! (d && (d.getMonth () 1) == bits [1] && d.getDate () == Number (bits [0])); } //test var

jQuery obtient un rembourrage / marge d'élémentjQuery obtient un rembourrage / marge d'élémentMar 01, 2025 am 08:53 AM

Cet article explique comment utiliser jQuery pour obtenir et définir les valeurs de marge et de marge intérieures des éléments DOM, en particulier les emplacements spécifiques de la marge extérieure et des marges intérieures de l'élément. Bien qu'il soit possible de définir les marges intérieures et extérieures d'un élément à l'aide de CSS, l'obtention de valeurs précises peut être délicate. // installation $ ("div.header"). CSS ("marge", "10px"); $ ("div.header"). css ("padding", "10px"); Vous pourriez penser que ce code est

10 onglets jQuery Accordion10 onglets jQuery AccordionMar 01, 2025 am 01:34 AM

Cet article explore dix onglets jQuery exceptionnels et accordéons. La principale différence entre les onglets et les accordéons réside dans la façon dont leurs panneaux de contenu sont affichés et cachés. Plongeons ces dix exemples. Articles connexes: 10 plugins de l'onglet jQuery

10 vaut la peine de vérifier les plugins jQuery10 vaut la peine de vérifier les plugins jQueryMar 01, 2025 am 01:29 AM

Découvrez dix plugins jQuery exceptionnels pour élever le dynamisme et l'attrait visuel de votre site Web! Cette collection organisée offre diverses fonctionnalités, de l'animation d'image aux galeries interactives. Explorons ces outils puissants: Related Posts: 1

Http débogage avec le nœud et le http-consoleHttp débogage avec le nœud et le http-consoleMar 01, 2025 am 01:37 AM

HTTP-Console est un module de nœud qui vous donne une interface de ligne de commande pour exécuter les commandes HTTP. C'est idéal pour le débogage et voir exactement ce qui se passe avec vos demandes HTTP, qu'elles soient faites contre un serveur Web, Web Serv

Tutoriel de configuration de l'API de recherche Google personnaliséTutoriel de configuration de l'API de recherche Google personnaliséMar 04, 2025 am 01:06 AM

Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y

jQuery Ajouter une barre de défilement à divjQuery Ajouter une barre de défilement à divMar 01, 2025 am 01:30 AM

L'extrait de code jQuery suivant peut être utilisé pour ajouter des barres de défilement lorsque le contenu DIV dépasse la zone de l'élément de conteneur. (Pas de démonstration, veuillez le copier directement sur Firebug) // d = document // w = fenêtre // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ('# c

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire