这是整个HTML文档:
<!DOCTYPE html>
<html>
<head>
<title>Top 5 Importers of Tungsten</title>
<!--Imports stylesheet from Leaflet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<!-- Import jQuery, a common JavaScript library providing hundreds of functions -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
@font-face {
font-family: Planewalker;
src: url('https://dl.dropboxusercontent.com/s/3hn6zi8ez2vf4d7/Planewalker.ttf');
}
a:link{text-decoration: none;color:#0000FF;}
a:visited{text-decoration:none;color:#0000FF;}
a:hover{color:#990000;text-decoration:none;}
#map {
width: 1200px;
height: 600px;
border: black solid 2px;
display: block;
margin-left: auto;
margin-right: auto;
}
#map2 {
width: 1000px;
height: 550px;
border: black solid 2px;
display: block;
margin-left: auto;
margin-right: auto;
}
#map3 {
width: 1000px;
height: 550px;
border: black solid 2px;
display: block;
margin-right: auto;
margin-left: auto;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
#header{
width:450px;
border-radius:15px;
background-image: url(https://dl.dropboxusercontent.com/s/j1ii4yz5qftrks7/greyscale-natural-grunge-textures-6.jpg);
margin: auto;
margin-bottom: 5px;
text-align: center;
border: black solid 2px;
font-size: 40px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 12px;
padding-right: 12px;
}
body{
font-family: "Planewalker", "Lucida Sans Unicode","Arial",sans-serif;
background-image: url(https://dl.dropboxusercontent.com/s/2m8803ulxv2mcfc/footer_lodyas.png);
font-size: 20px;
}
#footer{
text-align: right;
font-size: 15px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="header"><span style="color:#fbf400;">T</span><span style="color:#faf612;">o</span><span style="color:#f9f824;">p</span><span style="color:#f8fa36;"> </span><span style="color:#f8fb48;">5</span><span style="color:#f7fd5a;"> </span><span style="color:#f6ff6c;">T</span><span style="color:#f8ff85;">u</span><span style="color:#f9ff9d;">n</span><span style="color:#fbffb6;">g</span><span style="color:#fcffce;">s</span><span style="color:#feffe7;">t</span><span style="color:#ffffff;">e</span><span style="color:#fdffe2;">n</span><span style="color:#fbffc4;"> </span><span style="color:#faffa7;">I</span><span style="color:#f8ff89;">m</span><span style="color:#f6ff6c;">p</span><span style="color:#f7fd5a;">o</span><span style="color:#f8fb48;">r</span><span style="color:#f9f936;">t</span><span style="color:#f9f824;">e</span><span style="color:#faf612;">r</span><span style="color:#fbf400;">s</span></div>
<!--DIV FOR IMPORT LINE MAP ("map")-->
<div id="map" style="position: relative; width: 1200px; height: 600px;"></div>
<br>
<!--DIV FOR CANADA MINES MAP-->
<div id="map2" style="position: relative; width: 1000px; height: 550px;"><img src="https://dl.dropboxusercontent.com/s/a95n5ecg1a7j62i/canada_mine_map2.png" height="550" width="1000"></div>
<br>
<!--DIV FOR CHINA MINES MAP-->
<div id="map3" style="position: relative; width: 1000px; height: 550px;"><img src="https://dl.dropboxusercontent.com/s/p2vf6q01ck0xt8r/china_province_output_map3.png" height="550" width="1000"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<!-- Imports a ColorBrewer library, containing many pre-designed color schemes -->
<script src="colorbrewer.js"></script>
<!--GEOJSONS FOR IMPORT LINE MAP-->
<script src="CHN_crossF.geojson"></script>
<script src="DEU_crossF.geojson"></script>
<script src="FRA_crossF.geojson"></script>
<script src="JPN_crossF.geojson"></script>
<script src="US_crossF.geojson"></script>
<!--IMPORT LINE MAP-->
<script>
var southWest = new L.LatLng(80, -900),
northEast = new L.LatLng(-80, 900),
bounds = new L.LatLngBounds(southWest, northEast);
//can add "maxBounds: bounds" to stop the map at a certian point; add into L.map in the {}
var map = L.map('map',{
worldCopyJump:true,
continuousWorld:false,
noWrap:false,
minZoom:3,
inertia:false,
maxBounds:bounds
}).setView([35.460669951495305, -21.796875], 3); //Starting map location
//Sets the basemap
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
//WEIGHT & COLOR FOR CHINA
function getStyle1(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 20;}
else if (feature.properties.Value > 10000000) {weight = 18;}
else if (feature.properties.Value > 5000000) {weight = 16;}
else if (feature.properties.Value > 1000000) {weight = 14;}
else if (feature.properties.Value > 500000) {weight = 12;}
else if (feature.properties.Value > 100000) {weight = 10;}
else if (feature.properties.Value > 1000) {weight = 8;}
else if (feature.properties.Value > 1) {weight = 6;};
return {
color: 'red',
weight: weight
}
};
var CHNimports = L.geoJson(CHN, {
style: getStyle1,
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to China: " + feature.properties.Value);
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
//WEIGHT AND COLOR FOR GERMANY
function getStyle2(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 20;}
else if (feature.properties.Value > 10000000) {weight = 18;}
else if (feature.properties.Value > 5000000) {weight = 16;}
else if (feature.properties.Value > 1000000) {weight = 14;}
else if (feature.properties.Value > 500000) {weight = 12;}
else if (feature.properties.Value > 100000) {weight = 10;}
else if (feature.properties.Value > 1000) {weight = 8;}
else if (feature.properties.Value > 1) {weight = 6;};
return {
color: '#00FF00',
weight: weight
}
};
var DEUimports = L.geoJson(DEU, {
style: getStyle2,
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to Germany: " + feature.properties.Value);
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
//WEIGHT AND COLOR FOR FRANCE
function getStyle3(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 20;}
else if (feature.properties.Value > 10000000) {weight = 18;}
else if (feature.properties.Value > 5000000) {weight = 16;}
else if (feature.properties.Value > 1000000) {weight = 14;}
else if (feature.properties.Value > 500000) {weight = 12;}
else if (feature.properties.Value > 100000) {weight = 10;}
else if (feature.properties.Value > 1000) {weight = 8;}
else if (feature.properties.Value > 1) {weight = 6;};
return {
color: 'white',
weight: weight
}
};
var FRAimports = L.geoJson(FRA, {
style: getStyle3,
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to France: " + feature.properties.Value);
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
//WEIGHT AND COLOR FOR JAPAN
function getStyle4(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 20;}
else if (feature.properties.Value > 10000000) {weight = 18;}
else if (feature.properties.Value > 5000000) {weight = 16;}
else if (feature.properties.Value > 1000000) {weight = 14;}
else if (feature.properties.Value > 500000) {weight = 12;}
else if (feature.properties.Value > 100000) {weight = 10;}
else if (feature.properties.Value > 1000) {weight = 8;}
else if (feature.properties.Value > 1) {weight = 6;};
return {
color: 'yellow',
weight: weight
}
};
var JPNimports = L.geoJson(JPN, {
style: getStyle4,
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to Japan: " + feature.properties.Value);
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
//WEIGHT AND COLOR FOR US
function getStyle5(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 20;}
else if (feature.properties.Value > 10000000) {weight = 18;}
else if (feature.properties.Value > 5000000) {weight = 16;}
else if (feature.properties.Value > 1000000) {weight = 14;}
else if (feature.properties.Value > 500000) {weight = 12;}
else if (feature.properties.Value > 100000) {weight = 10;}
else if (feature.properties.Value > 1000) {weight = 8;}
else if (feature.properties.Value > 1) {weight = 6;};
return {
color: '#0000FF',
weight: weight
}
};
var USimports = L.geoJson(US, {
style: getStyle5,
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to US: " + feature.properties.Value);
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
//ICONS FOR COUNTRIES~~~~~~~~~~~~~~~~:
//NORTH AMERICA POINTS
var CANicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/North%20America%20-%20Mac/Canada.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([56.130366,-106.346771],{icon:CANicon}).addTo(map)
.bindPopup("<b>Canada</b>");
L.marker([56.130366,253.653229],{icon:CANicon}).addTo(map)
.bindPopup("<b>Canada</b>");
var USicon = L.icon({
iconUrl: 'http://static.wix.com/media/93cbc2_eaca32a202866ed8dd83758cc48a0385.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([37.09024,-95.712891],{icon:USicon}).addTo(map)
.bindPopup("<b>United States</b>");
L.marker([37.09024,264.287109],{icon:USicon}).addTo(map)
.bindPopup("<b>United States</b>");
var MEXicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/North%20America%20-%20Mac/Mexico.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([23.634501,-102.552784],{icon:MEXicon}).addTo(map)
.bindPopup("<b>Mexico</b>");
L.marker([23.634501,257.447216],{icon:MEXicon}).addTo(map)
.bindPopup("<b>Mexico</b>");
//SOUTH AMERICA POINTS
var BOLicon = L.icon({
iconUrl: 'http://www.argenpapa.com.ar/images/paises/2.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-16.290154,-63.588653],{icon:BOLicon}).addTo(map)
.bindPopup("<b>Bolivia</b>");
L.marker([-16.290154,296.411347],{icon:BOLicon}).addTo(map)
.bindPopup("<b>Bolivia</b>");
var BRAicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/br.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-14.235004,-51.92528],{icon:BRAicon}).addTo(map)
.bindPopup("<b>Brazil</b>");
L.marker([-14.235004,308.07472],{icon:BRAicon}).addTo(map)
.bindPopup("<b>Brazil</b>");
var COLicon = L.icon({
iconUrl: 'http://icons.iconseeker.com/png/fullsize/rounded-world-flags/colombia-flag-1.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([4.570868,-74.297333],{icon:COLicon}).addTo(map)
.bindPopup("<b>Colombia</b>");
L.marker([4.570868,285.702667],{icon:COLicon}).addTo(map)
.bindPopup("<b>Colombia</b>");
var PERicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/south-america-flags-icons-by-studiotwentyeight/png/256/Peru.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-9.189967,-75.015152],{icon:PERicon}).addTo(map)
.bindPopup("<b>Peru</b>");
L.marker([-9.189967,284.984848],{icon:PERicon}).addTo(map)
.bindPopup("<b>Peru</b>");
var CHLicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/south-america-flags-icons-by-studiotwentyeight/png/256/Chile.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-35.675147,-71.542969],{icon:CHLicon}).addTo(map)
.bindPopup("<b>Chile</b>");
L.marker([-35.675147,288.457031],{icon:CHLicon}).addTo(map)
.bindPopup("<b>Chile</b>");
//EUROPE POINTS
var PORicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/europe-flags-icons-by-studiotwentyeight/png/256/Portugal.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([39.399872,-8.224454],{icon:PORicon}).addTo(map)
.bindPopup("<b>Portugal</b>");
var ESPicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Europe/Spain.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([40.463667,-3.74922],{icon:ESPicon}).addTo(map)
.bindPopup("<b>Spain</b>");
var FRAicon = L.icon({
iconUrl: 'http://png-4.findicons.com/files/icons/656/rounded_world_flags/256/france.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([46.227638,2.213749],{icon:FRAicon}).addTo(map)
.bindPopup("<b>France</b>");
var DEUicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/de.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([51.165691,10.451526],{icon:DEUicon}).addTo(map)
.bindPopup("<b>Germany</b>");
var GBRicon = L.icon({
iconUrl: 'https://www.railpol.eu/RailPol/fs3_site.nsf/fck_images/069634987717D7A8C1257A83004C7C92/$FILE/United%20Kingdom%20Flag.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([55.378051,-3.435973],{icon:GBRicon}).addTo(map)
.bindPopup("<b>United Kingdom</b>");
var BELicon = L.icon({
iconUrl: 'http://png-2.findicons.com/files/icons/656/rounded_world_flags/256/belgium.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([50.503887,4.469936],{icon:BELicon}).addTo(map)
.bindPopup("<b>Belgium</b>");
var TURicon = L.icon({
iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Turkey.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([38.963745,35.243322],{icon:TURicon}).addTo(map)
.bindPopup("<b>Turkey</b>");
var CHEicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/europe-flags-icons-by-studiotwentyeight/png/256/Switzerland.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([46.818188,8.227512],{icon:CHEicon}).addTo(map)
.bindPopup("<b>Switzerland</b>");
var ESTicon = L.icon({
iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Estonia.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([58.595272,25.013607],{icon:ESTicon}).addTo(map)
.bindPopup("<b>Estonia</b>");
//MIDDLE EAST ICONS
var ISRicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/asia-flags-icons-by-studiotwentyeight/png/256/Israel.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([31.046051,34.851612],{icon:ISRicon}).addTo(map)
.bindPopup("<b>Israel</b>");
//AFRICA ICONS
var RWAicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Africa/Rwanda.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-1.940278,29.873888],{icon:RWAicon}).addTo(map)
.bindPopup("<b>Rwanda</b>");
var NGAicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/africa-flags-icons-by-studiotwentyeight/png/256/Nigeria.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([9.081999,8.675277],{icon:NGAicon}).addTo(map)
.bindPopup("<b>Nigeria</b>");
var BRIicon = L.icon({
iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Burundi.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-3.373056,29.918886],{icon:BRIicon}).addTo(map)
.bindPopup("<b>Burundi</b>");
var DZAicon = L.icon({
iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Algeria.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([28.033886,1.659626],{icon:DZAicon}).addTo(map)
.bindPopup("<b>Algeria</b>");
//ASIA ICONS
var RUSicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/ru.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([61.52401,105.318756],{icon:RUSicon}).addTo(map)
.bindPopup("<b>Russia</b>");
L.marker([61.52401,-254.681244],{icon:RUSicon}).addTo(map)
.bindPopup("<b>Russia</b>");
var CHNicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/China.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([35.86166,104.195397],{icon:CHNicon}).addTo(map)
.bindPopup("<b>China</b>");
L.marker([35.86166,-255.804603],{icon:CHNicon}).addTo(map)
.bindPopup("<b>China</b>");
var MONicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Mongolia.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([46.862496,103.846656],{icon:MONicon}).addTo(map)
.bindPopup("<b>Mongolia</b>");
L.marker([46.862496,-256.153344],{icon:MONicon}).addTo(map)
.bindPopup("<b>Mongolia</b>");
var PHLicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Philippines.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([12.879721,121.774017],{icon:PHLicon}).addTo(map)
.bindPopup("<b>Philippines</b>");
L.marker([12.879721,-238.225983],{icon:PHLicon}).addTo(map)
.bindPopup("<b>Philippines</b>");
var MMRicon = L.icon({
iconUrl: 'https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/Flag_of_Burma_Myanmar.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([21.913965,95.956223],{icon:MMRicon}).addTo(map)
.bindPopup("<b>Myanmar</b>");
L.marker([21.913965,-264.043777],{icon:MMRicon}).addTo(map)
.bindPopup("<b>Myanmar</b>");
var VNMicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Vietnam.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([14.058324,108.277199],{icon:VNMicon}).addTo(map)
.bindPopup("<b>Vietnam</b>");
L.marker([14.058324,-251.722801],{icon:VNMicon}).addTo(map)
.bindPopup("<b>Vietnam</b>");
var THAicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Thailand.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([15.870032,100.992541],{icon:THAicon}).addTo(map)
.bindPopup("<b>Thailand</b>");
L.marker([15.870032,-259.007459],{icon:THAicon}).addTo(map)
.bindPopup("<b>Thailand</b>");
var PRKicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/kp.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([40.339852,127.510093],{icon:PRKicon}).addTo(map)
.bindPopup("<b>Democratic People's Republic of Korea</b>")
L.marker([40.339852,-232.489907],{icon:PRKicon}).addTo(map)
.bindPopup("<b>Democratic People's Republic of Korea</b>")
var KORicon = L.icon({
iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/kr.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([35.907757,127.766922],{icon:KORicon}).addTo(map)
.bindPopup("<b>Republic of Korea</b>")
L.marker([35.907757,-232.233078],{icon:KORicon}).addTo(map)
.bindPopup("<b>Republic of Korea</b>")
var JPNicon = L.icon({
iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Japan.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([36.204824,138.252924],{icon:JPNicon}).addTo(map)
.bindPopup("<b>Japan</b>")
L.marker([36.204824,-221.747076],{icon:JPNicon}).addTo(map)
.bindPopup("<b>Japan</b>")
//AUSTRALIA ICONS
var AUSicon = L.icon({
iconUrl: 'http://icons.iconseeker.com/png/fullsize/rounded-world-flags/australia-flag-2.png',
iconSize: [35,35],
iconAnchor: [17.5,17.5],
});
L.marker([-25.274398,133.775136],{icon:AUSicon}).addTo(map)
.bindPopup("<b>Australia</b>")
L.marker([-25.274398,-226.224864],{icon:AUSicon}).addTo(map)
.bindPopup("<b>Australia</b>")
//Sets layer control
var overlay_layers = {
"Chinese Imports of Tungsten": CHNimports,
"German Imports of Tungsten": DEUimports,
"French Imports of Tungsten": FRAimports,
"Japanese Imports of Tungsten": JPNimports,
"United States Imports of Tungsten": USimports
}
L.control.layers(null, overlay_layers).addTo(map);
</script>
<br>
<br>
<p id="footer"></p>
</body>
</html>
这是一个Dropbox链接,如果有人想查看GEOJSONS(地理信息文件),请点击(希望它能按预期工作并成功下载): https://www.dropbox.com/sh/4bi70dx2t99qgln/AABJfyNDJzgNTQK4Wu3vYnVRa?dl=0 我一直在制作一个使用GEOJSON折线的Leaflet流动图项目。 我最近才开始接触JavaScript和Leaflet。这是一个我想制作的示例(我的地图使用等角线,可以交互): Flowmap Example 这是更新且可用的函数,它根据GEOJSON文件中的“Value”更改折线的权重(感谢Hinrich和Jonathan提供的帮助!):
function getStyle1(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 20;}
else if (feature.properties.Value > 10000000) {weight = 18;}
else if (feature.properties.Value > 5000000) {weight = 16;}
else if (feature.properties.Value > 1000000) {weight = 14;}
else if (feature.properties.Value > 500000) {weight = 12;}
else if (feature.properties.Value > 100000) {weight = 10;}
else if (feature.properties.Value > 1000) {weight = 8;}
else if (feature.properties.Value > 1) {weight = 6;};
return {
color: 'red',
weight: weight
}
};
var CHNimports = L.geoJson(CHN, {
style: getStyle1,
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to China: " + feature.properties.Value);
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
"The lines have different values and I can change the color according to the country, but the popup information does not appear when clicking on a polyline.
Also, here is a sample of the GEOJSON file for CHNimports."
var CHN = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Partner":"Algeria","LongX":1.659626,"LatY":28.033886,"CHNLong":104.195397,"CHNLat":35.86166,"Value":587},"geometry":{"type":"LineString","coordinates":[[1.659626,28.033886],[1.669754918002165,28.034691811007274],[1.679883911463014,28.035497621919983],[1.690012980385739,28.036303432738126],[1.700142124773322,28.037109243461707],[1.710271344628953,28.03791505409072],[1.720400639955684,28.038720864625162],[1.730530010756992,28.039526675065034],[1.74065945703536,28.040332485410335],[1.750788978794404,28.041138295661067],[1.760918576037107,28.041944105817212],[1.771048248766518,28.042749915878783],[1.781177996986042,28.04355572584578],[1.791307820698163,28.044361535718185],[1.801437719906642,28.045167345496015],[1.811567694614244,28.045973155179254],[1.821697744824234,28.04677896476791],[1.831827870539733,28.04758477426198],[1.841958071763792,28.04839058366145],[1.852088348499675,28.04919639296634],[1.862218700750077,28.050002202176625], ...continued on
谢谢您的帮助!