Suite

Initiation à l'utilisation de Leaflet Draw aux formes CrowdSource sur une carte

Initiation à l'utilisation de Leaflet Draw aux formes CrowdSource sur une carte


Je veux crowdsourcer des formes sur une carte pour une organisation avec laquelle je travaille. Il semble que Leaflet Draw quelque chose dans le sens des projets Mapping Neighbourhoods. En tant que personne ayant une certaine expérience à la fois du travail avec des bases de données spatiales et de la création de cartes Leaflet, je me demandais s'il existait un didacticiel disponible pour commencer à combiner une carte Leaflet écrite dans une base de données.


Utilisation de CartoDB

Tutoriel du blog CartoDB


En me basant sur les ressources liées dans la réponse de Thomas Horner, j'ai écrit un exemple/tutoriel simple sur github à l'aide de brochure et de CartoDB. Quelques points clés ci-dessous.

Fonctions SQL personnalisées

Afin de ne pas exposer publiquement votre clé API (et permettre à quiconque de faire quoi que ce soit à vos données), vous devez écrire une fonction SQL personnalisée dans CartoDB pour activer les actions spécifiques que vous souhaitez sur votre table. Par exemple, pour insérer des géométries plus un nom d'utilisateur et une description de ce qui a été dessiné dans la tablecrowdmap-basic, écrivez ce qui suit dans l'onglet SQL personnalisé

FONCTION DROP SI EXISTE insert_crowd_mapping_data(text,text,text); --Suppose qu'une seule valeur est insérée CREATE OR REPLACE FUNCTION insert_crowd_mapping_data ( _geojson TEXT, _description TEXT, _name TEXT) --Doit retourner quelque chose pour être utilisé dans une instruction "SELECT" RETURNS integer AS $$ DECLARE _the_geom GEOMETRY; COMMENCER --Convertir le GeoJSON en un type de géométrie pour l'insertion. _the_geom := ST_SetSRID(ST_GeomFromGeoJSON(_geojson),4326); EXECUTE ' INSERT INTO crowdmap_basic (the_geom, description, name) VALUES (1 $, $2, $3) ' USING _the_geom, _description, _name; RETOUR 1 ; FINIR; $$ LANGUE plpgsql DÉFINISSEUR DE SÉCURITÉ ; --Accorder l'accès à l'utilisateur public GRANT EXECUTE ON FUNCTION insert_crowd_mapping_data( text, text, text) TO publicuser ;

Envoyer des données Leaflet.draw en utilisant AJAX

Consultez la documentation Leaflet.draw sur l'utilisation de Leaflet ou utilisez le didacticiel de Mike Foster. Dans mon exemple, une fois chaque dessin terminé, unsetData()La fonction est appelée, qui convertit d'abord l'élément dessiné en GeoJSON à transmettre à la requête SQL (note.géométrieaprès.toGeoJSON(), le code du tutoriel CartoDB est incorrect )

drawItems.eachLayer(function (layer) { //Convertir le dessin en GeoJSON pour le transmettre à la base de données CartoDB sql var drawing = "'"+JSON.stringify(layer.toGeoJSON().geometry)+"'"; // Construisez la requête SQL pour insérer des données à partir des trois paramètres : le dessin //, le nom d'utilisateur d'entrée et la description d'entrée de la forme dessinée var sql = "SELECT "+ cartoDBinsertfunction +"("; sql += dessin; sql += ","+enteredDescription; sql += ","+enteredUsername; sql += ");";

Et puis ajoutez la requête sql à un appel AJAX afin de transmettre les données à votre table CartoDB

//À FAIRE : changez votre nom d'utilisateur var cartoDBusername = "raphaeld" //Envoi des données $.ajax({ tapez : 'POST', url : 'https://'+cartoDBusername+'.cartodb.com/api/v2/ sql', crossDomain : true, data : {"q":sql}, dataType : 'json', success : function(responseData, textStatus, jqXHR) { console.log("Données enregistrées"); }, erreur : function ( responseData, textStatus, errorThrown) { console.log("Problème d'enregistrement des données"); } });

Voir la vidéo: CADMATIC Electrical 18 - Rivitalon sähkösuunnittelun aloitus