个人中心
gpt4 book ai didi

javascript - 使用 Leafletjs 显示 PostGIS 数据

转载 作者：行者123 更新时间：2023-11-29 13:28:01 25 4
gpt4 key购买 nike

我正在使用 PostGIS 学习 GIS，我想尝试一些有趣的事情，所以我从 OSM 下载了形状文件，导入到带有 PostGIS 扩展名的 PostGres 中，现在我想以可视化方式表示来自 PostGIS 的数据。我已经通过查询提取了数据

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

我得到了一堆 GeoJSON 并想将它们展示给用户。不幸的是它没有显示出来。我使用 Yii2 编写提取数据的代码。这是 Controller 代码:

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)]);
}

在视野中

<?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>

有没有遗漏的东西？我是传单库的新手，正在按照他们网站上的教程学习

更新

这是 HTML 输出(剥离 Geojson 以适应 SO)here是完整的来源请注意，我设置了 map 的高度，我可以看到一个带有 (+) 和 (-) 符号的灰色框，但没有显示 map 。

<!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>

最佳答案

您没有设置高度容器。在你的 css 文件中设置:

#map {
    height: 400px;
}

并设置缩放。像那样:

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

关于javascript - 使用 Leafletjs 显示 PostGIS 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29945471/

25 4 0
文章推荐： iphone - UIActivityIndi​​catorView 正确使用
文章推荐： sql - 按位置、客户名称和月份对查询结果进行分组
文章推荐： postgresql - Postgres 重启/复制
文章推荐： postgresql - 使用 Postgres Ver. 在 Unix 上安装 PL/Java。 9.2+
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com