使用Leaflet中的GEOJSON实现可变折线权重

Question

使用Leaflet中的GEOJSON实现可变折线权重

7

这是整个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: '&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>

这是一个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

谢谢您的帮助！

- shadowninja1012

1

欢迎来到stackoverflow！如果您要求他人阅读和理解您的代码，适当的代码格式化肯定会有所帮助。如果您能够将问题缩小到一个特定的问题，独立于您的具体输入，这也将有助于吸引更多人查看您的问题。 - ralfstx

@ralfstx，希望我的编辑更符合您的意思。感谢您的快速回复。 - shadowninja1012

如果您发布完整的脚本，那会非常有帮助！能够看到您如何调用 getWeight() 函数，您期望返回什么以及您如何访问 GeoJSON 文件都会有所帮助！ - The Brofessor

我已经将整个HTML代码添加到帖子中，并且如果需要，我还包括了一个Dropbox链接，其中包含GEOJSONS。 - shadowninja1012

你似乎发布了比解决问题所需的更多代码。请阅读[提问]和如何制作[最小化完整可复现实例]; 提供一个MCVE有助于用户回答您的问题，并帮助未来的用户理解您的问题。 - double-beep

2个回答

2

我认为您的问题在于调用L.geoJson时传递了过多的参数。

您的代码：

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

它应该是这个样子的，注意对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);

L.geoJson函数只接受两个参数。第一个参数是geoJson对象，第二个参数是另一个json对象，其中包含style、onEachFeature和pointToLayer。

文档： http://leafletjs.com/reference.html#geojson

- Jonathan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hinrich · Accepted Answer

我认为你的函数实际上应该返回权重值。类似这样更好：

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

针对样式和弹出窗口部分，可以尝试以下方法：

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