Question

我想在地图中实现群集。

我从Mapbox Cluster Example找到了简单群集的示例，但

My code is here，其中marker ==＆gt; {marker-symbol}来自工作室。

但它不起作用。是否有可能实现集群的输出？

Answer 1

通过以下代码解决

<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | <a href="index.php">Log Out</a></div>
<ul class="topnav" id="myTopnav">
<li><a href="Admin_Index.php">Home</a></li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li><a href="#">Update</a></li>
<li><a href="#">Delete</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onClick="myFunction()">☰</a>
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1"><a href="Admin_New.php" style="color:black">New</a> >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" ><a href="Admin_New_Campus.php">Add</a></button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>

<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>

<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";

//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
echo "<tr>";
echo "<td>" . $row['Campus_ID'] . "</td>";
$Campus_ID = $row['Campus_ID'];
$Temp = $row['Campus_ID'];
$Edit = $row['Campus_ID'];
echo "<td>" . $row['Campus_Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><button id='$Edit'>Edit</button></td>";
echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
echo "</tr>";
}
?> 
</table>

</div> 
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>


<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">&times;</span>
<form method = "post">
<div id="Modal_Content">
  Campus ID:<br>
  <input type="text" name="Campus_ID_2" required /><br><br>
  Campus Name:<br>
  <input type="text" name="Campus_Name_2" required /><br><br>
  Location:<br>
  <input type="text" name="Location_2" required /><br><br>
  <input type='text' id = "hidden" name="Temp" value = "<?php echo $Temp; ?>">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
    </div>
  </div>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += " responsive";
} else {
    x.className = "topnav";
}
}

var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>

Answer 2

我认为解决方案是：
1.您计算儿童标记的所有中心边界，并将它们存储为集群的标记
2.您必须控制缩放操作，
如果大于15 ，那么您只显示孩子的标记
否则，如果小于15 那么您只显示群集的标记

如何在mapbox-gl中自定义集群图标？

2 个答案: