javascript - 在 Leaflet 中使用控件

问题描述

我正在使用 Leafler 为视频游戏（Arma 3）创建地图。我已经创建了一些标记和图层，但现在我想创建一个控制面板来显示或不显示地图上的图层。
这是我来自 app.js 的代码。有人可以帮我找到正确的程序来添加带有复选框的控制面板。
var map = L.map('map', {
    crs: L.CRS.Simple,
});

//Map coordinates definition
var bounds = [[0,0], [307,307]];
var image = L.imageOverlay('assets/my_map_resized.png', bounds).addTo(map);
map.fitBounds(bounds);

//Icons definitions(DRUGS)
var alcool_icon = L.icon({
    iconUrl :'assets/icons/alcool.png',
    iconSize: [25,40]
});

var artefact_icon = L.icon({
    iconUrl:'assets/icons/artefact.png',
    iconSize: [25,40]
});

var coke_icon = L.icon({
    iconUrl:'assets/icons/coke.png',
    iconSize: [25,40]
});

var dealers_icon = L.icon({
    iconUrl:'assets/icons/dealers.png',
    iconSize: [25,40]
});

var hero_icon = L.icon({
    iconUrl:'assets/icons/hero.png',
    iconSize: [25,40]
});

var meth_icon = L.icon({
    iconUrl:'assets/icons/meth.png',
    iconSize: [25,40]
});

var weed_icon = L.icon({
    iconUrl:'assets/icons/weed.png',
    iconSize: [25,40]
});

//Icons definitions(HOUSES)
var taudis_icon = L.icon({
    iconUrl:'assets/icons/taudis.png',
    iconSize: [25,40]
});

var house_icon = L.icon({
    iconUrl:'assets/icons/maison.png',
    iconSize: [25,40]
});

var storage_icon = L.icon({
    iconUrl:'assets/icons/hangar.png',
    iconSize: [25,40]
});

//Markers definitions (DRUGS)
var dealer1Marker = new L.Marker([ 215.2, 117.5 ], {icon: dealers_icon}).bindPopup("<b>Dealer 1</b><br>Coordonnees : 116.214<br><img src='assets/drugs_img/dealer1.jpg' style='width: 200px'>");
var dealer2Marker = new L.Marker([ 197.9, 201.4 ], {icon: dealers_icon}).bindPopup("<b>Dealer 2</b><br>Coordonnees : 201.198<br><img src='assets/drugs_img/dealer2.jpg' style='width: 200px'>");
var weedMarker = new L.Marker([ 090.4, 204 ], {icon: weed_icon}).bindPopup("<b>Traitement de Weed</b><br>Coordonnees : 203.090<br><img src='assets/drugs_img/weed_traitement.jpg' style='width: 200px'>");
var cokeMarker = new L.Marker([ 68.7, 211 ], {icon: coke_icon}).bindPopup("<b>Traitement de Coke</b><br>Coordonnees : 211.068<br><img src='assets/drugs_img/cocaine_traitement.jpg' style='width: 200px'>");
var heroineMarker = new L.Marker([ 193.4, 126.4 ], {icon: hero_icon}).bindPopup("<b>Traitement d'Heroine</b><br>Coordonnees : 126.193<br><img src='assets/drugs_img/heroine_traitement.jpg' style='width: 200px'>");
var alcoolMarker = new L.Marker([ 172.35, 39.1 ], {icon: alcool_icon}).bindPopup("<b>Traitement d'Alcool</b><br>Coordonnees : 039.172<br><img src='assets/drugs_img/alcool_traitement.jpg' style='width: 200px'>");
var methpurMarker = new L.Marker([ 203, 261 ], {icon: meth_icon}).bindPopup("<b>Traitement de Meth Pur</b><br>Coordonnees : 261.203<br><img src='assets/drugs_img/meth_traitement_pur.jpg' style='width: 200px'>");
var methimpurMarker = new L.Marker([ 096.7, 163.8 ], {icon: meth_icon}).bindPopup("<b>Traitement de Meth Impur</b><br>Coordonnees : 163.096<br><img src='assets/drugs_img/meth_traitement_impur.jpg' style='width: 200px'>");
var artefactMarker = new L.Marker([ 174.8, 098.7 ], {icon:artefact_icon}).bindPopup("<b>Acheteur d'Artefact</b><br>Coordonnees : 098.174<br><img src='assets/drugs_img/artefact_dealer.jpg' style='width: 200px'>");
var champcokeMarker = new L.Marker([ 146.3, 211.4 ], {icon: coke_icon}).bindPopup("<b>Champ de Cocaine</b><br>Coordonnees : 211.146<br><img src='assets/drugs_img/cocaine_recolte.jpg' style='width: 200px'>");
var kitmedMarker = new L.Marker([ 179.5, 67 ], {icon: meth_icon}).bindPopup("<b>Acheteur de Kit Medical</b><br>Coordonnees : 066.179<br><img src='assets/drugs_img/meth_kit.jpg' style='width: 200px'>");

