使用 Leafletjs 显示 PostGIS 数据
Displaying PostGIS Data with Leafletjs
我正在使用 PostGIS 学习 GIS,我想尝试一些有趣的事情,所以我从 OSM 下载了形状文件,导入到带有 PostGIS 扩展名的 PostGres 中,现在我想以可视化方式表示来自 PostGIS 的数据。我已使用查询
提取数据
SELECT ST_AsGeoJSON(geom) FROM "dar-es-salaam_tanzania.land_coast;
我得到了一堆 GeoJSON 并想将它们展示给用户。不幸的是它没有显示出来。我使用 Yii2 编写提取数据的代码。这是控制器代码:
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 © <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 是完整源代码
注意我设置了地图的高度,我可以看到一个带有 (+) 和 (-) 标志的灰色框,但没有显示地图。
<!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 © <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, ...
我正在使用 PostGIS 学习 GIS,我想尝试一些有趣的事情,所以我从 OSM 下载了形状文件,导入到带有 PostGIS 扩展名的 PostGres 中,现在我想以可视化方式表示来自 PostGIS 的数据。我已使用查询
提取数据SELECT ST_AsGeoJSON(geom) FROM "dar-es-salaam_tanzania.land_coast;
我得到了一堆 GeoJSON 并想将它们展示给用户。不幸的是它没有显示出来。我使用 Yii2 编写提取数据的代码。这是控制器代码:
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 © <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 是完整源代码 注意我设置了地图的高度,我可以看到一个带有 (+) 和 (-) 标志的灰色框,但没有显示地图。
<!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 © <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, ...