php - 修复 Leaflet 在生成的地图上不包括图片
问题描述
我正在使用传单创建一张带有图片的地图。图片是从 .tif 文件中的 gda2tiles.py 生成的。图片目前生成成功,打开生成的链接即可查看。我遇到的问题是正在创建的地图不包括图片。有一个选择框,可以选择是否显示图片,它具有正确的图片信息,但没有添加实际图片。
没有错误/警告消息。
生成.php
<?php
require_once("SetFilePath.php");
require_once("CommonFunctions.php");
require_once("SetDBConnection.php");
$pageID = $_GET["pageid"];
$groups = $_REQUEST["groups"];
$projectID = $_GET["project"];
$pageTitle = $_GET["name"];
$center = $_GET["center"];
$zoom = $_GET["zoom"];
$minZoom = $_GET["minZoom"];
$maxZoom = $_GET["maxZoom"];
$con = SetDBConnection();
if(mysqli_connect_errno())
{
echo "Failed to connect to database server: ".mysqli_connect_error();
}
else
{
$deleteSQL = "delete from visualization_project where id = $pageID";
mysqli_query($con,$deleteSQL);
$sql = "select imagery_product.*, flight.Date as Date, product_type.Type as producttype ".
"from imagery_product, flight, product_type ".
"where flight.Project = $projectID and imagery_product.Flight = flight.ID ".
"and imagery_product.Type = product_type.ID and imagery_product.Status = 'Finished' ".
"order by Filename";
$folderPath = SetTempFolderLocalPath().FormatFileName($pageTitle);
if(!file_exists($folderPath)){
if (!mkdir($folderPath, 0777, true)) {
die('Failed to create folders...');
}
}
$pagepath = $folderPath."/index.html";
$viewPath = str_replace("/var/www/html/wordpress/","http://test.org/",$pagepath);
$addSQL = "insert into visualization_project (Name, Project, Path) ".
"values ('$pageTitle', $projectID, '$viewPath')";
mysqli_query($con,$addSQL);
$vProjectID = $con->insert_id;
$result = mysqli_query($con,$sql);
$productList = array();
while($row = mysqli_fetch_assoc($result)) {
$productList[] = $row;
}
$zIndex = 50;
$layerText = "";
$overLayerText = "";
$firstLayer = true;
foreach ($groups as $group) {
$idList = preg_split("@;@", $group["IDs"], NULL, PREG_SPLIT_NO_EMPTY);
if (count($idList) > 0){
$addSQL = "insert into visualization_group (Name, Type, Project) ".
"values ('".$group["GroupName"]."', '". $group["Type"] ."',$vProjectID)";
mysqli_query($con,$addSQL);
$vGroupID = $con->insert_id;
$groupText = "{\n".
"\tgroup: '".$group["GroupName"]."',\n".
"\tlayers: [\n";
foreach ($idList as $id){
foreach ($productList as $product){
if($product["ID"] == $id){
$addSQL = "insert into visualization_layer (Layer, GroupID) ".
"values ($id, $vGroupID)";
mysqli_query($con,$addSQL);
$boundaryText = "";
if ($product["Boundary"] != ""){
$bounds = explode(";", $product["Boundary"]);
$boundaryText = ", bounds: L.latLngBounds([";
foreach ($bounds as $bound){
$point = "L.latLng(".$bound."),";
$boundaryText .= $point;
}
$boundaryText = rtrim($boundaryText,",")."])";
}
if ($product["producttype"] == "V") {
$base_json_name = str_ireplace(".geojson","",$product["FileName"]);
$layerName = "layer_".$base_json_name;
$paneName = "pane_".$base_json_name;
$layer1 = "map.createPane('".$paneName."'); \n";
$layer2 = "map.getPane('".$paneName."').style.zIndex = ".$zIndex."; \n";
$layer3 = "map.getPane('".$paneName."').style.pointerEvents = 'none'; \n";
$layer4 = "var ".$layerName." = new L.GeoJSON.AJAX('".$product["UploadFolder"]."/".$product["FileName"]."', {pane: '".$paneName."'}); \n";
$layer = $layer1.$layer2.$layer3.$layer4;
} else {
$layerName = "layer_".str_ireplace(".tif","",$product["FileName"]);
$layer = "var ".$layerName." = L.tileLayer('".$product["TMSPath"].
"', {tms: true, zIndex: ".$zIndex.$boundaryText."}); \n";
}
$layerText .= $layer;
if ($firstLayer){
$activeText = "active: 'true',\n";
$firstLayer = false;
} else {
$activeText = "";
}
$groupText .= "\t\t{\n".
"\t\t\tname: '".str_replace("-","/",$product["Date"])."',\n".
$activeText.
"\t\t\tlayer: ".$layerName."\n".
"\t\t},\n";
$zIndex++;
}
}
}
$groupText .= "\t]\n".
"},\n";
$overLayerText.= $groupText;
}
}
$templatePath = getcwd()."/page_template.html";
$pageContent = file_get_contents($templatePath);
$pageContent = str_replace("#PAGE-TITLE#",$pageTitle, $pageContent);
$pageContent = str_replace("#PROJECT-CENTER#",$center, $pageContent);
$pageContent = str_replace("#DEFAULT-ZOOM#",$zoom, $pageContent);
$pageContent = str_replace("#MIN-ZOOM#",$minZoom, $pageContent);
$pageContent = str_replace("#MAX-ZOOM#",$maxZoom, $pageContent);
$pageContent = str_replace("#LAYERS#",$layerText, $pageContent);
$pageContent = str_replace("#OVER-LAYERS#",$overLayerText, $pageContent);
echo $pageContent;
$file = fopen($pagepath, "w") or die("Unable to open file!");
fwrite($file, $pageContent);
fclose($file);
echo $viewPath;
}
?>
文件生成
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test4bigfile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/css/leaflet.css" />
<link rel="stylesheet" href="/css/leaflet-panel-layers.css" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<br />
<div id="map"></div>
<script src="/js/leaflet.js"></script>
<script src="/js/leaflet-panel-layers.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/leaflet-ajax/dist/leaflet.ajax.js"></script>
<script src="/js/legend.js"></script>
<link rel="stylesheet" href="/css/legend.css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74689450-1', 'auto');
ga('send', 'pageview');
</script>
<script>
var map = L.map('map', {
center: L.latLng([27.7823,-97.5606]),
zoom: 19,
minZoom: 17,
maxZoom: 25,
attributionControl: false
});
var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
zIndex: 0
});
var mapbox = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Imagery from <a href="https://mapbox.com/about/maps/">MapBox</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
id: 'mapbox.satellite',
accessToken: 'pk.eyJ1IjoiaGFtZG9yaSIsImEiOiJjaWZmZzBwbjI4ZGdqc21seDFhOHA5dGcxIn0.4An46DNTDt97W992MRRWoQ',
maxNativeZoom: 19,
zIndex: 0
});
// Layers
var layer_bigfgiletest4 = L.tileLayer('http://test.org/uas_data/uploads/products/test4/Inspire_2/MS/11-10-2020/tesflight4/RGB_Ortho/bigfgiletest4/Display/{z}/{x}/{y}.png', {tms: true, zIndex: 50, bounds: L.latLngBounds([L.latLng(30.534394444444,-96.447652777778),L.latLng(30.534305555556,-96.443116666667),L.latLng(30.530427777778,-96.443216666667),L.latLng(30.530516666667,-96.447755555556),L.latLng(30.534394444444,-96.447652777778)])});
map.addLayer(mapbox);
var baseLayers = [
{
name: "Open Street Map",
layer: osm_map
},
{
name: "Satellie Map",
layer: mapbox
},
];
var overLayers = [
{
group: 'test4',
layers: [
{
name: '11/10/2020',
active: 'true',
layer: layer_bigfgiletest4
},
]
},
];
var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {collapsibleGroups: true});
map.addControl(panelLayers);
</script>
</body>
</html>
解决方案
鉴于您的自定义平铺层的边界,看起来您正在尝试可视化覆盖很小区域的高分辨率图片:
var layer_bigfgiletest4 = L.tileLayer('<url>/{z}/{x}/{y}.png', {
bounds: L.latLngBounds([
L.latLng(30.534394444444, -96.447652777778),
L.latLng(30.534305555556, -96.443116666667),
L.latLng(30.530427777778, -96.443216666667),
L.latLng(30.530516666667, -96.447755555556),
L.latLng(30.534394444444, -96.447652777778)
])
});
但是由于您的初始地图视图位置已经偏离并且已经高度放大,因此即使平移了相当多的时间,您也可能无法看到它。
var map = L.map('map', {
center: L.latLng([27.7823,-97.5606]), // way off layer bounds
zoom: 19, // highly zoomed in
minZoom: 17,
maxZoom: 25
});
添加图层后,您可以重新调整地图位置:
map.on("layeradd", function (event) {
if (event.target === layer_bigfgiletest4) {
map.fitBounds(/* same bounds */);
}
});
推荐阅读
- android - 如何在 Android Studio 中创建迷你音乐播放器(Activity 或 Fragment 等)
- android - Unity ar.core.depth 通过捆绑在设备上显示不受支持,但适用于 apk
- python - 物体检测实时视频桌面
- wordpress - Lightsail WordPress + AWS for WordPress 插件 + CloudFront 导致 CSS+图像无法正确加载 (ERR_TOO_MANY_REDIRECTS)
- azure - 无法查询可用的提供程序包
- python - python中sympy中微分的数值
- django - Django 设置的 Amazon S3 存储桶配置问题。
AccessDenied
- nginx - 为 Nginx 执行这种重写和代理传递的正确方法是什么?
- c - 在不更改新创建的数组的值时,我是否遇到了需求分页?
- sqlalchemy - 在 fastapi sqlalchemy 会话中,列表追加不起作用