//Markers definitions (HOUSES)
var house5M109134Marker = new L.Marker([ 134, 109 ], {icon: house_icon}).bindPopup("<b>Maison 5M</b><br><b>Position :</b> 109.134 Poliako<br><b>Proprietaire</b> Jack Senderson (Bled'Art)<br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b> Martinez/Tron/Heuss<br><b>Infos :</b> Sort de sa Maserati : WX-564-WF et rentre dans la maison / Deja perquisitionne / confirme proprio<br> <img src='assets/houses_img/house5M109134.jpg' style='width: 200px'>");
var storage109127Marker = new L.Marker([ 127.8, 109.2 ], {icon: storage_icon}).bindPopup("<b>Entrepot</b><br><b>Position :</b> 109.127 Sud Poliako<br><b>Proprietaire</b> John Briz, Steven Smith (Peaky Blinders)<br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b> Martinez<br><b>Infos :</b> Information d'un ancien membre Peaky faisant de la Weed et de l'artefact/ recemment cambrio (18/09/2020)<br> <img src='assets/houses_img/storage109127.jpg' style='width: 200px'>");
var storage125153Marker = new L.Marker([153, 125 ], {icon: storage_icon}).bindPopup("<b>Entrepot</b><br><b>Position :</b> 125.153 Sud Lakka<br><b>Proprietaire</b> Alucard Gloom (Civil)<br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b> Martinez/ Tron/ Bélanger/ Heuss/ Ferathia <br><b>Infos :</b> Trafic d'héroine suite une perquisition : Armes Gang, Trafic d'héroine<br> <img src='assets/houses_img/storage125153.jpg' style='width: 200px'>");
var house35M166160Marker = new L.Marker([160, 166 ], {icon: house_icon}).bindPopup("<b>Maison 3.5M</b><br><b>Position :</b> 166.160 Anthrakia<br><b>Proprietaire</b> Lena Wounder (Civil)<br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b> Martinez<br><b>Infos :</b> Aucune<br> <img src='assets/houses_img/house35M166160.jpg' style='width: 200px'>");
var house5M109133Marker = new L.Marker([133, 109 ], {icon: house_icon}).bindPopup("<b>Maison 5M</b><br><b>Position :</b> 109.133 Poliako<br><b>Proprietaire</b> Inconnu <br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b> Martinez<br><b>Infos :</b> Potentiel maison au Peaky Blinders<br> <img src='assets/houses_img/house5M109133.jpg' style='width: 200px'>");
var house27M097158Marker = new L.Marker([158, 97 ], {icon: house_icon}).bindPopup("<b>Maison 3.7M</b><br><b>Position :</b> 097.158 Agios <br><b>Proprietaire</b>Bernard Thoulisse (Civil)<br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b Martinez/ Biloute/ Bélanger<br><b>Infos :</b> Plantation de Weed/ pas de rideau/déja perquisitionné<br> <img src='assets/houses_img/house27M097158.jpg' style='width: 200px'>");
var house5M187165Marker = new L.Marker([165, 187 ], {icon: house_icon}).bindPopup("<b>Maison 5M</b><br><b>Position :</b> 187.165 Rodopoli<br><b>Proprietaire</b>Mickael Lopito (Civil)<br><b> Date :</b> 13.09.2020<br><b>GND pour infos :</b> Martinez/ Bélanger<br><b>Infos :</b>Stockage de Patate suite à une filature<br> <img src='assets/houses_img/house5M187165.jpg' style='width: 200px'>");



//Layer groups definitions
var dealers = L.layerGroup([dealer1Marker, dealer2Marker]);
var weed = L.layerGroup([weedMarker]);
var coke = L.layerGroup([cokeMarker, champcokeMarker]);
var heroine = L.layerGroup([heroineMarker]);
var alcool = L.layerGroup([alcoolMarker]);
var meth = L.layerGroup([methpurMarker, methimpurMarker, kitmedMarker]);
var artefact = L.layerGroup([artefactMarker]);

//Layer groups definitions for everyone
var jackSenderson = L.layerGroup([house5M109134Marker]);
var johnBriz = L.layerGroup([storage109127Marker]);
var stevenSmith = L.layerGroup([storage109127Marker]);
var alucardGloom = L.layerGroup([storage125153Marker]);
var lenaWounder = L.layerGroup([house35M166160Marker]);
var inconnu = L.layerGroup([house5M109133Marker]);
var bernardThoulisse = L.layerGroup([house27M097158Marker]);
var mickaelLopito = L.layerGroup([house5M187165Marker]);

//Add layers groups to map
dealers.addTo(map);
weed.addTo(map);
coke.addTo(map);
heroine.addTo(map);
alcool.addTo(map);
meth.addTo(map);
artefact.addTo(map);

//Add layers groups to map for everyone
jackSenderson.addTo(map);
johnBriz.addTo(map);
alucardGloom.addTo(map);
lenaWounder.addTo(map);
inconnu.addTo(map);
bernardThoulisse.addTo(map);
mickaelLopito.addTo(map);```

Thank you ! 

Antoine
标签： javascriptleaflet
javascript - 在 Leaflet 中使用控件

问题描述

解决方案

推荐阅读
