我创建了一个Leaflet地图，该地图具有一系列可以切换的层（可以使用一系列getJSON调用从数据库中检索数据）。
我还有另一个Leaflet贴图，它们使用相同的数据，并且在蜘蛛标记靠近时使用OMS plugin到蜘蛛标记。
我想在同一张地图上同时使用这两个功能->选择要显示的图层，然后对单击时关闭的所有标记进行搜寻。有谁知道如何做到这一点？定义标记后添加map.addLayer(marker);和oms.addMarker(marker);命令不适用于我可以切换的图层。我得到的错误是TypeError: b.getLatLng is not a function. (In 'b.getLatLng()', 'b.getLatLng' is undefined)
具有图层：
<!DOCTYPE html>
<html>
<head>
<title> Map with Layers</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="oms.min.js"></script> <!-- spiderfy plugin -->
<style>
#map {
height:800px;
}
</style>
<script type = "text/javascript">
function init(){
var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
var map = new L.map('map',{minZoom:3,maxZoom:10}).setView([ -20.91, 142.70], 5);
osmMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © ' + osmLink, maxZoom: 10,}).addTo(map);
attrLink = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
var terrainMap = L.tileLayer( 'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg',{
attribution: attrLink,
maxZoom: 10,
}).addTo(map);
var baseLayers = {
"Open Street Map":osmMap, "Stamen Terrain": terrainMap
};
L.control.layers(baseLayers).addTo(map);
var oms = new OverlappingMarkerSpiderfier(map);
showLayers(map);
function showLayers(map) {
const getData = () => Promise.all([$.getJSON("getData1.php"),$.getJSON("getData2.php")]);
getData()
.then(([data1,data2]) => {
let jend = 2;
let myLayerGroup1;
let myLayerGroup2;
var myIcon = L.icon({
iconUrl: "./images/iconimage.png",
iconSize: [24,24],
iconAnchor: [12,24]
});
for (j = 1; j<= jend; j++){
let data = eval("data"+j);
let markerlist = [];
for (let i = 0; i< data.length; i++) {
let location = new L.LatLng(data[i].siteLatitude, data[i].siteLongitude);
let marker = new L.Marker(location, {
icon: myIcon,
title: 'thetitle' });
let studyTitle = "Paper Title"
let urlLink = "URL";
let content = "<h2>" + studyTitle + "</h2>" + "<p>" + '<a href='+urlLink+'>' + urlLink+ '</a>' + "</p>" + "<p> <b>" + "</b></p>";
marker.bindPopup(content, {
maxWidth: '400'
});
// map.addLayer(marker);
// oms.addMarker(marker);
markerlist.push(marker);
} // end loop through data to extract marker and content
// create the layers and add to the map:
switch(j){
case 1: myLayerGroup1 = L.layerGroup(markerlist);
map.addLayer(myLayerGroup1);
oms.addMarker(myLayerGroup1);
break;
case 2: myLayerGroup2 = L.layerGroup(markerlist);
map.addLayer(myLayerGroup2);
break;
default: alert("Error");
} // end switch
}; // end j loop through all the different datasets
var overlays = { //overlay controls on the map
"layer 1":myLayerGroup1,
"layer 2":myLayerGroup2,
};
L.control.layers(null,overlays).addTo(map); // add control to the map
}); // end of then
} // end of function showLayers
};// end of function init
</script>
</head>
<h1>Page Heading</h1>
<body onload=init()>
<div id = "map"> </div>
</body>
</html>
使用Spiderfy：
<!DOCTYPE html>
<html>
<head>
<title>Spidering Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="oms.min.js"></script> <!-- spiderfy plugin -->
<style>
#map {
height:800px;
}
</style>
<script type = "text/javascript">
function init(){
var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
var map = new L.map('map',{minZoom:3,maxZoom:10}).setView([ -20.91, 142.70], 5);
osmMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © ' + osmLink, maxZoom: 10,}).addTo(map);
attrLink = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
var terrainMap = L.tileLayer( 'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg',{
attribution: attrLink,
maxZoom: 10,
}).addTo(map);
var baseLayers = {
"Open Street Map":osmMap, "Stamen Terrain": terrainMap
};
L.control.layers(baseLayers).addTo(map);
var oms = new OverlappingMarkerSpiderfier(map);
var popup = new L.Popup({
closeButton: false,
offset: new L.Point(0.5, -24)
});
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
oms.addListener('spiderfy', function(markers) {
for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new lightIcon());
map.closePopup();
});
oms.addListener('unspiderfy', function(markers) {
for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new darkIcon());
});
showLayers(map);
function showLayers(map) {
const getData = () => Promise.all([$.getJSON("getMonitoring.php"),$.getJSON("getModelBased.php")]);
getData()
.then(([data1,data2]) => {
let jend = 2;
let myLayerGroup1;
let myLayerGroup2;
for (j = 1; j<= jend; j++){
let data = eval("data"+j);
let markerlist = [];
// define the icon:
var myIcon = L.icon({
iconUrl: "./images/iconImage.png",
iconSize: [24,24],
iconAnchor: [12,24]
});
for (let i = 0; i< data.length; i++) {
let location = new L.LatLng(data[i].siteLatitude, data[i].siteLongitude);
let marker = new L.Marker(location, {
icon: myIcon,
title: 'thetitle' });
// let studyTitle = "Paper Title"
// let urlLink = "URL";
let studyTitle = "Paper Title"
let urlLink = "The URL Link";
let content = "<h2>" + studyTitle + "</h2>" + "<p>" + '<a href='+urlLink+'>' + urlLink+ '</a>' + "</p>" + "<p> <b>" + "</b></p>";
marker.bindPopup(content, {
maxWidth: '400'
});
map.addLayer(marker);
oms.addMarker(marker);
markerlist.push(marker);
}
};
});
}
};
</script>
</head>
<h1>Heading</h1>
<body onload=init()>
<div id = "map"> </div>
</body>
</html>