Biến Polyline Trọng lượng với GeoJSON trong Tờ rơi

Dưới đây là toàn bộ tài liệu HTML:Biến Polyline Trọng lượng với GeoJSON trong Tờ rơi

<!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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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>

Dưới đây là một liên kết dropbox đến GEOJSONS nếu có ai muốn nhìn thấy họ (hy vọng công trình này như dự định và người có thể tải xuống chúng): https://www.dropbox.com/sh/4bi70dx2t99qgln/AABJfyNDJzgNTQK4Wu3vYnVRa?dl=0

Tôi đã làm việc trên một dự án để tạo một sơ đồ trong Leaflet sử dụng GEOJSON polylines. Tôi chỉ mới làm quen với JavaScript và Leaflet. Dưới đây là một ví dụ về những gì tôi muốn thực hiện (bản đồ của tôi sử dụng dòng rhumb và sẽ là tương tác):

Flowmap Example

Đây là cập nhật và chức năng rằng những thay đổi trọng lượng polyline dựa trên 'Giá trị' của mình làm việc từ tập tin GeoJSON (tín dụng để Hinrich & Jonathan sự giúp đỡ của họ!):

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);

các dòng khác nhau tùy theo giá trị và tôi sẽ có thể thay đổi màu sắc phụ thuộc vào nước nhưng thông tin cửa sổ bật lên không xuất hiện khi một polyline được nhấp vào.

Bên cạnh đó, đây là một mẫu của tập tin GeoJSON cho 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

Cảm ơn bạn đã giúp đỡ!

Nguồn

2015-04-22 shadowninja1012

Chào mừng bạn đến với stackoverflow! Nếu bạn yêu cầu người khác đọc và hiểu mã của bạn, định dạng mã thích hợp chắc chắn sẽ hữu ích. Nếu bạn có thể quản lý để giảm câu hỏi của bạn thành một vấn đề cụ thể, bạn dường như không thể giải quyết, độc lập với đầu vào cụ thể của bạn, điều này cũng sẽ giúp thu hút nhiều người hơn xem câu hỏi của bạn. – ralfstx

@ralfstx, Hy vọng rằng bản chỉnh sửa của tôi phù hợp hơn với những gì bạn muốn nói. Cảm ơn bạn đã trả lời nhanh chóng. – shadowninja1012

Nếu bạn đã đăng toàn bộ tập lệnh sẽ giúp ích rất nhiều!Có thể thấy cách bạn gọi getWeight(), những gì bạn đang mong đợi đã quay trở lại và cách bạn truy cập vào tệp GeoJSON tất cả sẽ giúp ích gì! –

tôi nghĩ rằng chức năng của bạn thực sự nên trả về trọng lượng. một cái gì đó như thế này:

var getStyle = function(feature){ 
    var weight; 
    if (feature.properties.Value > 30000000) {weight = 8;} 
    else if (feature.properties.Value > 10000000) {weight = 7;} 
    else if (feature.properties.Value > 5000000) {weight = 6;} 
    else if (feature.properties.Value > 1000000) {weight = 5;} 
    else if (feature.properties.Value > 500000) {weight = 4;} 
    else if (feature.properties.Value > 100000) {weight = 3;} 
    else if (feature.properties.Value > 1000) {weight = 2;} 
    else if (feature.properties.Value > 1) {weight = 1;}; 

    return { 
    color: 'red', 
    weight: weight 
    } 
}; 

var getPopup = function(feature, layer) { 
    var content = 'popup content goes here'; 
    layer.bindPopup(content); 
};

thử này sau đó cho phong cách và cửa sổ bật lên phần:

var CHNimports = L.geoJson(CHN, { 
    style: getStyle, 
    onEachFeature: getPopup 
}).addTo(map);

Nguồn

2015-04-23 05:39:15 Hinrich

Tôi đã thêm mã này vào mã nhưng bây giờ vấn đề tôi có là các polylines được tạo ra đều có trọng số là 1 và thông tin bật lên của tôi không hiển thị khi dòng được nhấp vào. – shadowninja1012

tôi đã cập nhật câu trả lời của mình. xem tài liệu tờ rơi [ở đây] (http://leafletjs.com/examples/geojson.html) để tham khảo thêm – Hinrich

Khi tôi sử dụng kiểu tạo, tôi nhận được lỗi 'tính năng' không được xác định. Điều này xảy ra nếu tôi sử dụng mã chính xác mà bạn đã đề xuất hoặc nếu tôi cố gắng đặt mã đó vào biến hiện tại của mình. – shadowninja1012

Tôi nghĩ vấn đề của bạn là bạn đang gọi điện thoại L.geoJson với quá nhiều thông số.

Mã của bạn;

var CHNimports = L.geoJson(CHN, {style: getStyle}, { 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup("Omitted for formatting..."); 
    }, 
    pointToLayer: function (feature, latlng) { 
     return L.polyline(latlng); 
    } 
}).addTo(map);

Điều gì sẽ giống như, lưu ý thay đổi đối với thuộc tính style;

var CHNimports = L.geoJson(CHN, { 
    style: getStyle, 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup("Omitted for formatting..."); 
    }, 
    pointToLayer: function (feature, latlng) { 
     return L.polyline(latlng); 
    } 
}).addTo(map);

Hàm L.geoJson chỉ nhận 2 đối số. Đầu tiên là đối tượng geoJson và đối tượng thứ hai là một đối tượng json khác có chứa style, onEachFeature và pointToLayer.

Tài liệu: http://leafletjs.com/reference.html#geojson

Nguồn

2015-04-23 23:22:13 Jonathan

Biến Polyline Trọng lượng với GeoJSON trong Tờ rơi

Trả lời

Các vấn đề liên quan