Django PolygonField: ¿cómo mostrar en el mapa?

Question

Pregunta para principiantes.

Tengo un modelo GeoDjango con un MultiPolygonField. Cómo puedo recuperar el valor de este campo y mostrarlo como un polígono en un mapa?

class county(models.Model):
    cd = models.CharField(max_length=10)
    geom = models.MultiPolygonField(srid=27700)
    objects = models.GeoManager()

def lsoa(request, code):
    county = get_object_or_404(county.objects, cd=code)
    return render_to_response('county.html', { 'county': county }, context_instance = RequestContext(request))

Sé que GeoJson está involucrado en algún lugar a lo largo de la línea, pero estoy luchando con para sacarlo de Django, y con la forma de mostrarlo.

Answer 1

Hay varias maneras de hacer esto. Una de ellas es simplemente poner el geojson del objeto en una variable javascript y luego renderizar la geometría del geojson en tu mapa. Por ejemplo, en la cabecera de county.html puedes poner algo como

var countyJson = {{county.geom.geojson|safe}};

También es posible que desee transformar la geometría en epsg:4326 antes de introducirla en la plantilla para obtener la lat/lng estándar que se utiliza habitualmente en la mayoría de los marcos. Puedes hacer esto en tu vista:

county.geom.transform(4326)

Si sigues atascado, infórmate sobre qué marco cartográfico del lado del cliente (por ejemplo, Google Maps, OpenLayers, etc.) estás utilizando, ya que la sintaxis para mostrar el polígono variará.

Answer 2

Por lo tanto, dependiendo del tamaño de sus geometrías, es posible que no desee obtener todo el polígono como parte de la solicitud inicial. (Los tiempos de carga se volverían terribles)

Así que crea una vista a la que puedas llegar con ajax:

def get_location_polygons(request):
    response_data = {'data':None,}
    location = get_object_or_404(County, cd=request.GET['code'])

    # Build the polygons        
    response_data['data'] = {
        'polygons' : location.geom.geojson,
        'title' : location.cd
    }

    return HttpResponse(json.dumps(response_data), mimetype="application/json")

Luego llama a algún JS para analizar/mostrar el polígono:

function fetch_polygons(code)
{       
    $.ajax({
        url : '/get-location-polygons/', // Whatever URL You decide for that AJAX request
        data : {'code': code},
        dataType : 'json',
        type : 'GET',
        success: function(data)
        {
                poly = JSON.parse(data.data['polygons'])
                var paths = coord_to_paths(poly.coordinates);
                polygon = new google.maps.Polygon({ 
                    paths : paths, 
                    strokeColor : "#CCC", 
                    strokeOpacity : .5, 
                    strokeWeight : 1, 
                    fillColor : "#CCC", 
                    fillOpacity : .5
                });

                polygon.setVisible(true)
                polygon.setMap(map); // Your map reference
                polygon.infoWindow = new google.maps.InfoWindow({
                    content: '<strong>' + data.data.title + '</strong>',
                }); 
        }
    });     
}

function coord_to_paths(coords)
{
    var paths = [];
    for (var i = 0; i < coords.length; i++)
    { 
        for (var j = 0; j < coords[i].length; j++)
        { 
            var path = []; 
            for (var k = 0; k < coords[i][j].length; k++)
            {
                path.push(ll); 
            } 
            paths.push(path); 
        } 
    }

    return paths;       
}

coord_to_paths es bastante importante para hacer que los objetos multipoligonales se comporten bien en la V2 de la api de gmaps.