jvectormap: traccia le linee tra i marcatori?

Question

Sto provando a verificare se è possibile tracciare linee tra i marcatori su una mappa usando jvectormap.

Ecco un'idea di quello che sto cercando di realizzare: http://i.imgur.com/p1Zypv3.gif

Qualcuno può darmi un suggerimento se questo è fattibile e se sì, come?

Apprezzare qualsiasi input.

Answer 1

Questo può essere fatto con una combinazione di Jvectormap, metodo convertitore coordinate Jvectormaps latLngToPoint() e un livello SVG sopra Jvectormap. In effetti, l'utilizzo di SVG.js come layer su Jvectormap ti consente di fare praticamente qualsiasi cosa che potresti fare con SVG mentre sostituisci i punti con le coordinate di latitudine-longitudine.

Avrai bisogno di caricare Jvectormap, il file di mappa Jvectormap, svg.js e il plugin svg.path.js (vedi https://svgdotjs.github.io) nell'intestazione della pagina. Dovrai anche creare due div in uno che possa sovrapporsi alle impostazioni assolute CSS.

<div id="mapContainer" style="position:relative"> 
    <div id="map" style="position:absolute;top:0px;left:0px"></div> 
    <div id="svgMapOverlay" style="position:absolute;top:0px;left:0px"></div> 
</div> 

Creare una serie di marcatori con latitudine e longitudine per disegnare le linee da e sulla mappa:

var markerArray = [ 
    {name:'Houston', latLng:[29.761993,-95.369568]}, 
    {name:'New York', latLng:[40.710833,-74.002533]}, 
    {name:'Kansas City', latLng:[39.115145,-94.633484]} 
]; 

quindi impostare il vostro Jvectormap utilizzando i marcatori sopra:

var map = $('#map').vectorMap({ 
    map: 'us_aea_en', 
    zoomMin: 1, 
    zoomMax: 1, 
    markers: markerArray 
}); 

Infine, richiama la tua mappa come un oggetto, crea il tuo livello SVG, converti le coordinate lat-long in punti all'interno del div:

var map = $('#map').vectorMap('get', 'mapObject'); 
var draw = SVG('svgMapOverlay').size(660, 400); 
var coords1 = map.latLngToPoint(markerArray[0].latLng[0],markerArray[0].latLng[1]); 
var coords2 = map.latLngToPoint(markerArray[1].latLng[0],markerArray[1].latLng[1]); 
draw.path().attr({ fill: 'none',stroke: '#c00', 'stroke-width': 2 }).M(coords1.x, coords1.y).L(coords2.x, coords2.y); 

La maggior parte di questo JS deve andare in una chiamata $(function() o $(document).ready(function() per l'avvio.

Si può vedere questo JSFiddle per maggiori dettagli: http://jsfiddle.net/ruzel/V8dyd/

Disclaimer: Non so cosa succede con lo zoom; è spento per questo esempio.

Answer 2

var markerIndex=1; 
 
var markerCoords=[]; 
 
latLng={72,62}; 
 
markersCoords[markerIndex] = latLng; 
 
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]}); 
 
markerIndex += 1;

Answer 3

Così ho cercato la risposta @russellmania. Funziona, tuttavia solo con la versione SVG, che è inclusa nel collegamento jsfiddle. Se ho provato lo stesso codice con la versione attuale di SVG, si blocca su SVG dicendo che la funzione "this.clear (...). Attr" non è definita. Tuttavia, per me, volevo che lo zoom di JVector e la funzionalità di spostamento della mappa continuassero a funzionare. Ma con lo strato SVG sulla mappa, non funziona. Oppure diciamo, ci sono 2 opzioni: 1) disabilita lo spostamento e lo zoom (non lo voglio) 2) abilita lo zoom, lo spostamento, ma poi il livello SWG non ingrandisce e si muove come fa JVector, quindi il percorso viene desincronizzato da la mappa :)

Ho trovato un modo per disegnare linee in JVector usando Markers. Ma questo non è il modo corretto. Quindi sto ancora esaminando la documentazione di jvectormap, se c'è qualcosa come disegnare una linea direttamente nel jvectormap.

Answer 4

Infine, ho provato a implementare la funzionalità di aggiunta di linee a JVectorMap. La soluzione con SVG va bene, ma non funziona con Zoom, Move e Panzoom.Quindi ho aggiunto direttamente a JVectorMap l'opzione per specificare Linee, simile a Regioni e marcatori. Puoi controllare lo stato di Pull Request https://github.com/bjornd/jvectormap/pull/431 dove tutto è incluso. Ora è possibile disegnare line utilizzando

var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];

Ancora, la richiesta di pull deve essere incluso nella nuova versione di jvectormap, la speranza l'autore lo farà presto :) Il codice di lavoro è al mio blog personnal qui: https://sevenhillsaway.com/map/