Question

我已经使用LeafletJS和GeoJSON创建了世界地图，并且为地图中的每个国家/地区添加了click事件，获得了被点击国家/地区的名称，并将其显示在输入字段中。只需要单击同一地图上的两个国家，我也是这样做的，但是问题是，如果我错误地单击了一个国家，我想取消选择该国家，然后单击（选择）另一个国家。当我取消选择国家/地区时，也应从输入字段中删除该国家/地区的名称。

UI如下所示：

表单的代码和用于显示地图的容器：

<div id="mapid" style="margin-bottom: 30px;"></div>
        <form method="post">
            <div class="row" style="margin-bottom: 20px;">
                <div class="col-sm-12 col-md-6">
                    <div class="form-group">
                        <label for="first">First selected country</label>
                        <input type="text" id="first" class="form-control" name="country1" readonly>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6">
                    <div class="form-group">
                        <label for="second">Second selected country</label>
                        <input type="text" id="second" class="form-control" name="country2" readonly>
                    </div>
                </div>
            </div>
            <label for="first">Message</label>
            <textarea id="" cols="" rows="10" class="form-control" name="message" style="margin-bottom: 20px;"></textarea>
            <input type="submit" value="SAVE" name="submit">
        </form>

以及LeafletJS和GeoJSON的代码：

<script>

var map = L.map('mapid').setView([0, 0], 1);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: '',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);

function getColor(d) {
    return  d > 1000 ? '#800026' :
            d > 500  ? '#BD0026' :
            d > 200  ? '#E31A1C' :
            d > 100  ? '#FC4E2A' :
            d > 50   ? '#FD8D3C' :
            d > 20   ? '#FEB24C' :
            d > 10   ? '#FED976' :
                        '#FFEDA0';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.ADMIN)
    };
}

var geojson;

function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}

var clickCounter = 0;

function zoomToFeature(e) {
    var clicked = false;
    if(clickCounter==0){
        document.getElementById('first').value=e.target.feature.properties.ADMIN
        clickCounter++;
        clicked = true;
        e.target.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            e.target.bringToFront();
        }
        if(clicked==true){
            e.target.on('click', function(){
                geojson.resetStyle(e.target);
                clicked = false;
                clickCounter = 0;
                document.getElementById('first').value="";
            })
        }
        if(clicked==false){
            e.target.on('click', function(){
                document.getElementById('first').value=e.target.feature.properties.ADMIN
                clickCounter++;
                clicked = true;
                e.target.setStyle({
                    weight: 5,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                });

                if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    e.target.bringToFront();
                }
            })
        }
    }
    else if(clickCounter==1){

        document.getElementById('second').value=e.target.feature.properties.ADMIN
        clickCounter++;
        e.target.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            e.target.bringToFront();
        }
        if(clicked==true){
            e.target.on('click', function(){
                geojson.resetStyle(e.target);
                clicked = false;
                clickCounter = 1;
                document.getElementById('second').value="";
            })
        }
        if(clicked==false){
            e.target.on('click', function(){
                document.getElementById('second').value=e.target.feature.properties.ADMIN
            clickCounter++;
            e.target.setStyle({
                weight: 5,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.7
            });

            if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                e.target.bringToFront();
            }
            })
        }
    }else{

    }
}

function onEachFeature(feature, layer) {
    layer.on({
        click: zoomToFeature
    });
}
var statesData = {
    "type": "FeatureCollection",
    "features": [{ "type": "Feature", "properties": { "ADMIN": "Aruba", "ISO_A3": "ABW", "ISO_A2": "AW" }, "geometry": { "type": "MultiPolygon",                "coordinates": [ [ [ [ -69.996937628999916, 12.577582098000036 ], [ -69.936390753999945, 12.531724351000051 ], [ -69.                                                   924672003999945, 12.519232489000046 ], [ -69.915760870999918, 12.497015692000076 ], [ -69.                                                  880197719999842, 12.453558661000045 ], [ -69.876820441999939, 12.427394924000097 ], [ -69.                                                  888091600999928, 12.417669989000046 ], [ -69.908802863999938, 12.417792059000107 ], [ -69.                                                  930531378999888, 12.425970770000035 ], [ -69.945139126999919, 12.44037506700009 ], [ -69.                                                   924672003999945, 12.44037506700009 ], [ -69.924672003999945, 12.447211005000014 ], [ -69.                                                   958566860999923, 12.463202216000099 ], [ -70.027658657999922, 12.522935289000088 ], [ -70.                                                  048085089999887, 12.531154690000079 ], [ -70.058094855999883, 12.537176825000088 ], [ -70.                                                  062408006999874, 12.546820380000057 ], [ -70.060373501999948, 12.556952216000113 ], [ -70.                                                  051096157999893, 12.574042059000064 ], [ -70.048736131999931, 12.583726304000024 ], [ -70.                                                  052642381999931, 12.600002346000053 ], [ -70.059641079999921, 12.614243882000054 ], [ -70.                                                  061105923999975, 12.625392971000068 ], [ -70.048736131999931, 12.632147528000104 ], [ -70.                                                  00715084499987, 12.5855166690001 ], [ -69.996937628999916, 12.577582098000036 ] ] ] ] } 
    },}

    geojson = L.geoJson(statesData, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(map);

请注意，在statesData数组中是所有国家/地区的数据，但是代码太大，因此我没有添加该部分。

Answer 1

将您的var paramExp = filterToUse.Parameters.First();函数更改为：

zoomToFeature

LeafletJS中的交互式地图事件

1 个答案: