Question

我正在使用传单，并希望添加MarkerCluster插件。

到目前为止，我有一个有效的代码，可将标记添加到地图并将其添加到图层。

以下代码从数据库中构建标记和图层。

    <?php include("cliente/config.php");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />

<title>::: C24 :::</title>

<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="hsd-flotr2.css" />
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/pushy.css">

<script type="text/javascript" src="leaflet/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />

<script type="text/javascript" src="leaflet/leaflet.markercluster.js"></script>
<link rel="stylesheet" type="text/css" href="leaflet/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="leaflet/MarkerCluster.Default.css" />

<link rel="icon" href="images/favicon.ico" />
<link rel="shortcut icon" href="images/favicon.ico" />

<script type="text/javascript" src="flotr2.min.js"></script>    
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script>

function onClick(e) {
    alert(this.getLatLng());
}

</script>

</head>
<body>

<?php

$con=mysql_connect($server,$user,$pass) or die(mysql_error()); 
mysql_select_db($dbname) or die(mysql_error());


$lat = '-39.55660675652325';
$lon = '-72.92878048494458';

$zoom = 7;

$pr = "";
$abc = "";
$abd = "";
$abe = "";


$k = 1;
$v = 'p';
$t = 't';
$w = '_';

$query_11 = mysql_query("SELECT DISTINCT zona FROM alarm;");
while($info_11 = mysql_fetch_array($query_11)) {

    $i=1;
    $query_1 = mysql_query("SELECT lat, lon FROM alarm WHERE zona = '$info_11[0]' LIMIT 100;");
    While($info_1 = mysql_fetch_array($query_1)) {

        $abc .= "var ";
        $abc .= "$v$k$w$i";
        $abc .= "= L.marker([";
        $abc .= "$info_1[0],$info_1[1]";
        $abc .= "]).on('mouseover', onClick);";

        $i++;
        }

$abd .= "var t".$k." = L.markerClusterGroup([";

for ($x=1; $x<$i; $x++) {
$abd .= "$v$k$w$x,";
}

$abd .= "]);";

$k++;
}

$l=1;
$abe .= "var overlayMaps = {";

$query_22 = mysql_query("SELECT DISTINCT zona FROM alarm;");
while($info_22 = mysql_fetch_array($query_22)) {

    $abe .= "\"$info_22[0]\": t$l,";

$l++;
}
$abe .= "};";

//________________________________________________________________________________________________wie immer ab hier
echo"
<div id='map' style='width: 800px; height: 400px;background:#EEEEEE;'></div>
";

echo"
<script>
function initmap() {
var map;
map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='';
var osm = new L.TileLayer(osmUrl,{minZoom:4,maxZoom:20,attribution:osmAttrib});

var hull = new L.LatLng('-36.826382900000000','-73.042523000000000');

map.setView(hull,12);
map.addLayer(osm);

$abc

$abd

$abe

L.control.layers(overlayMaps, overlayMaps).addTo(map);
}

initmap();
</script>
";

mysql_close($con);

?>      
</body>
</html>

github上的页面指出，要启动集群选项，您必须添加CSS和JS文件，而该文件位于通过ajax调用tha map的主页上。

到目前为止，我发现的未使用angular.leaflet的示例说明了以下用法

var markerClusters = L.markerClusterGroup();

for ( var i = 0; i < markers.length; ++i )
{

  var m = L.marker([markers[i].lat, markers[i].lng])
                  .bindPopup( popup );

  markerClusters.addLayer( m );
}
 map.addLayer(markerClusters);

我该如何适应。感谢您的帮助

Answer 1

除了在小叶文件之后加载Leaflet.markercluster插件CSS和JS文件之外，只需替换以下内容：

L.layerGroup(markersArray)

作者：

L.markerClusterGroup().addLayers(markersArray)

请注意，Layer Groups的初始化（可以直接接收Markers数组作为参数）与MarkerClusterGroup（必须先初始化，然后可以使用其{ {3}}方法。

示例：

function abc_fillMarkers() {
  for (var zoneK = 0; zoneK < 3; zoneK += 1) {
    markersPzoneK_indexI[zoneK] = [];

    for (var markerIndexI = 0; markerIndexI < 20; markerIndexI += 1) {
      markersPzoneK_indexI[zoneK].push(
        L.marker(getRandomLatLng())
      );
    }
  }
}

function abd_fillGroups() {
  for (var zoneK = 0; zoneK < 3; zoneK += 1) {
    groupsTzoneK[zoneK] = L.markerClusterGroup().addLayers(markersPzoneK_indexI[zoneK]);
  }
}

function abe_fillOverlays() {
  for (var zoneK = 0; zoneK < 3; zoneK += 1) {
    overlayMaps['Group ' + zoneK] = groupsTzoneK[zoneK];
  }
}

function initmap() {
  var map;
  map = new L.Map('map');
  var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
  var osm = new L.TileLayer(osmUrl, {
    minZoom: 0,
    maxZoom: 20,
    attribution: osmAttrib
  });

  hull = new L.LatLng('-36.826382900000000', '-73.042523000000000');

  map.setView(hull, 12);
  map.addLayer(osm);

  //$abc
  abc_fillMarkers();

  //$abd
  abd_fillGroups();

  //$abe
  abe_fillOverlays();

  L.control.layers(null, overlayMaps, {
    collapsed: false
  }).addTo(map);

  // Add to map all groups initially.
  Object.values(overlayMaps).forEach(function(overlay) {
    overlay.addTo(map);
  });
}

var hull;
var markersPzoneK_indexI = {};
var groupsTzoneK = {};
var overlayMaps = {};

initmap();

function getRandomLatLng() {
  return [
    hull.lat - 0.05 + 0.1 * Math.random(),
    hull.lng - 0.1 + 0.2 * Math.random()
  ];
}

html,
body,
#map {
  margin: 0;
  height: 100%;
}

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>

<div id="map"></div>

带ajax聚类的传单

1 个答案: