传单中的叠加图和标记
问题描述 投票：0回答：1
我正在使用Leaflet在地图上显示两组标记。我们称它们为“行程1”和“行程2”。标记信息（纬度，经度，描述等）存储在两个单独的geojson文件中。
我想用两个L.layerGroup分别显示每个旅程，每个旅程一个。
下面的代码是我写的页面：到目前为止，我已经拥有this。
问题是所有标记都已显示在地图上[[之前选择每个行程（右上角-参见所附图像）。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<div id="map" class="embed-container"></div>
</center>
<script>
var viaggio1 = L.layerGroup([
<?php
$url = 'docs/guardini.geojson'; // path to your JSON file
$dati = file_get_contents($url); // put the contents of the file into a variable
$result = json_decode($dati, true); // decode the JSON feed
$data = $result['features'];
foreach($data as $key => $row) {
$numero = $row['id'];
$nome = $row['name'];
$lat = $row['lat'];
$lon = $row['lon'];
$text = $row['text'];
$pic = $row['pic'];
$link = $row['link'];
?>
L.marker(['<?=$lat;?>', '<?=$lon;?>']),
<?php
}
?>
]);
</script>
<script>
var viaggio2 = L.layerGroup([
<?php
$url2 = 'docs/guardini2.geojson'; // path to your JSON file
$dati2 = file_get_contents($url2); // put the contents of the file into a variable
$result2 = json_decode($dati2, true); // decode the JSON feed
$data2 = $result2['features'];
foreach($data2 as $key2 => $row2) {
$numero2 = $row2['id'];
$nome2 = $row2['name'];
$lat2 = $row2['lat'];
$lon2 = $row2['lon'];
$text2 = $row2['text'];
$pic2 = $row2['pic'];
$link2 = $row2['link'];
?>
L.marker(['<?=$lat2;?>', '<?=$lon2;?>']),
<?php
}
?>
]);
</script>
<script>
var overlayMaps = {
"viaggio 1": viaggio1,
"viaggio 2": viaggio2
};
var map = L.map('map').setView([48.3585, 10.86135], 6);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 19,
minZoom: 4
}).addTo(map);
L.control.scale({imperial: false}).addTo(map);
var pol = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom: 4,
maxZoom: 19
}).addTo(map);
var sat = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles © Esri — Source: Esri, IGN, IGP, UPR-EGP, and the GIS User Community',
minZoom: 4,
maxZoom: 19
});
var arte = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}',
{
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 4,
maxZoom: 19,
ext: 'png'
});
var baseMaps = {
"politica": pol,
"satellitare": sat,
"artistica": arte
};
//L.control.layers(baseMaps).addTo(map);
L.control.layers(baseMaps, overlayMaps).addTo(map);
var stile = {
"color": "#ff3385",
"weight": 4,
"opacity": 0.65
};
</script>
<?php
$url = 'docs/guardini.geojson'; // path to your JSON file
$dati = file_get_contents($url); // put the contents of the file into a variable
$result = json_decode($dati, true); // decode the JSON feed
$data = $result['features'];
foreach($data as $key => $row) {
$numero = $row['id'];
$nome = $row['name'];
$lat = $row['lat'];
$lon = $row['lon'];
$text = $row['text'];
$pic = $row['pic'];
$link = $row['link'];
?>
<div id="sidebar<?=$numero;?>" align="left"></div>
<script>
var sidebar<?=$numero;?> = L.control.sidebar('sidebar<?=$numero;?>', {
closeButton: true,
position: 'left'
});
sidebar<?=$numero;?>.setContent('<br>luogo nr. <?=$numero;?><br><br><b><?=$nome;?></b><br><br><?=$text;?><br><br><img src="<?=$pic;?>"><br><br><a href="<?=$link;?>" target="_blank"><?=$link;?></a><br>');
map.addControl(sidebar<?=$numero;?>);
setTimeout(function () {
sidebar<?=$numero;?>.hide();
}, 700);
var marker<?=$numero;?> = L.marker(['<?=$lat;?>', '<?=$lon;?>']).addTo(map).on('click', function () {
sidebar<?=$numero;?>.toggle();
});
</script>
<?php
}
?>
<?php
$url2 = 'docs/guardini2.geojson'; // path to your JSON file
$dati2 = file_get_contents($url2); // put the contents of the file into a variable
$result2 = json_decode($dati2, true); // decode the JSON feed
$data2 = $result2['features'];
foreach($data2 as $key2 => $row2) {
$numero2 = $row2['id'];
$nome2 = $row2['name'];
$lat2 = $row2['lat'];
$lon2 = $row2['lon'];
$text2 = $row2['text'];
$pic2 = $row2['pic'];
$link2 = $row2['link'];
?>
<div id="sidebar<?=$numero2;?>" align="left"></div>
<script>
var sidebar<?=$numero2;?> = L.control.sidebar('sidebar<?=$numero2;?>', {
closeButton: true,
position: 'left'
});
sidebar<?=$numero2;?>.setContent('<br>luogo nr. <?=$numero2;?><br><br><b><?=$nome2;?></b><br><br><?=$text2;?><br><br><img src="<?=$pic2;?>"><br><br><a href="<?=$link2;?>" target="_blank"><?=$link2;?></a><br>');
map.addControl(sidebar<?=$numero2;?>);
setTimeout(function () {
sidebar<?=$numero2;?>.hide();
}, 700);
var markerr<?=$numero2;?> = L.marker(['<?=$lat2;?>', '<?=$lon2;?>']).addTo(map).on('click', function () {
sidebar<?=$numero2;?>.toggle();
});
</script>
<?php
}
?>
</div>
</div>
</body>
</html>
1个回答
0
投票
投票
L.marker(['<?=$lat2;?>', '<?=$lon2;?>']).addTo(map)
而且我想您要做的是将标记添加到layerGroups：
L.marker(['<?=$lat2;?>', '<?=$lon2;?>']).addTo(viaggio2)
最新问题
- 无法让角度应用程序缩小vendor.js大小
- 使用 vs code 调试时如何将文件传递到我的程序中
- 向 Docusaurus.io 添加 JS 代码片段（完整故事、混合面板等）
- 在 Windows 操作系统上运行 Helm 版本的命令
- SQL 连接子查询
- 在不同端口上运行 PostgreSQL docker 镜像
- 夏季笔记中的字体标签问题
- Alert + Data FCM 消息并不总是在 iOS 上触发 FirebaseMessaging.onMessage
- 为什么 GCC __builtin_prefetch 不能提高性能？
- Excel 中直方图的“格式轴”下缺少“边界”选项
- react-native-google-mobile-ads：compileReleaseKotlin
- Flutter 集成 HMS 失败：com.huawei.agconnectclouddb.objecttypes Package Not Found
- 更改 .gitconfig 的默认位置
- 使用 graph api facebook 发布视频故事
- 使用“查找”数组和“替换”数组替换字符串中的整个音符
- 正则表达式-前后非贪婪？
- 如何将包含图像的自定义对象列表传递给Web api
- 如何在 JavaScript (ES6) 类上执行自定义事件？
- 为什么Java不给出任何关于向下转型的警告？
- sjlj vs dwarf vs seh 有什么区别？
© www.soinside.com 2019 - 2024. All rights reserved.