多个传单地图
Multiple Leaflet maps
我正在开发这个网页，该网页涉及从上到下使用 jQuery 的网页上的多个 Leaflet 地图。 See this lo-fi wireframe for a closer look。我尝试在 index.html 中添加多个 <div> 并在 main.js 中添加多个地图变量（是的，在 CSS 中添加样式），以及
but no matter what I do, it ends up just being one map that does not load the base map. For now, I have included the code that works with only one map See this image of what the code looks like with all the layers on and working. 另请注意坐标已被删除，因为坐标太多了。
这是我的代码：
/*Stylesheet by Will P. Campbell,2021*/
//map to contain '31500' polygon
var map = L.map('mapid').setView([45.5, -89.5], 7);
//map to contain '27500' polygon
var map2 = L.map('mapid2').setView([45.5, -89.5], 7);
//map to contain '24000' polygon
var map3 = L.map('mapid3').setView([45.5, -89.5], 7);
//map to contain '20500' polygon
var map4 = L.map('mapid4').setView([45.5, -89.5], 7);
//map to contain '17000' polygon
var map5 = L.map('mapid5').setView([45.5, -89.5], 7);
//map to contain '14600' polygon
var map6 = L.map('mapid6').setView([45.5, -89.5], 7);
//map to contain '11000' polygon
var map7 = L.map('mapid7').setView([45.5, -89.5], 7);
var baseMap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
/*Glacier 11000*/
var Toe_11000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 11000,
"SHAPE_Leng": 387749.141631,
"Shape_Le_1": 5.06435076694,
"Shape_Area": 0.429078160361,
"filename": "11000.jpg"
}
}]
};
var g11000 = L.geoJSON(Toe_11000, {
style: {
color: "#e41a1c"
}
});
g11000.on({
click: function() {
$("#panel").html(Toe_11000.features[0].properties.Years_Ago + " Years Ago" + info11000 + glacierInfo + selfPlug);
}
});
/*Glacier 14600*/
var Toe_14600 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-90.65116417499996, 47.70293454200004],
[-90.72482365299999, 47.673924999000064],
[-90.79822703099995, 47.63344243800003],
[-90.87151684099996, 47.592913355000064],
[-90.93607653299995, 47.54240954900007],
[-90.98389479799994, 47.50486972300007],
[-91.01266156999998, 47.46605101600005],
[-91.03524057399994, 47.43585163000006],
[-91.09569047499997, 47.40672034700003],
[-91.16068607799997, 47.39608128700007],
[-91.20242634199997, 47.38136616700007],
[-91.24370674999994, 47.34807033200008],
[-91.24727017899994, 47.32089010200008],
[-91.27829107399998, 47.30054916700004],
[-91.35252049299999, 47.24684182500005],
[-91.42454322999998, 47.19454164700005],
[-91.49851758599999, 47.142169952000074],
[-91.58297018999997, 47.09531966900005],
[-91.69593298799998, 47.02941600500003],
[-91.78970295499994, 46.95941544900006],
[-91.82835428899995, 46.930232197000066],
[-91.91162510599997, 46.86744039100006],
[-91.99554737199998, 46.82743409100004],
[-92.06911560299994, 46.79183942000003],
[-92.12271105199994, 46.779428163000034],
[-92.18228311199994, 46.76116312500005],
[-92.25397574199997, 46.73548525600006],
[-92.32346255299996, 46.70837829200008],
[-92.37452539699996, 46.68875637000008],
[-92.41380912499994, 46.68507654200005],
[-92.47155654999995, 46.67669948400004],
[-92.49779041299996, 46.66041357700004],
[-92.53630909799995, 46.640992280000034],
[-92.60352557599998, 46.61519304900003],
[-92.65025475699997, 46.595545755000046],
[-92.66997578199994, 46.57508444400003],
[-92.69410222099998, 46.56023089900003],
[-92.73425967299994, 46.53498854400004],
[-92.79268852199999, 46.503571829000066],
[-92.84256524699998, 46.468051606000074],
[-92.88183268599994, 46.42849094400003],
[-92.92753540999996, 46.394466917000045],
[-92.94989701799994, 46.34959887800005],
[-92.95186608799997, 46.30954130100008],
[-92.92975250899997, 46.28153421700006],
[-92.85925850399997, 46.27331860700008],
[-92.79127616799997, 46.27357100900008],
[-92.71321257399995, 46.27830917600005],
[-92.63952461199995, 46.28860811000004],
[-92.57829646799996, 46.301436514000045],
[-92.50925582199994, 46.32440533500005],
[-92.44221727099995, 46.347289440000054],
[-92.41261793199999, 46.37792243000007],
[-92.37035638299994, 46.40309578500006],
[-92.32010085699994, 46.43555965100006],
[-92.22421472899998, 46.46604055800003],
[-92.16676037899998, 46.47714513900007],
[-92.07164040799995, 46.47747958900004],
[-91.96355058399996, 46.462242262000075],
[-91.88129117799997, 46.47505522800003],
[-91.84860834599993, 46.487018110000065],
[-91.75759648199994, 46.48702458100007],
[-91.67480884399998, 46.485409692000076],
[-91.61092690599997, 46.49347106100004],
[-91.53298945499995, 46.517401738000046],
[-91.46184380399995, 46.56548027200006],
[-91.39439978099995, 46.60108704600003],
[-91.31293960199997, 46.66110276500007],
[-91.18166198599994, 46.731109263000064],
[-91.12163612599994, 46.77552488500004],
[-91.02482937399998, 46.78786178000007],
[-90.98063779999995, 46.797773128000074],
[-90.96927097899999, 46.782631328000036],
[-90.95760682899999, 46.75034730400006],
[-91.00666688699994, 46.706114670000034],
[-91.04472870499995, 46.66958103600007],
[-91.09664029099997, 46.636712301000045],
[-91.13687825499994, 46.57726777900007],
[-91.18839689999999, 46.532931133000034],
[-91.22591702999995, 46.48300696300004],
[-91.22480609399997, 46.433490293000034],
[-91.18738430599996, 46.359591409000075],
[-91.12616009499999, 46.325921202000075],
[-90.99618142799994, 46.285217860000046],
[-90.89141040599998, 46.26322281700004],
[-90.77320977799997, 46.256463342000075],
[-90.59165834999999, 46.22897204100008],
[-90.47359851299996, 46.22571206300006],
[-90.21011180299996, 46.22840493600006],
[-90.07834092799999, 46.21714115300006],
[-89.99052527699996, 46.20002253800004],
[-89.63663278999996, 46.19754044900003],
[-89.30472963899996, 46.19409865700004],
[-89.14564109599996, 46.193020372000035],
[-89.10690236799996, 46.21367948200003],
[-88.97509624199995, 46.21828879600008],
[-88.74396655199996, 46.24455812300005],
[-88.43920812199997, 46.263282384000036],
[-88.18463496799995, 46.27857294900008],
[-88.00977466999996, 46.175646776000065],
[-87.99389010599998, 46.04677587200007],
[-88.03142757799998, 45.90454467200004],
[-88.07824403599994, 45.733876871000064],
[-88.11693049199994, 45.64521481500003],
[-88.15630836499997, 45.53154329200004],
[-88.25459067099996, 45.31159869500004],
[-88.32963412999999, 45.169820886000025],
[-88.40834291299996, 45.06376788400007],
[-88.48581727299995, 44.99336901300006],
[-88.79481685399998, 44.90415892300007],
[-88.88639060299994, 44.84792515000004],
[-88.88261184299995, 44.78357859500005],
[-88.94319230899998, 44.76271860500003],
[-88.97231671099996, 44.62840776200005],
[-89.00318747399996, 44.57866096200007],
[-89.02004076199995, 44.46804576400007],
[-89.04649611099995, 44.37537170000007],
[-89.10740785599995, 44.30082986600007],
[-89.08883401599996, 44.21492877800006],
[-89.02088686299999, 44.117891385000064],
[-88.83475711099999, 43.998228366000035],
[-88.68786675299998, 43.92517043600003],
[-88.62533997199995, 43.84939582800007],
[-88.57299960499995, 43.76656712400006],
[-88.46045322499998, 43.73294585800005],
[-88.39507582999994, 43.78207346700003],
[-88.33422715399996, 43.841949181000075],
[-88.26389529699998, 43.883781630000044],
[-88.26171217099994, 43.95878690500007],
[-88.25436012199998, 44.04085874400005],
[-88.13665456199999, 44.003267237000045],
[-88.04759712699996, 44.00177966800004],
[-87.97724235799996, 44.03271403600007],
[-87.91264601899996, 44.03869804900006],
[-87.85100620199995, 43.96251794800003],
[-87.84031258699997, 43.84797273600003],
[-87.77934997599993, 43.76104507100007],
[-87.69970123099995, 43.65226923900008],
[-87.59451333699997, 43.57506238600007],
[-87.41895871099996, 43.54264457600004],
[-87.19847646199997, 43.53030423300004],
[-87.05535483399996, 43.54457143500008],
[-86.90199607799997, 43.56552812900003],
[-86.73246550099998, 43.61082922300005],
[-86.59688342599998, 43.66046715300007],
[-86.47311237099996, 43.75675903800004],
[-86.41494068499998, 43.905016706000026],
[-86.38487126299998, 43.99339418100004],
[-86.33611529199999, 44.14190469500005],
[-86.23094835399996, 44.23494796600005],
[-86.07578505799995, 44.32618325100003],
[-85.99546925899995, 44.409139733000075],
[-85.93780993299998, 44.44997420000004],
[-85.94529025199995, 44.48596854700003],
[-85.88575853799995, 44.551719080000055],
[-85.82903334099996, 44.64612264200008],
[-85.67299230199995, 44.65817042300006],
[-85.49721378799995, 44.66565292100006],
[-85.37988257999996, 44.69311130300008],
[-85.26070073999995, 44.74180747400004],
[-85.20102381099997, 44.79647274300004],
[-85.12731019099994, 44.896951657000045],
[-85.07522771199996, 44.976883351000026],
[-84.82164997499996, 47.579520486000035],
[-90.67336377599997, 47.71242423500007],
[-90.65116417499996, 47.70293454200004]
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 14600,
"SHAPE_Leng": 2202706.20984,
"Shape_Le_1": 25.0028099606,
"Shape_Area": 17.1995913109,
"filename": "14600.jpg"
}
}]
}
var g14600 = L.geoJSON(Toe_14600, {
style: {
color: "blue"
}
});
g14600.on({
click: function() {
$("#panel").html(Toe_14600.features[0].properties.Years_Ago + " Years Ago" + info14600 + glacierInfo + selfPlug);
}
});
/*Glacier 17000*/
var Toe_17000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 2,
"Years_Ago": 17000,
"SHAPE_Leng": 2261336.18634,
"Shape_Le_1": 24.4337768448,
"Shape_Area": 21.6098467975,
"filename": "17000.jpg"
}
}]
}
var g17000 = L.geoJSON(Toe_17000, {
style: {
color: "#4daf4a"
}
});
g17000.on({
click: function() {
$("#panel").html(Toe_17000.features[0].properties.Years_Ago + " Years Ago" + info17000 + glacierInfo + selfPlug);
}
});
/*Glacier 20500*/
var Toe_20500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
//redacted
]
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 20500,
"SHAPE_Leng": 3087165.91023,
"Shape_Le_1": 33.5221258781,
"Shape_Area": 32.9568211425,
"filename": "20500.jpg"
}
}]
}
var g20500 = L.geoJSON(Toe_20500, {
style: {
color: "#ffff33"
}
});
g20500.on({
click: function() {
$("#panel").html(Toe_20500.features[0].properties.Years_Ago + " Years Ago" + info20500 + glacierInfo + selfPlug);
}
});
/*Glacier 24000*/
var Toe_24000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 24000,
"SHAPE_Leng": 3034250.36063,
"Shape_Le_1": 33.0014683974,
"Shape_Area": 35.7394984299,
"filename": "24000.jpg"
}
}]
}
var g24000 = L.geoJSON(Toe_24000, {
style: {
color: "#984ea3"
}
}
);
g24000.on({
click: function() {
$("#panel").html(Toe_24000.features[0].properties.Years_Ago + " Years Ago" + info24000 + glacierInfo + selfPlug);
}
});
/*Glacier 27500*/
var Toe_27500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 27500,
"SHAPE_Leng": 2984589.95454,
"Shape_Le_1": 32.3931138132,
"Shape_Area": 34.4347324387,
"filename": "27500.jpg"
}
}]
}
var g27500 = L.geoJSON(Toe_27500, {
style: {
color: "#ff7f00"
}
}
);
g27500.on({
click: function() {
$("#panel").html(Toe_27500.features[0].properties.Years_Ago + " Years Ago" + info27500 + glacierInfo + selfPlug);
}
});
/*Glacier 31500*/
var Toe_31500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 2,
"Years_Ago": 31500,
"SHAPE_Leng": 1478866.18087,
"Shape_Le_1": 15.9994195189,
"Shape_Area": 9.83976333148,
"filename": "31500.jpg"
}
}]
}
var g31500 = L.geoJSON(Toe_31500, {
style: {
color: "#a65628"
}
});
g31500.on({
click: function() {
$("#panel").html(Toe_31500.features[0].properties.Years_Ago + " Years Ago" + info31500 + glacierInfo + selfPlug)
}
});
var overlayMaps = {
"31500 years ago": g31500,
"27500 years ago": g27500,
"24000 years ago": g24000,
"20500 years ago": g20500,
"17000 years ago": g17000,
"14600 years ago": g14600,
"11000 years ago": g11000
};
var glacierLayers = L.control.layers(null, overlayMaps).addTo(map);
/*Stylesheet by Will P. Campbell,2021*/
body {
background-color: #ECECEC;
}
#mapid,
#mapid2,
#mapid3,
#mapid4,
#mapid5,
#mapid6,
#mapid7 {
position: fixed;
height: 650px;
width: 60%;
border: 5px solid black;
display: inline-block;
}
h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#panel {
position: fixed;
right: 0;
border: 5px outset black;
background-color: lightblue;
text-align: center;
width: 25%;
height: auto;
padding: 20px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WISCONSIN GLACIER TIME LAPSE</title>
<!--put your external stylesheet links here-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/leaflet/leaflet.css">
<!--[if IE<9]>
<link rel="stylesheet" href="css/style.ie.css">
<![endif]-->
</head>
<body>
<h1>WISCONSIN GLACIER TIME LAPSE</h1>
<!-- map 1 -->
<div id="mapid"></div>
<!-- map 2 -->
<div id="mapid2"></div>
<!-- map 3 -->
<div id="mapid3"></div>
<!-- map 4 -->
<div id="mapid4"></div>
<!-- map 5 -->
<div id="mapid5"></div>
<!-- map 6 -->
<div id="mapid6"></div>
<!-- map 7 -->
<div id="mapid7"></div>
<div id="panel"><b>Glacier Information Panel</b><br>
<p>Use the checkbox and click on each glacier to learn more about them!</p>
</div>
<!--put your initial page content here-->
<!--you can also use this space for internal scripts or stylesheets;
place these within <script> or <style> tags-->
<!--put your external script links here-->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/geojson.js"></script>
</body>
</html>
如果您需要更多说明，请告诉我。我也是 Whosebug 的新手，所以如果这是一个不正确或重复的问题，我深表歉意。
谢谢！
创建一个对象 mapsData，其属性与您的 DIV 元素 data-map 值匹配。
循环您的元素 DIVs ELS_map.forEach(initMap); 并将您预先存储的数据应用到 mapsData[=17 中的每个地图 ID =]
const L_tiles = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}';
const L_options = {
attribution: 'Tiles: <a href="http://stamen.com">SD</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> © <a href="https://www.openstreetmap.org/copyright">OSM</a> contrib.',
minZoom: 0,
maxZoom: 18,
ext: 'png'
};
// ALL YOUR DATA GOES HERE!
// Name your properties the same as data-map="" value in HTML
const mapsData = {
glacier_1: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier one Lorem...",
// add title, shapes etc here
},
glacier_2: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier 2 Ipsum...",
// add title, shapes etc here
},
};
const initMap = (EL) => {
const id = EL.dataset.map; // rerturns i.e: "glacier_1"
const data = mapsData[id];
const map = L.map(EL).setView(data.center, data.zoom);
L.tileLayer(L_tiles, L_options).addTo(map);
};
const ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
[data-map] {
height: 300px;
border: 5px solid black;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
我正在开发这个网页，该网页涉及从上到下使用 jQuery 的网页上的多个 Leaflet 地图。 See this lo-fi wireframe for a closer look。我尝试在 index.html 中添加多个 <div> 并在 main.js 中添加多个地图变量（是的，在 CSS 中添加样式），以及
这是我的代码：
/*Stylesheet by Will P. Campbell,2021*/
//map to contain '31500' polygon
var map = L.map('mapid').setView([45.5, -89.5], 7);
//map to contain '27500' polygon
var map2 = L.map('mapid2').setView([45.5, -89.5], 7);
//map to contain '24000' polygon
var map3 = L.map('mapid3').setView([45.5, -89.5], 7);
//map to contain '20500' polygon
var map4 = L.map('mapid4').setView([45.5, -89.5], 7);
//map to contain '17000' polygon
var map5 = L.map('mapid5').setView([45.5, -89.5], 7);
//map to contain '14600' polygon
var map6 = L.map('mapid6').setView([45.5, -89.5], 7);
//map to contain '11000' polygon
var map7 = L.map('mapid7').setView([45.5, -89.5], 7);
var baseMap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
/*Glacier 11000*/
var Toe_11000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 11000,
"SHAPE_Leng": 387749.141631,
"Shape_Le_1": 5.06435076694,
"Shape_Area": 0.429078160361,
"filename": "11000.jpg"
}
}]
};
var g11000 = L.geoJSON(Toe_11000, {
style: {
color: "#e41a1c"
}
});
g11000.on({
click: function() {
$("#panel").html(Toe_11000.features[0].properties.Years_Ago + " Years Ago" + info11000 + glacierInfo + selfPlug);
}
});
/*Glacier 14600*/
var Toe_14600 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-90.65116417499996, 47.70293454200004],
[-90.72482365299999, 47.673924999000064],
[-90.79822703099995, 47.63344243800003],
[-90.87151684099996, 47.592913355000064],
[-90.93607653299995, 47.54240954900007],
[-90.98389479799994, 47.50486972300007],
[-91.01266156999998, 47.46605101600005],
[-91.03524057399994, 47.43585163000006],
[-91.09569047499997, 47.40672034700003],
[-91.16068607799997, 47.39608128700007],
[-91.20242634199997, 47.38136616700007],
[-91.24370674999994, 47.34807033200008],
[-91.24727017899994, 47.32089010200008],
[-91.27829107399998, 47.30054916700004],
[-91.35252049299999, 47.24684182500005],
[-91.42454322999998, 47.19454164700005],
[-91.49851758599999, 47.142169952000074],
[-91.58297018999997, 47.09531966900005],
[-91.69593298799998, 47.02941600500003],
[-91.78970295499994, 46.95941544900006],
[-91.82835428899995, 46.930232197000066],
[-91.91162510599997, 46.86744039100006],
[-91.99554737199998, 46.82743409100004],
[-92.06911560299994, 46.79183942000003],
[-92.12271105199994, 46.779428163000034],
[-92.18228311199994, 46.76116312500005],
[-92.25397574199997, 46.73548525600006],
[-92.32346255299996, 46.70837829200008],
[-92.37452539699996, 46.68875637000008],
[-92.41380912499994, 46.68507654200005],
[-92.47155654999995, 46.67669948400004],
[-92.49779041299996, 46.66041357700004],
[-92.53630909799995, 46.640992280000034],
[-92.60352557599998, 46.61519304900003],
[-92.65025475699997, 46.595545755000046],
[-92.66997578199994, 46.57508444400003],
[-92.69410222099998, 46.56023089900003],
[-92.73425967299994, 46.53498854400004],
[-92.79268852199999, 46.503571829000066],
[-92.84256524699998, 46.468051606000074],
[-92.88183268599994, 46.42849094400003],
[-92.92753540999996, 46.394466917000045],
[-92.94989701799994, 46.34959887800005],
[-92.95186608799997, 46.30954130100008],
[-92.92975250899997, 46.28153421700006],
[-92.85925850399997, 46.27331860700008],
[-92.79127616799997, 46.27357100900008],
[-92.71321257399995, 46.27830917600005],
[-92.63952461199995, 46.28860811000004],
[-92.57829646799996, 46.301436514000045],
[-92.50925582199994, 46.32440533500005],
[-92.44221727099995, 46.347289440000054],
[-92.41261793199999, 46.37792243000007],
[-92.37035638299994, 46.40309578500006],
[-92.32010085699994, 46.43555965100006],
[-92.22421472899998, 46.46604055800003],
[-92.16676037899998, 46.47714513900007],
[-92.07164040799995, 46.47747958900004],
[-91.96355058399996, 46.462242262000075],
[-91.88129117799997, 46.47505522800003],
[-91.84860834599993, 46.487018110000065],
[-91.75759648199994, 46.48702458100007],
[-91.67480884399998, 46.485409692000076],
[-91.61092690599997, 46.49347106100004],
[-91.53298945499995, 46.517401738000046],
[-91.46184380399995, 46.56548027200006],
[-91.39439978099995, 46.60108704600003],
[-91.31293960199997, 46.66110276500007],
[-91.18166198599994, 46.731109263000064],
[-91.12163612599994, 46.77552488500004],
[-91.02482937399998, 46.78786178000007],
[-90.98063779999995, 46.797773128000074],
[-90.96927097899999, 46.782631328000036],
[-90.95760682899999, 46.75034730400006],
[-91.00666688699994, 46.706114670000034],
[-91.04472870499995, 46.66958103600007],
[-91.09664029099997, 46.636712301000045],
[-91.13687825499994, 46.57726777900007],
[-91.18839689999999, 46.532931133000034],
[-91.22591702999995, 46.48300696300004],
[-91.22480609399997, 46.433490293000034],
[-91.18738430599996, 46.359591409000075],
[-91.12616009499999, 46.325921202000075],
[-90.99618142799994, 46.285217860000046],
[-90.89141040599998, 46.26322281700004],
[-90.77320977799997, 46.256463342000075],
[-90.59165834999999, 46.22897204100008],
[-90.47359851299996, 46.22571206300006],
[-90.21011180299996, 46.22840493600006],
[-90.07834092799999, 46.21714115300006],
[-89.99052527699996, 46.20002253800004],
[-89.63663278999996, 46.19754044900003],
[-89.30472963899996, 46.19409865700004],
[-89.14564109599996, 46.193020372000035],
[-89.10690236799996, 46.21367948200003],
[-88.97509624199995, 46.21828879600008],
[-88.74396655199996, 46.24455812300005],
[-88.43920812199997, 46.263282384000036],
[-88.18463496799995, 46.27857294900008],
[-88.00977466999996, 46.175646776000065],
[-87.99389010599998, 46.04677587200007],
[-88.03142757799998, 45.90454467200004],
[-88.07824403599994, 45.733876871000064],
[-88.11693049199994, 45.64521481500003],
[-88.15630836499997, 45.53154329200004],
[-88.25459067099996, 45.31159869500004],
[-88.32963412999999, 45.169820886000025],
[-88.40834291299996, 45.06376788400007],
[-88.48581727299995, 44.99336901300006],
[-88.79481685399998, 44.90415892300007],
[-88.88639060299994, 44.84792515000004],
[-88.88261184299995, 44.78357859500005],
[-88.94319230899998, 44.76271860500003],
[-88.97231671099996, 44.62840776200005],
[-89.00318747399996, 44.57866096200007],
[-89.02004076199995, 44.46804576400007],
[-89.04649611099995, 44.37537170000007],
[-89.10740785599995, 44.30082986600007],
[-89.08883401599996, 44.21492877800006],
[-89.02088686299999, 44.117891385000064],
[-88.83475711099999, 43.998228366000035],
[-88.68786675299998, 43.92517043600003],
[-88.62533997199995, 43.84939582800007],
[-88.57299960499995, 43.76656712400006],
[-88.46045322499998, 43.73294585800005],
[-88.39507582999994, 43.78207346700003],
[-88.33422715399996, 43.841949181000075],
[-88.26389529699998, 43.883781630000044],
[-88.26171217099994, 43.95878690500007],
[-88.25436012199998, 44.04085874400005],
[-88.13665456199999, 44.003267237000045],
[-88.04759712699996, 44.00177966800004],
[-87.97724235799996, 44.03271403600007],
[-87.91264601899996, 44.03869804900006],
[-87.85100620199995, 43.96251794800003],
[-87.84031258699997, 43.84797273600003],
[-87.77934997599993, 43.76104507100007],
[-87.69970123099995, 43.65226923900008],
[-87.59451333699997, 43.57506238600007],
[-87.41895871099996, 43.54264457600004],
[-87.19847646199997, 43.53030423300004],
[-87.05535483399996, 43.54457143500008],
[-86.90199607799997, 43.56552812900003],
[-86.73246550099998, 43.61082922300005],
[-86.59688342599998, 43.66046715300007],
[-86.47311237099996, 43.75675903800004],
[-86.41494068499998, 43.905016706000026],
[-86.38487126299998, 43.99339418100004],
[-86.33611529199999, 44.14190469500005],
[-86.23094835399996, 44.23494796600005],
[-86.07578505799995, 44.32618325100003],
[-85.99546925899995, 44.409139733000075],
[-85.93780993299998, 44.44997420000004],
[-85.94529025199995, 44.48596854700003],
[-85.88575853799995, 44.551719080000055],
[-85.82903334099996, 44.64612264200008],
[-85.67299230199995, 44.65817042300006],
[-85.49721378799995, 44.66565292100006],
[-85.37988257999996, 44.69311130300008],
[-85.26070073999995, 44.74180747400004],
[-85.20102381099997, 44.79647274300004],
[-85.12731019099994, 44.896951657000045],
[-85.07522771199996, 44.976883351000026],
[-84.82164997499996, 47.579520486000035],
[-90.67336377599997, 47.71242423500007],
[-90.65116417499996, 47.70293454200004]
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 14600,
"SHAPE_Leng": 2202706.20984,
"Shape_Le_1": 25.0028099606,
"Shape_Area": 17.1995913109,
"filename": "14600.jpg"
}
}]
}
var g14600 = L.geoJSON(Toe_14600, {
style: {
color: "blue"
}
});
g14600.on({
click: function() {
$("#panel").html(Toe_14600.features[0].properties.Years_Ago + " Years Ago" + info14600 + glacierInfo + selfPlug);
}
});
/*Glacier 17000*/
var Toe_17000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 2,
"Years_Ago": 17000,
"SHAPE_Leng": 2261336.18634,
"Shape_Le_1": 24.4337768448,
"Shape_Area": 21.6098467975,
"filename": "17000.jpg"
}
}]
}
var g17000 = L.geoJSON(Toe_17000, {
style: {
color: "#4daf4a"
}
});
g17000.on({
click: function() {
$("#panel").html(Toe_17000.features[0].properties.Years_Ago + " Years Ago" + info17000 + glacierInfo + selfPlug);
}
});
/*Glacier 20500*/
var Toe_20500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
//redacted
]
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 20500,
"SHAPE_Leng": 3087165.91023,
"Shape_Le_1": 33.5221258781,
"Shape_Area": 32.9568211425,
"filename": "20500.jpg"
}
}]
}
var g20500 = L.geoJSON(Toe_20500, {
style: {
color: "#ffff33"
}
});
g20500.on({
click: function() {
$("#panel").html(Toe_20500.features[0].properties.Years_Ago + " Years Ago" + info20500 + glacierInfo + selfPlug);
}
});
/*Glacier 24000*/
var Toe_24000 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 24000,
"SHAPE_Leng": 3034250.36063,
"Shape_Le_1": 33.0014683974,
"Shape_Area": 35.7394984299,
"filename": "24000.jpg"
}
}]
}
var g24000 = L.geoJSON(Toe_24000, {
style: {
color: "#984ea3"
}
}
);
g24000.on({
click: function() {
$("#panel").html(Toe_24000.features[0].properties.Years_Ago + " Years Ago" + info24000 + glacierInfo + selfPlug);
}
});
/*Glacier 27500*/
var Toe_27500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 1,
"Years_Ago": 27500,
"SHAPE_Leng": 2984589.95454,
"Shape_Le_1": 32.3931138132,
"Shape_Area": 34.4347324387,
"filename": "27500.jpg"
}
}]
}
var g27500 = L.geoJSON(Toe_27500, {
style: {
color: "#ff7f00"
}
}
);
g27500.on({
click: function() {
$("#panel").html(Toe_27500.features[0].properties.Years_Ago + " Years Ago" + info27500 + glacierInfo + selfPlug);
}
});
/*Glacier 31500*/
var Toe_31500 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
//redacted
]
]
},
"properties": {
"OBJECTID_1": 1,
"OBJECTID": 2,
"Years_Ago": 31500,
"SHAPE_Leng": 1478866.18087,
"Shape_Le_1": 15.9994195189,
"Shape_Area": 9.83976333148,
"filename": "31500.jpg"
}
}]
}
var g31500 = L.geoJSON(Toe_31500, {
style: {
color: "#a65628"
}
});
g31500.on({
click: function() {
$("#panel").html(Toe_31500.features[0].properties.Years_Ago + " Years Ago" + info31500 + glacierInfo + selfPlug)
}
});
var overlayMaps = {
"31500 years ago": g31500,
"27500 years ago": g27500,
"24000 years ago": g24000,
"20500 years ago": g20500,
"17000 years ago": g17000,
"14600 years ago": g14600,
"11000 years ago": g11000
};
var glacierLayers = L.control.layers(null, overlayMaps).addTo(map);
/*Stylesheet by Will P. Campbell,2021*/
body {
background-color: #ECECEC;
}
#mapid,
#mapid2,
#mapid3,
#mapid4,
#mapid5,
#mapid6,
#mapid7 {
position: fixed;
height: 650px;
width: 60%;
border: 5px solid black;
display: inline-block;
}
h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#panel {
position: fixed;
right: 0;
border: 5px outset black;
background-color: lightblue;
text-align: center;
width: 25%;
height: auto;
padding: 20px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WISCONSIN GLACIER TIME LAPSE</title>
<!--put your external stylesheet links here-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/leaflet/leaflet.css">
<!--[if IE<9]>
<link rel="stylesheet" href="css/style.ie.css">
<![endif]-->
</head>
<body>
<h1>WISCONSIN GLACIER TIME LAPSE</h1>
<!-- map 1 -->
<div id="mapid"></div>
<!-- map 2 -->
<div id="mapid2"></div>
<!-- map 3 -->
<div id="mapid3"></div>
<!-- map 4 -->
<div id="mapid4"></div>
<!-- map 5 -->
<div id="mapid5"></div>
<!-- map 6 -->
<div id="mapid6"></div>
<!-- map 7 -->
<div id="mapid7"></div>
<div id="panel"><b>Glacier Information Panel</b><br>
<p>Use the checkbox and click on each glacier to learn more about them!</p>
</div>
<!--put your initial page content here-->
<!--you can also use this space for internal scripts or stylesheets;
place these within <script> or <style> tags-->
<!--put your external script links here-->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/geojson.js"></script>
</body>
</html>
如果您需要更多说明，请告诉我。我也是 Whosebug 的新手，所以如果这是一个不正确或重复的问题，我深表歉意。
谢谢！
创建一个对象 mapsData，其属性与您的 DIV 元素 data-map 值匹配。
循环您的元素 DIVs ELS_map.forEach(initMap); 并将您预先存储的数据应用到 mapsData[=17 中的每个地图 ID =]
const L_tiles = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}';
const L_options = {
attribution: 'Tiles: <a href="http://stamen.com">SD</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> © <a href="https://www.openstreetmap.org/copyright">OSM</a> contrib.',
minZoom: 0,
maxZoom: 18,
ext: 'png'
};
// ALL YOUR DATA GOES HERE!
// Name your properties the same as data-map="" value in HTML
const mapsData = {
glacier_1: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier one Lorem...",
// add title, shapes etc here
},
glacier_2: {
center: [45.5, -89.5],
zoom: 7,
description: "Glacier 2 Ipsum...",
// add title, shapes etc here
},
};
const initMap = (EL) => {
const id = EL.dataset.map; // rerturns i.e: "glacier_1"
const data = mapsData[id];
const map = L.map(EL).setView(data.center, data.zoom);
L.tileLayer(L_tiles, L_options).addTo(map);
};
const ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
[data-map] {
height: 300px;
border: 5px solid black;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>