Utilisation de GeoCharts avec l'application GWT pour créer une carte. Comment puis-je dessiner des formes?

Question

Actuellement, j'ai un projet GWT 2.8. Dans ce projet, j'utilise Geocharts pour dessiner des cartes des États-Unis. Le package exact que j'utilise est le suivant. com.googlecode.gwt.charts.client.geochart

Je me demandais si quelqu'un avait un exemple de code qui me permettrait de dessiner des formes similaires à la façon dont cela est fait ici. https://developers.google.com/maps/documentation/javascript/examples/polygon-simple Les bases du code que j'ai sont les suivantes.

GeoChart chart = new GeoChart(); 
DataTable dataTable = DataTable.create(); 
GeoChartOptions options = GeoChartOptions.create(); 

##add some longitude and latitude points to draw out ### 

chart.draw(dataTable, options); 

Un point de départ serait grandement utile.

Answer 1

le GeoChart from the google-visualization library utilise SVG

il est facile de dessiner et ajouter des formes, une fois ready' événement se déclenche de la graphique

cependant, il n'y a pas d'option pour le dessin des formes similaires aux cartes api

ce qui signifie que vous ne pourrez pas définir de coordonnées lat/lng spécifiques pour le placement de la forme.

Voici un extrait de travail qui ajoute un cercle et un triangle au graphique ...

google.charts.load('current', { 
 
    callback: drawRegionsMap, 
 
    packages: ['geochart'] 
 
}); 
 

 
function drawRegionsMap() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Country', 'Popularity'], 
 
    ['Germany', 200], 
 
    ['United States', 300], 
 
    ['Brazil', 400], 
 
    ['Canada', 500], 
 
    ['France', 600], 
 
    ['RU', 700] 
 
    ]); 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.GeoChart(chartDiv); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    var svg = chartDiv.getElementsByTagName('svg')[0]; 
 

 
    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); 
 
    circle.setAttribute('cx', '380'); 
 
    circle.setAttribute('cy', '80'); 
 
    circle.setAttribute('r', '72'); 
 
    circle.setAttribute('stroke', '#000000'); 
 
    circle.setAttribute('stroke-width', '2'); 
 
    circle.setAttribute('fill', 'rgba(0,0,255,0.5)'); 
 
    svg.appendChild(circle); 
 

 
    var poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); 
 
    poly.setAttribute('points', '50,400 210,400 210,50'); 
 
    poly.setAttribute('stroke', '#000000'); 
 
    poly.setAttribute('stroke-width', '2'); 
 
    poly.setAttribute('fill', 'rgba(255,0,0,0.5)'); 
 
    svg.appendChild(poly); 
 
    }); 
 
    chart.draw(data); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>