<\/p>\n\n\n\n
Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je\nvous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux\nlibrairies majeures OpenLayers et Leaflet.<\/p>\n\n\n\n
Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de rue concern\u00e9es par l\u2019op\u00e9ration \u00ab\u00a0Des rues sans m\u00e9gots\u00a0\u00bb avec Leaflet<\/a>, j\u2019ai bien entendu cr\u00e9\u00e9 une version avec OpenLayers de cette carte.<\/p>\n\n\n\n Pour cette carte j\u2019utilise le m\u00eame fichier GeoJSON que pour\nla carte avec Leaflet :<\/p>\n\n\n\n Comme pour la carte du m\u00e9tro, la div principale est incluse dans la m\u00eame div que celle de l\u2019encart :<\/p>\n\n\n Puis on initialise la carte :<\/p>\n\n\n Et enfin on rajoute les rues :<\/p>\n\n\n La fonction appel\u00e9e dans la fonction de style de la couche\ndes rues est la suivante (le param\u00e8tre d\u2019entr\u00e9e servira pour le surlignage\nau survol) :<\/p>\n\n\n Pour cette carte, je suis pass\u00e9 par des interactions de\ns\u00e9lection de features<\/em> vectorielles\n(voir la documentation officielle).<\/p>\n\n\n\n L\u2019interaction de survol, est cr\u00e9\u00e9e comme suit :<\/p>\n\n\n Pour intercepter cette interaction, on utilise la m\u00e9thode Les features<\/em> concern\u00e9es par l\u2019\u00e9v\u00e9nement peuvent \u00eatre r\u00e9cup\u00e9r\u00e9es dans l\u2019attribut \u00ab selected \u00bb (qui est un array<\/em> d\u2019objets) de l\u2019objet en entr\u00e9e de la fonction appel\u00e9e via le Les propri\u00e9t\u00e9s sont ensuite r\u00e9cup\u00e9r\u00e9es avec la m\u00e9thode Apr\u00e8s ces explications, voici venu, non pas le temps des\nrires et des chants, mais le temps de vous d\u00e9voiler le code correspondant :<\/p>\n\n\n L\u2019interaction pour le click se cr\u00e9\u00e9 de la m\u00eame mani\u00e8re :<\/p>\n\n\n Pour r\u00e9cup\u00e9rer les coordonn\u00e9es de la bo\u00eete englobante de l\u2019objet cliqu\u00e9, on utilise le chainage Et pour zoomer la carte, on utilise le chainage Pour \u00e9viter que l\u2019objet pr\u00e9c\u00e9demment survol\u00e9 par la souris\nsoit toujours consid\u00e9r\u00e9 comme s\u00e9lectionn\u00e9 (et donc surlign\u00e9) il faut \u00ab vider \u00bb\nl\u2019interaction \u00ab hoverSelect \u00bb.<\/p>\n\n\n\n Tout cela nous donne le code suivant :<\/p>\n\n\n La version compl\u00e8te de cette carte est, comme toujours, disponible sur mon site<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je vous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux librairies majeures OpenLayers et Leaflet. Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de … Continuer la lecture Sources des donn\u00e9es<\/h1>\n\n\n\n
Initialisation de la carte<\/h1>\n\n\n\n
\n<div id="map-wrap">\n\t<div id="map"><\/div>\n\t<div id="info"><\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
Ensuite on initialise l\u2019encart :<\/p>\n\n\n\nvar info = document.getElementById('info');\n\ninfo.innerHTML = '<p>Survoler un \u00e9l\u00e9ment<\/p>';\n<\/pre><\/div>\n\n\n\nvar map = new ol.Map({\n\tlayers: [\n\t\tnew ol.layer.Tile({\n\t\t\tsource: new ol.source.XYZ({\n\t\t\t\turl: 'https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Light_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}',\n\t\t\t\tattributions: 'Tiles \u00a9 <a href="https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Light_Gray_Base\/MapServer">ArcGIS<\/a>'\n\t\t\t})\n\t\t})\n\t],\n\ttarget: 'map',\n\tview: new ol.View({\n\t\tcenter: ol.proj.fromLonLat([2.3488, 48.8502]),\n\t\tzoom: 12,\n\t\tmaxZoom: 16\n\t})\n});\n<\/pre><\/div>\n\n\n\nvar streets = new ol.layer.Vector({\n\tsource: new ol.source.Vector({\n \t\turl: '\/assets\/files\/js\/rues_sans_megots.geojson',\n \t\tformat: new ol.format.GeoJSON()\n\t}),\n\tstyle: function(feature) {\n\t\treturn styleStreet();\n\t}\n});\n<\/pre><\/div>\n\n\n\nfunction styleStreet(selected = false) {\n\treturn new ol.style.Style({\n\t\tstroke: new ol.style.Stroke({\n\t\t\tcolor: '#f7364b',\n\t\t\twidth: selected ? 5 : 3\n\t\t})\n\t});\n}\n<\/pre><\/div>\n\n\n\n\n\n\nAjout de l\u2019interactivit\u00e9<\/h1>\n\n\n\n
\nvar hoverSelect = new ol.interaction.Select({\n\tcondition: ol.events.condition.pointerMove,\n\tlayers: [streets],\n\tstyle: function(feature) {\n\t\treturn styleStreet(true);\n\t}\n});\n\nmap.addInteraction(hoverSelect);\n<\/pre><\/div>\n\n\non()<\/code> (comme avec jQuery) sur l\u2019objet repr\u00e9sentant l\u2019interaction.<\/p>\n\n\n\non()<\/code> sur l\u2019objet d\u2019interaction.<\/p>\n\n\n\nget()<\/code> du premier objet de \u00ab selected \u00bb.<\/p>\n\n\n\n\nhoverSelect.on('select', function(e){\n\tif(e.selected.length > 0) {\n\t\tvar infoTxt = '<p>' + e.selected[0].get('name');\n\t \n\t if(e.selected[0].get('between')) infoTxt += ', ' + e.selected[0].get('between');\n\t \n\t infoTxt += '<\/p>';\n\t \n\t info.innerHTML = infoTxt;\n\t} else {\n\t\tinfo.innerHTML = '<p>Survoler un \u00e9l\u00e9ment<\/p>';\n\t}\n});\n<\/pre><\/div>\n\n\n\nvar clickSelect = new ol.interaction.Select({\n\tcondition: ol.events.condition.click,\n\tlayers: [streets],\n\tstyle: function(feature) {\n\t\treturn styleStreet();\n\t}\n});\n\nmap.addInteraction(clickSelect);\n<\/pre><\/div>\n\n\n getGeometry().getExtent()<\/code>.<\/p>\n\n\n\ngetView().fit()<\/code>.<\/p>\n\n\n\n\nclickSelect.on('select', function(e){\n\tif(e.selected.length > 0) {\n\t\tinfo.innerHTML = '<p>Survoler un \u00e9l\u00e9ment<\/p>';\n \t\n \tmap.getView().fit(e.selected[0].getGeometry().getExtent(), {nearest: true});\n\n \thoverSelect.getFeatures().clear();\n\t}\n});\n<\/pre><\/div>\n\n\n
\n\n\n\n