1

This is what I want to do:

When loading the map, it will first grab the window coordinates of the current screen, and then load the data points of the current screen. The next screen is as described above, but the data of the previous screen will be cleared.

I think make the performance worse when loading too much data,so I want to do this problem.

To put it simply, it means that only the screen that moves to it appears, and the data of that screen appears.

This is my code:

<script>

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 25, attribution: osmAttrib });
    var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 25).addLayer(osm);
    L.control.scale().addTo(map);


    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng).addTo(map)
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }
    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({ setView: true, maxZoom: 15 });


    /*try to catch window position*/
    var top = window.pageYOffset || document.documentElement.scrollTop,
        left = window.pageXOffset || document.documentElement.scrollLeft;



    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#FF3333 ", //#ff7800
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };

    $.getJSON("taiwan.json", function (data) {
        var datalayer = L.geoJson(data, {
            onEachFeature: function (feature, featureLayer) {
                featureLayer.bindPopup("編號: " + feature.properties.id +
                    "</br>時間: " + feature.properties.date +
                    "</br>規模: " + feature.properties.magnitude);
            },
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, geojsonMarkerOptions);
            }
        }).addTo(map);
        //map.fitBounds(datalayer.getBounds());
    });

</script>

Now,I don't know how can I catch window position,and combine the data I load.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.