Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
Pages: 1
- Sujet précédent - Problème à la création de KML avec Mapinfo pour affichage OpenLayers - Sujet suivant
#1 Tue 20 March 2012 15:46
- cmoipich
- Participant occasionnel
- Date d'inscription: 15 Mar 2012
- Messages: 21
Problème à la création de KML avec Mapinfo pour affichage OpenLayers
Bonjour,
je suis débutant dans le webmapping et en Javascript, et je souhaiterais afficher une carte representant des panneaux de signalisation routière avec openlayers.
J'ai réussi à monter mon fichier html, et j'affiche mon fond de carte qui contient OpenStreetMap et les orthophotos de google maps. Mais j'ai des problèmes pour integrer mon KML avec mes points.
En effet, lorsque j'essaye avec un kml donné en exemple sur openlayers.org (sundials.kml par exemple), celui ci s'affiche. Mais quand j'essaye avec le mien non!
J'ai créé mon kml avec MI 9.5, et j'ai remarqué que dans la structure de ce kml, il n'y a presque qu'une description de mes points. Dans le KML en exemple d'openlayers.org, avant la definition des points, il y a d'autres choses dont une definition des icones à utiliser il me semble.
Je n'ai peut etre pas créé mon KML correctement, pouvez vous me dire quelle est la procédure pour ca SVP?
Pour compliquer la chose, par la suite ma table sera mise à jour par des gens qui ne s'y connaissent pas vraiment, et qui ne peuvent rien installer sur leur ordinateur, ils ont juste QGIS pour mettre la table à jour et créer le KML. Donc j'essaye de faire ca sans GoogleEarth, mais ca ne me simplifie pas la tache!
Merci pour votre aide et vos idées!
Sylvain
Hors ligne
#2 Mon 26 March 2012 17:31
- icadedt
- Participant assidu
- Lieu: ici et là
- Date d'inscription: 21 Jul 2006
- Messages: 478
Re: Problème à la création de KML avec Mapinfo pour affichage OpenLayers
Laissez moi deviner... Vous êtes stagiaire et on vous demande de créer un SIG tip top sur mesure pour pas cher. Me trompé-je?
on peut voir le kml créé avec mapinfo?
Dernière modification par icadedt (Mon 26 March 2012 17:53)
Hors ligne
#3 Mon 26 March 2012 19:00
- cmoipich
- Participant occasionnel
- Date d'inscription: 15 Mar 2012
- Messages: 21
Re: Problème à la création de KML avec Mapinfo pour affichage OpenLayers
... Non vous ne vous trompez pas!
Voici le code du fichier kml que je n'arrive pas a visualiser avec Openlayers:
Code:
<?xml version="1.0" encoding="utf-8"?><kml xmlns="http://earth.google.com/kml/2.1"><Folder><description><![CDATA[219 Items from Layer Relevés_fusion]]></description><Placemark><name><![CDATA[AB4]]></name><description><![CDATA[<br><br><br>
<table border="1" padding="0">
<tr><td>ID_mat</td><td>1</td></tr>
<tr><td>ref_panneau</td><td>AB4</td></tr>
<tr><td>taille_panneau</td><td>600</td></tr>
<tr><td>annee_panneau</td><td>2007</td></tr>
<tr><td>classe_rev_panneau</td><td>2</td></tr>
<tr><td>etat_panneau</td><td>B</td></tr>
<tr><td>comm_panneau</td><td></td></tr>
<tr><td>forme_mat</td><td>rectangle</td></tr>
<tr><td>etat_mat</td><td>B</td></tr>
<tr><td>etat_scell_mat</td><td>Mo</td></tr>
<tr><td>comm_mat</td><td>mauvais scellement</td></tr>
<tr><td>nom_rue</td><td>Chemin du Ribas</td></tr>
<tr><td>num_photo</td><td>1</td></tr>
<tr><td>url</td><td><img style="witdth:500px" src="http://cmoipich.net84.net/photos_sign/1.JPG"></td></tr>
]]></description><visibility>1</visibility><open>0</open><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>7.003511,43.638142,0</coordinates></Point></Placemark><Placemark><name><![CDATA[C13A]]></name><description><![CDATA[<br><br><br>
<table border="1" padding="0">
<tr><td>ID_mat</td><td>2</td></tr>
<tr><td>ref_panneau</td><td>C13A</td></tr>
<tr><td>taille_panneau</td><td>500</td></tr>
<tr><td>annee_panneau</td><td>2002</td></tr>
<tr><td>classe_rev_panneau</td><td>2</td></tr>
<tr><td>etat_panneau</td><td>B</td></tr>
<tr><td>comm_panneau</td><td></td></tr>
<tr><td>forme_mat</td><td>rectangle</td></tr>
<tr><td>etat_mat</td><td>B</td></tr>
<tr><td>etat_scell_mat</td><td>B</td></tr>
<tr><td>comm_mat</td><td></td></tr>
<tr><td>nom_rue</td><td>Chemin du Ribas</td></tr>
<tr><td>num_photo</td><td>2</td></tr>
<tr><td>url</td><td><img style="witdth:500px" src="http://cmoipich.net84.net/photos_sign/2.JPG"></td></tr>
]]></description><visibility>1</visibility><open>0</open><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>7.003543,43.638214,0</coordinates></Point></Placemark><Placemark><name><![CDATA[B14 (50)]]></name><description><![CDATA[<br><br><br>
<table border="1" padding="0">
<tr><td>ID_mat</td><td>2</td></tr>
<tr><td>ref_panneau</td><td>B14 (50)</td></tr>
<tr><td>taille_panneau</td><td>450</td></tr>
<tr><td>annee_panneau</td><td>2006</td></tr>
<tr><td>classe_rev_panneau</td><td>2</td></tr>
<tr><td>etat_panneau</td><td>B</td></tr>
<tr><td>comm_panneau</td><td></td></tr>
<tr><td>forme_mat</td><td>rectangle</td></tr>
<tr><td>etat_mat</td><td>B</td></tr>
<tr><td>etat_scell_mat</td><td>B</td></tr>
<tr><td>comm_mat</td><td></td></tr>
<tr><td>nom_rue</td><td>Chemin du Ribas</td></tr>
<tr><td>num_photo</td><td>2</td></tr>
<tr><td>url</td><td><img style="witdth:500px" src="http://cmoipich.net84.net/photos_sign/2.JPG"></td></tr>
]]></description><visibility>1</visibility><open>0</open><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>7.003542,43.638205,0</coordinates></Point></Placemark></Folder></kml>et ce pour 219 éléments.
Et voici le code de la carte OpenLayers:
Code:
<html>
<head>
<title>SIG</title>
<link rel="stylesheet" href="/OpenLayers-2.10/theme/default/style.css" type="text/css" />
<style type="text/css">
html, body {
height: 100%;
}
#map{
width : 100%;
height : 95%;
border : 1px solid black;
}
.olPopup p { margin:0px; font-size: .9em;}
.olPopup h2 { font-size:1.2em; }
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDabLe5R2Y5nXTJjqvQrCSa7wssnxRYzx4" type="text/javascript"></script>
<script src="/OpenLayers-2.10/OpenLayers.js"></script>
<script type="text/javascript">
var map, select1; select2
function init(){
map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037508, -20037508, 20037508, 20037508.34
)
});
var osm = new OpenLayers.Layer.OSM();
var gsat = new OpenLayers.Layer.Google("Google : orthophoto",{type: G_SATELLITE_MAP, 'sphericalMercator': true});
var ghyb = new OpenLayers.Layer.Google( "Google : orthophoto + infos", { type: G_HYBRID_MAP , 'sphericalMercator': true} );
map.addLayers([osm, gsat, ghyb]);
var sign = new OpenLayers.Layer.GML("Panneaux de signalisation verticale", "cartqgis.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(sign);
var PMR = new OpenLayers.Layer.GML("Places stationnement PMR", "pmr.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(PMR);
var ecl = new OpenLayers.Layer.GML("Eclairage", "ecl.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(ecl);
var bati = new OpenLayers.Layer.GML("Bâtiments communaux", "bati2.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(bati);
var poub = new OpenLayers.Layer.GML("Poubelles", "poub.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(poub);
var banc = new OpenLayers.Layer.GML("Bancs", "banc.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(banc);
var bus = new OpenLayers.Layer.GML("Abribus", "bus.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(bus);
var incen = new OpenLayers.Layer.GML("Bornes incendie", "incen.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(incen);
var pass = new OpenLayers.Layer.GML("Passages piétons", "pass.kml",
{projection: map.displayProjection,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}});
map.addLayer(pass);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl( new OpenLayers.Control.PanZoomBar());
map.addControl( new OpenLayers.Control.MousePosition());
map.addControl( new OpenLayers.Control.Scale());
map.addControl( new OpenLayers.Control.ZoomBox());
map.addControl( new OpenLayers.Control.OverviewMap());
map.setCenter(
new OpenLayers.LonLat(7.00, 43.64).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
15
);
select = new OpenLayers.Control.SelectFeature(sign);
select1 = new OpenLayers.Control.SelectFeature(bati);
select2 = new OpenLayers.Control.SelectFeature(PMR);
select3 = new OpenLayers.Control.SelectFeature(bus);
select4 = new OpenLayers.Control.SelectFeature(incen);
select5 = new OpenLayers.Control.SelectFeature(ecl);
select6 = new OpenLayers.Control.SelectFeature(pass);
select7 = new OpenLayers.Control.SelectFeature(poub);
select8 = new OpenLayers.Control.SelectFeature(banc);
sign.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
bati.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
PMR.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
bus.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
banc.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
incen.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
ecl.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
pass.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
poub.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
map.addControl(select);
select.activate();
map.addControl(select1);
select1.activate();
map.addControl(select2);
select2.activate();
map.addControl(select3);
select3.activate();
map.addControl(select4);
select4.activate();
map.addControl(select5);
select5.activate();
map.addControl(select6);
select6.activate();
map.addControl(select7);
select7.activate();
map.addControl(select8);
select8.activate();
}
function onPopupClose(evt) {
select.unselectAll();
select1.unselectAll();
select2.unselectAll();
select3.unselectAll();
select4.unselectAll();
select5.unselectAll();
select6.unselectAll();
select7.unselectAll();
select8.unselectAll();
}
function onFeatureSelect(event) {
var feature = event.feature;
var selectedFeature = feature;
var popup = new OpenLayers.Popup.FramedCloud("test",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(10,10),
"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
null, true, onPopupClose
);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(event) {
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>Le problème c'est que lorsque l'on clique sur un élément de la carte (apres avoir désactivé toutes les autres couches sinon ca ne marche pas!)
Une boite "Undefined" apparait.
Je ne connais pas trop le javascript, mais j'ai l'impression que lorsque l'on clique sur un objet, il cherche à afficher le nom et la description de l'objet en question, et Mapinfo ne crée rien de tel. Ou alors Openlayers n'arrive pas à les trouver.
Au passage, lorsque je crée mon KML avec QGIS, il a cette forme:
Code:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document><Folder><name>cartqgis</name>
<Schema name="cartqgis" id="cartqgis">
<SimpleField name="Name" type="string"></SimpleField>
<SimpleField name="Description" type="string"></SimpleField>
<SimpleField name="ID_mat" type="float"></SimpleField>
<SimpleField name="ref_panneau" type="string"></SimpleField>
<SimpleField name="taille_panneau" type="float"></SimpleField>
<SimpleField name="annee_panneau" type="float"></SimpleField>
<SimpleField name="classe_rev_panneau" type="float"></SimpleField>
<SimpleField name="etat_panneau" type="string"></SimpleField>
<SimpleField name="comm_panneau" type="string"></SimpleField>
<SimpleField name="forme_mat" type="string"></SimpleField>
<SimpleField name="etat_mat" type="string"></SimpleField>
<SimpleField name="etat_scell_mat" type="string"></SimpleField>
<SimpleField name="comm_mat" type="string"></SimpleField>
<SimpleField name="nom_rue" type="string"></SimpleField>
<SimpleField name="num_photo" type="string"></SimpleField>
<SimpleField name="url" type="string"></SimpleField>
</Schema>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#cartqgis">
<SimpleData name="ID_mat">1</SimpleData>
<SimpleData name="ref_panneau">AB4</SimpleData>
<SimpleData name="taille_panneau">600</SimpleData>
<SimpleData name="annee_panneau">2007</SimpleData>
<SimpleData name="classe_rev_panneau">2</SimpleData>
<SimpleData name="etat_panneau">B</SimpleData>
<SimpleData name="comm_panneau"></SimpleData>
<SimpleData name="forme_mat">rectangle</SimpleData>
<SimpleData name="etat_mat">B</SimpleData>
<SimpleData name="etat_scell_mat">Mo</SimpleData>
<SimpleData name="comm_mat">mauvais scellement</SimpleData>
<SimpleData name="nom_rue">Chemin du Ribas</SimpleData>
<SimpleData name="num_photo">1</SimpleData>
<SimpleData name="url"><img style="witdth:500px" src="http://cmoipich.net84.net/photos_sign/1.JPG"></SimpleData>
</SchemaData></ExtendedData>
<Point><coordinates>7.003511,43.638142</coordinates></Point>
</Placemark>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#cartqgis">
<SimpleData name="ID_mat">2</SimpleData>
<SimpleData name="ref_panneau">C13A</SimpleData>
<SimpleData name="taille_panneau">500</SimpleData>
<SimpleData name="annee_panneau">2002</SimpleData>
<SimpleData name="classe_rev_panneau">2</SimpleData>
<SimpleData name="etat_panneau">B</SimpleData>
<SimpleData name="comm_panneau"></SimpleData>
<SimpleData name="forme_mat">rectangle</SimpleData>
<SimpleData name="etat_mat">B</SimpleData>
<SimpleData name="etat_scell_mat">B</SimpleData>
<SimpleData name="comm_mat"></SimpleData>
<SimpleData name="nom_rue">Chemin du Ribas</SimpleData>
<SimpleData name="num_photo">2</SimpleData>
<SimpleData name="url"><img style="witdth:500px" src="http://cmoipich.net84.net/photos_sign/2.JPG"></SimpleData>
</SchemaData></ExtendedData>
<Point><coordinates>7.003543,43.638214</coordinates></Point>
</Placemark>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#cartqgis">
<SimpleData name="ID_mat">2</SimpleData>
<SimpleData name="ref_panneau">B14 (50)</SimpleData>
<SimpleData name="taille_panneau">450</SimpleData>
<SimpleData name="annee_panneau">2006</SimpleData>
<SimpleData name="classe_rev_panneau">2</SimpleData>
<SimpleData name="etat_panneau">B</SimpleData>
<SimpleData name="comm_panneau"></SimpleData>
<SimpleData name="forme_mat">rectangle</SimpleData>
<SimpleData name="etat_mat">B</SimpleData>
<SimpleData name="etat_scell_mat">B</SimpleData>
<SimpleData name="comm_mat"></SimpleData>
<SimpleData name="nom_rue">Chemin du Ribas</SimpleData>
<SimpleData name="num_photo">2</SimpleData>
<SimpleData name="url"><img style="witdth:500px" src="http://cmoipich.net84.net/photos_sign/2.JPG"></SimpleData>
</SchemaData></ExtendedData>
<Point><coordinates>7.003542,43.638205</coordinates></Point>
</Placemark>
</Folder></Document></kml>Cette fois il n'y a meme pas de <name> ou <description>. Donc je ne sais pas si c'est possible de l'afficher avec OpenLayers.
Merci beaucoup de vous interesser à mon cas en tout cas!
Hors ligne
#4 Mon 26 March 2012 19:43
Re: Problème à la création de KML avec Mapinfo pour affichage OpenLayers
Bonsoir,
il cherche à afficher le nom et la description de l'objet en question, et Mapinfo ne crée rien de tel. Ou alors Openlayers n'arrive pas à les trouver.
S'il cherche quelque chose qui n'existe pas, Personne, même OpenLayers, ne le trouvera pas. Peut être SuperLayers mais il n'existe pas encore 
Ton premier KML ne te choque pas ? À comparer à ce que tu exportes par QGIS ? Les balises td c'est du HTML pas du KML.
Bref, remplace ""<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description," par "<h2>coucou</h2>". Puis en dessous de " var feature = event.feature;" tu met console.log(feature) et tu ouvres firebug puis recharge ta page.
Essaye de comprendre le code Javacript et ce que je viens de t'indiquer. À quoi cela sert il ? Comment corriger le code JavaScript pour arriver à afficher tes données attributaires de la feature ?
Y.
Yves Jacolin, bénévole de l'association GeoRezo.net, agit au nom et pour le compte de l'association - Partageons ce qui nous départage !! - GeoRezo vous aide ? Aidez GeoRezo !
Hors ligne
#5 Tue 27 March 2012 09:52
- icadedt
- Participant assidu
- Lieu: ici et là
- Date d'inscription: 21 Jul 2006
- Messages: 478
Re: Problème à la création de KML avec Mapinfo pour affichage OpenLayers
ton kml manque peut être d'une mise en forme des points: affecter une icône à tes points:
https://developers.google.com/kml/documentation/kml_tut
quand il n'y a pas d'icones specifiées, dans google earth en tout cas, une icone par défaut est affectée mais avec openlayers peut être qu'il faut obligatoirement affecter une icône pour tes ponctuels, par exemple:
Code:
<Style id="sh_sunny_copy69">
<IconStyle>
<scale>1.4</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
</Icon>
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
</IconStyle>
<LabelStyle>
<color>ff00aaff</color>
</LabelStyle>
</Style>Dernière modification par icadedt (Tue 27 March 2012 10:50)
Hors ligne
#6 Tue 27 March 2012 22:21
- cmoipich
- Participant occasionnel
- Date d'inscription: 15 Mar 2012
- Messages: 21
Re: Problème à la création de KML avec Mapinfo pour affichage OpenLayers
Merci pour vos conseils.
J'ai passé ces deux derniers jours dessus, et je ne sais pas exactement ce que j'ai fait, mais ca marche avec les kml fait à partir de Mapinfo!
Yves, j'ai découvert le javascript il y a 3 semaines, alors je ne comprends pas trop le fonctionnement de firebug, il faut dire que la carte s'est affiché peu de temps après que j'installe l'extension sur Firefox, donc je n'ai pas trop pratiqué.
J'ai bien compris que le code
Code:
"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
permet d'aller chercher le nom et la description de chaque objet, mais comme il n'y a pas de <description> dans les kml que je crée avec QGIS, comment faire? j'ai essayé avec: feature.attributes.ExtendedData, mais ca n'a pas marché.
A défaut, j'ai téléchargé le freeware shp2kml. Je peux convertir les tables en shp grace au traducteur universel de MI, puis QGIS peut les prendre en charge je peux donc les mettre à jour, et je les exporte en kml grace à ce freeware qui permet en plus de paramétrer le visuel du popup.
Icadedt, je ne pense pas que le problème venait de là, étant donné que ca marche, mais en tout cas, j'ai pu personnaliser mes icones!
Un nouveau problème se pose: parfois j'ai plusieurs panneaux sur un meme poteau, j'ai donc des points qui se superposent. Est il possible dans openlayers d'afficher un "éclatement" des points pour pouvoir choisir celui que je veux à la manière de GoogleEarth?
Sinon, j'ai fait des punaises orientées à droite, gauche, haut et bas. Ce qui fait qu'une fois qu'elles pointent toutes sur le point elles ne devraient pas se puperposer. Actuellement, mes icones sont en png, mais est il possible de leur spécifier un "point d'implantation" sur le bout de la punaise? De manière à ce qu'elles se placent avec la pointe de la punaise sur le point GPS, et non pas le centre de l'icone. Peut etre avec Illustrator ou photoshop.
Bravo pour ce forum en tout cas, une bonne mine d'infos!
Sylvain
Hors ligne
#7 Wed 28 March 2012 10:16
- icadedt
- Participant assidu
- Lieu: ici et là
- Date d'inscription: 21 Jul 2006
- Messages: 478
Re: Problème à la création de KML avec Mapinfo pour affichage OpenLayers
parfois j'ai plusieurs panneaux sur un meme poteau, j'ai donc des points qui se superposent. Est il possible dans openlayers d'afficher un "éclatement" des points pour pouvoir choisir celui que je veux à la manière de GoogleEarth?
Pourquoi ne pas utiliser carrément le plugin de google earth?
Hors ligne
Pages: 1
- Sujet précédent - Problème à la création de KML avec Mapinfo pour affichage OpenLayers - Sujet suivant
