如何将具有特定类的标记添加到图层或图层组? [英] How to add a marker with a specific class to a layer or layergroup?
问题描述
我有几个带有其名称的css类的标记，例如:markerOne具有.markerone作为css类，依此类推.
是否可以创建一个功能来将这些标记分配给特定的图层或组?像var layerone = $(L.marker).hasClass("markerone"));这样，并在图层中分配具有该类的所有标记?
我想这样做，以便以后可以使用addLayer和removeLayer启用/禁用该层.
I have a couple of markers that have a css class with its names, for example: markerOne has .markerone as css class, and so on.
Its possible to create a function to assign these markers to specific layers or groups? Something like var layerone = $(L.marker).hasClass("markerone")); and assign all markers with that class inside a layer?
I want to do this so later I can toggle that layer on/off with addLayer and removeLayer.
我用来显示标记的功能:
Function that I use to show the markers:
function showResourcesByName(name) {
for (var i = 0; i < markers.resources.length; i++) {
var resName = markers.resources[i].name;
if (resName == name) {
var resIcon = icons.resources[i].icon;
var resSize = icons.resources[i].size;
var resPname = icons.resources[i].pname;
var customIcon = L.icon({
iconUrl: resIcon,
iconSize: resSize, // size of the icon
iconAnchor: [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
popupAnchor: [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
});
for (var j = 0; j < markers.resources[i].coords.length; j++) {
var x = markers.resources[i].coords[j].x;
var y = markers.resources[i].coords[j].y;
marker = L.marker([y, x], {icon: customIcon});
marker.addTo(map).bindPopup(resPname);
$(marker._icon).addClass(name)
}
}
}
}
我提到的类是$(marker._icon).addClass(name)中的(name)部分，该部分从markers.js中获取名称:
The class that I mention is the (name) part in $(marker._icon).addClass(name), which grabs the name from markers.js:
var markers = {
"resources": [
{
"name": "AITokarServer",
"coords": [
{
"x": -1210.0,
"y": -1770.0
},
{
"x": -1230.0,
"y": -1810.0
},
因此，所有名称为AITokarServer的标记都将具有.AITokarServer类，依此类推.
So all markers with the name AITokarServer will have a class .AITokarServer and so on.
推荐答案
您可以通过创建自定义标记类为L.Marker添加一些功能，以使事情变得更容易.挂钩onAdd函数，以便您可以在标记初始化时自动分配一个类名.您可以添加一个函数来检查该类名:
You could add some functionality to L.Marker by creating a custom marker class to make things easier. Hook into the onAdd function so that you can automaticly assign a classname upon marker initialization. And you can add a function to check for that classname:
L.CustomMarker = L.Marker.extend({
// Overwrite onAdd function
onAdd: function (map) {
// Run original onAdd function
L.Marker.prototype.onAdd.call(this, map);
// Check if there's a class set in options
if (this.options.className) {
// Apply className to icon and shadow
L.DomUtil.addClass(this._icon, this.options.className);
L.DomUtil.addClass(this._shadow, this.options.className);
}
// return instance
return this;
},
// Function for checking class
hasClass: function (name) {
// Check if a class is set in options and compare to given one
return this.options.className && this.options.className === name;
}
});
现在，您可以在标记初始化时轻松地应用类名:
Now you easily apply a classname upon initialization of your markers:
var marker = new L.CustomMarker([0, 0], {
'className': 'foobar'
}).addTo(map);
并检查您的标记器上是否设置了某个类别:
And check if a certain class is set on your marker:
if (marker.hasClass('foobar')) {
// YES! Do stuff
}
也就是说，您实际上不需要向标记添加类以将它们分成不同的组.您的数据结构中已经有这些组.考虑以下结构:
That said, you don't actually need to add classes to your markers to split them up into different groups. You already have those groups in your datastructure. Consider the following structure:
var markers = [{
'name': 'Foo',
'coordinates': [{
'lat': -25,
'lng': -25
}, {
'lat': 25,
'lng': -25
}]
}, {
'name': 'Bar',
'coordinates': [{
'lat': -25,
'lng': 25
}, {
'lat': 25,
'lng': 25
}]
}];
要将它们分为不同的组，请首先创建一个对象来存储这些组，然后将其添加到layercontrol中:
To put those into different groups, first create a object to store the groups which you can later add to your layercontrol:
var overlays = {};
现在您可以迭代结构，为每组标记创建图层组并将其添加到其中:
Now you can iterate the structure, create layergroups for each set of markers and add them to it:
// iterate the structure, handle each group
markers.forEach(function (group) {
// check if there's already a group for this name
if (!overlays.hasOwnProperty(group.name)) {
// new group, create layergroup, store in object and add to map
overlays[group.name] = new L.LayerGroup().addTo(map);
}
// iterate the coordinates for this group
group.coordinates.forEach(function (coordinate) {
// create markers for each coordinate and add to the layergroup
new L.Marker([coordinate.lat, coordinate.lng]).addTo(overlays[group.name]);
})
});
现在，您可以将overlays对象添加到layercontrol，以便可以切换它们:
Now you can add the overlays object to the layercontrol so you can toggle them:
new L.Control.Layers(null, overlays).addTo(map);
这是有关Plunker的一个有效示例: http://plnkr.co/edit/t0YiJO8RmEdnIKKXugdm?p =预览
Here's a working example on Plunker: http://plnkr.co/edit/t0YiJO8RmEdnIKKXugdm?p=preview
如果需要，您仍然可以添加类名，方法是使用上面的自定义标记类并更改坐标迭代器，如下所示:
You can still add classnames if you need to by using the custom marker class above and changing the coordinates iterator like this:
group.coordinates.forEach(function (coordinate) {
new L.CustomMarker([coordinate.lat, coordinate.lng], {
'className': group.name
}).addTo(overlays[group.name]);
})
以下是有关Plunker的一个有效示例: http://plnkr.co/edit/cHPSLKDbltxr9jFZotOD?p =预览
Here's a working example on Plunker: http://plnkr.co/edit/cHPSLKDbltxr9jFZotOD?p=preview
这篇关于如何将具有特定类的标记添加到图层或图层组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
