JSF - Openstreetmap - Útvonal rajzolás
2022-04-18T08:53:38+02:00
2022-04-18T09:10:16+02:00
2022-08-12T08:30:32+02:00
vazul
Sziasztok!

Csináltam egy xhtml-t, és szeretnék rajta megjelníteni megtett útvonalakat Openstreetmap -en keresztül.

Ehhez csináltam rá egy OpenStreetMapInit -nevű javascript függvényt, ami a BEAN -től megkapja az útvonal koordinátáit (var utvonalak = #{foablakBean.openStreetMapUtvonalak};). Az OpenStreetMapInit -függvényt a BEAN -ben meghívom, ezek után jelenik meg a térképen az útvonal.


Az a helyzet, hogy ha elindul a program tök jól működik is a dolog, megjelenik az útvonal.
Viszont ha mondjuk egy gombnyomásra más koordinátákat töltök be a foablakBean.openStreetMapUtvonalak -ba, azaz szeretném, ha egy másik útvonal jelenne meg a térképen, az új útvonal nem jelenik meg. Az első útvonal marad a térképen.

Kínomban csináltam egy OpenStreetMapInit2 -nevű függvényt is, ami fixen csak néhány karikát rajzol a térképre. Ha ezt a függvényt hívom meg a BEAN -ben, működik.

Ám ha azt csinálom, hogy a BEAN -ben EGYSZERRE egymás után hívom meg az XHTML -ben lévő OpenStreetMapInit és OpenStreetMapInit 2 függvényt az a rajz látszódik a térképen, amit elsőnek hív meg a Bean. Ha az OpenStreetMapInit -kerül elsőnek meghívásra az útvonal, ha a OpenStreetMapInit2, akkor a karikák... Egyszerre a kettő soha.

Akkor ezért nem változik az útvonal sem... Azaz ha a elindul a progi és meghívódik az OpenStreetMapInit -egy útvonallal, az felrajzolja azt a térképre, de aztán hiába hívja meg a BEAN más és más útvonalakkal, azokat már nem rajzolja rá...

Mi a gond? Valahogy törölnöm kellene az OpenStreetMap -et? Vagy valahogy újra inicializálnom kellene, hogy aztán tudjak rá megint írni?

Az OpenStreetMapInit függvény elején map = new OpenLayers.Map("map_element" -van, gondoltam ezzel újra és újra példányosítom a térképet, akkor miért nem tudok rá minden függvény hívásnál más és más útvonalat rajzolni?

Az XHTML -ben csak ennyi a térkép:

<div id='map_element' style='width: 100%; height: 400px;'> </div>
Az XHTML -ben lévő javascript pedig, ami a konkrét útvonal rajzolást végezné:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" > <f:metadata> <f:event type="preRenderView" listener="#{foablakBean.init()}"/> </f:metadata> <f:view contentType="text/html" > <h:head> <f:facet name="first"> <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/> <title>OpenStreetMap</title> <h:outputStylesheet library = "css" name = "style.css" /> <link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/ikon.png" /> </f:facet> <!--OpenStreetMap START --> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> <script defer="defer" type='text/javascript'> //<![CDATA[ function OpenStreetMapInit(){ var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var projectTo = new OpenLayers.Projection("EPSG:900913"); var map; map = new OpenLayers.Map("map_element", { controls:[ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Attribution()], maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), maxResolution: 156543.0399, numZoomLevels: 19, units: 'm', projection: projectTo, displayProjection: epsg4326 }); var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); map.addLayer(layerMapnik); var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap"); map.addLayer(layerCycleMap); //utvonalak = [ [19.2154715,47.3759995, 'Útvonal'] ]; var utvonalak = #{foablakBean.openStreetMapUtvonalak}; var colorList = ["red", "blue", "yellow"]; var layerName = [utvonalak[0][2]]; var styleArray = [new OpenLayers.StyleMap({ pointRadius: 2, fillColor: colorList[0], fillOpacity: 0.5 })]; var vectorLayer = [new OpenLayers.Layer.Vector(layerName[0], { styleMap: styleArray[0] })]; // First element defines first Layer var j = 0; for (var i = 1; i < utvonalak.length; i++) { if (!layerName.includes(utvonalak[2])) { j++; layerName.push(utvonalak[2]); // If new layer name found it is created styleArray.push(new OpenLayers.StyleMap({ pointRadius: 2, fillColor: colorList[j % colorList.length], fillOpacity: 0.5 })); vectorLayer.push(new OpenLayers.Layer.Vector(layerName[j], { styleMap: styleArray[j] })); } } //Loop through the utvonalak array for (var i = 0; i < utvonalak.length; i++) { var lon = utvonalak[0]; var lat = utvonalak[1]; var feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo), { description: "utvonalak number " + i } ); vectorLayer[layerName.indexOf(utvonalak[2])].addFeatures(feature); } for (var i = 0; i < layerName.length; i++) { map.addLayer(vectorLayer); } var lonLatStart = new OpenLayers.LonLat(#{foablakBean.openStreetMapLonStart}, #{foablakBean.openStreetMapLatStart}).transform(epsg4326, projectTo); map.setCenter(lonLatStart, 13); } //]]> </script> <!--OpenStreetMap END --> </h:head>
Előre is köszi....
Mutasd a teljes hozzászólást!
Tedd be a térképet tartalmazó div-et, egy <h:panelGroup> -ba, aminek adsz saját id-t, és saját className-t, majd a gomb-ra, amivel a koordinátákat frissíted, update-eld meg a panel-t. Vagy id alapján, vagy class alapján. Ha megkapja a friss koordinátákat, akkor elvileg már azokkal kell dolgoznia, és azokat kell megjelenítenie a térképnek saját canvas-én.
Lehet, hogy ha a js-t sima onclick-el hívód, akkor azt át kell tenni onSuccess-re, hogy csak akkor update-lődjön a térkép, ha már minden koordinát megkapott, és azokkal dolgozzon.

Egyébként a BootsFaces-snek van saját openStreetMap komponense. (A Primefaces a Google Map-et támogatja saját megoldással.)
Mutasd a teljes hozzászólást!

abcd