Displaying PostGIS Data with Leafletjs

问题

I'm learning GIS with PostGIS and I wanted to try something funny so I downloaded shape files from OSM, imported in PostGres with PostGIS extension and now I want to represent data from PostGIS visually. I have Pulled data with Query

SELECT ST_AsGeoJSON(geom) FROM "dar-es-salaam_tanzania.land_coast;

I got bunch of GeoJSON and wanted to show them to user. Unfortunately it does not show it. I use Yii2 to write codes that pulls the data. Here is the controller code:

public function actionIndex()
{
    $cmd = Yii::$app->db->createCommand('SELECT ST_AsGeoJSON(geom) FROM "dar-es-salaam_tanzania.land_coast";');
    $gjsons = [];
    foreach($cmd->queryAll() as $row)
    {
        $gjsons[] = json_decode($row['st_asgeojson']);
    }
    return $this->render('index', ['geojson'=>json_encode($gjsons)]);
}

and in view

<?php
/* @var $this yii\web\View */
$this->title = 'Map Application';

$this->registerJs("
    var map = L.map('map').setView([6.8000, 39.2833], 13);
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href=\http://openstreetmap.org\">OpenStreetMap</a> contributors, ' +
            '<a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, ' +
            'Imagery © <a href=\"http://mapbox.com\">Mapbox</a>',
        id: 'examples.map-20v6611k'
    }).addTo(map);
    var geojsonList = $geojson;
    L.geoJson(geojsonList).addTo(map);


"); 
?>
 <div id="map">
 </div>

Is there something that am missing? I'm new to leaflet library and am following their tutorials on their site

UPDATE

Here is the HTML Output (stripped Geojson to fit SO) here is full source Note that I set Height of the map and I can see a grey box with (+) and (-) signs on it but no map is shown.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Map Application</title>
    <link href="/tech/maps-app/web/assets/7edc4543/css/bootstrap.css" rel="stylesheet">
    <link href="/tech/maps-app/web/css/site.css" rel="stylesheet">
    <link href="/tech/maps-app/web/css/map.css" rel="stylesheet">
    <link href="/tech/maps-app/web/leafletjs/leaflet.css" rel="stylesheet"></head>
<body>

    <div class="wrap">
        <div id="map">
        </div> 
    </div>

</script><script src="/tech/maps-app/web/assets/c29e8e0a/jquery.js"></script>
<script src="/tech/maps-app/web/assets/f3e1524/yii.js"></script>
<script src="/tech/maps-app/web/leafletjs/leaflet.js"></script>
<script src="/tech/maps-app/web/assets/7edc4543/js/bootstrap.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {

        var map = L.map('map').setView([6.8000, 39.2833], 13);
        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href=\http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-20v6611k'
        }).addTo(map);
        var geojsonList = [{"type":"MultiPolygon","coordinates":[[[[39.094989013528,-7.2022471828125],[38.638288027056,-7.2022471828125],[38.638288027056,-6.638130390625],[39.094989013528,-6.638130390625],[39.094989013528,-7.2022471828125]]]]}];
        L.geoJson(geojsonList).addTo(map);



    });
</script>
</body>
</html>

回答1:

You didn't set height container. Set in your css file:

#map {
    height: 400px;
}

And set zoom. Like that:

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {zoom: 10, ...

来源：https://stackoverflow.com/questions/29945471/displaying-postgis-data-with-leafletjs

标签

javascript

postgresql

yii2

leaflet

PostGIS