Question

我现在因为我可怜的Javascript / Jquery知识而无法使用Leaflet：）

我想通过将照片上传到服务器来更改我的Leaflet ImageLayer网址。我搜索了很多，将图像文件上传到WCF服务，我做到了。但我不能给我的ImageLayer这个URL。

<div>
    <button id="btnBrowse" class="button primary on-right" onclick="openFileOption();">Browse</button>
</div>
<div class="custom-file">
    <input type="file" id="file" style="display:none" onchange="uploadPhoto();" />
</div>
<div id="base" style="display:none"></div>

<div id="map" style="width: 100%; height: 400px"></div>

高于我的HTML文件内容。我在LoadMap（）函数中加载了一次我的地图。然后在ChangeMap（）函数中更改它的URL。

<script>
    var mapLoadCount = 0;
    var map;
    var overlay;
    var bounds;

    function LoadMap() {
        mapLoadCount = mapLoadCount + 1;
        if (mapLoadCount == 1) {
            map = L.map('map', {
                minZoom: 1,
                maxZoom: 5,
                center: [0, 0],
                zoom: 3,
                crs: L.CRS.Simple
            }).setView([50.4333, 30.5167], 3);

            var w = 1526,
            h = 626,
            url = '';

            var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
            var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
            bounds = new L.LatLngBounds(southWest, northEast);

            overlay = L.imageOverlay(url, bounds);
            overlay.addTo(map);

            map.setMaxBounds(bounds);
        }
    }

    function onMapClick(e) {
        var newPosition = e.latlng;

        if (imageBounds.contains(newPosition)) {
            var newMarker = L.marker(newPosition).addTo(map);
        }

    }

    function ChangeMap(_url) {

        LoadMap();

        overlay.setUrl(_url)
        var popup = L.popup();

        var imageBounds = bounds;

        function onMapClick(e) {
            var newPosition = e.latlng;

            if (imageBounds.contains(newPosition)) {
                var newMarker = L.marker(newPosition).addTo(map);
            }
        }

        newMarkerGroup = new L.LayerGroup();
        map.on('click', onMapClick);

        map.on('drag', function () {
            map.panInsideBounds(bounds, { animate: false });
        });
    }
</script>

在下面的代码中，我正在读取图像文件并将其加载到服务器，然后在服务器上使用我的图像的url调用ChangeMap（）函数。

<script type="text/javascript">
    function readImage(input) {
        if (input.files && input.files[0]) {
            var FR = new FileReader();
            FR.onload = function (e) {
                $('#base').text(e.target.result);
            };
            FR.readAsDataURL(input.files[0]);
        }
    }

    function openFileOption() {
        document.getElementById("file").click();
    }

    function uploadPhoto() {

        var path = document.getElementById("file").value;
        var fileExtension = path.substring(path.lastIndexOf(".") + 1, path.length);

        var file = document.getElementById("file");

        readImage(file);

        var check = function () {
            if ($('#base').text() != "") {
                var base64 = $('#base').text();
                UploadToServer(base64); 
            }
            else {
                setTimeout(check, 1000); // check again in a second
            }
        }
        check();

        if (result == "true") 
        {
          ChangeMap("..\\" + imageUrl);
        }
    }

    var result;
    var dataArr;
    var imageUrl;

    function UploadToServer(base64) {

        var url = $(location).attr('href');
        var baseURL = url.substring(0, url.indexOf('/', 8));
        var path = document.getElementById('file').value;
        var fileName = path.substring(path.lastIndexOf("\\") + 1, path.length);
        fileName = fileName.substring(0, fileName.lastIndexOf("."));
        var fileExtension = path.substring(path.lastIndexOf(".") + 1, path.length);
        var jData = {};
        jData.base64 = base64;
        jData.fileName = fileName;
        jData.fileExtension = fileExtension;
        var Path = 'http://localhost/ImageUploaderService/FileUploader.svc/UploadPhotoToServer';
        var imagePath = "localhost\\ImageUploaderService\\";
        $.ajax({
            type: "POST",
            url: Path,
            data: JSON.stringify(jData),
            dataType: 'json',
            async: false,
            contentType: "application/json",
            beforeSend: function () {

            },
            complete: function () {

            },
            success: function (data) {
                if (data.indexOf('|')!= -1)
                {
                    dataArr = data.split('|');
                    result = dataArr[0];
                    imageUrl = dataArr[1];
                }
                if (result != "true") {
                    alert('Error while loading image to server. ' + data);
                }
            },
            error: function (responseData, textStatus, errorThrown) {

                alert('Error while loading image to server. ' + responseData + textStatus + errorThrown);
            }
        });
    }
</script>

我的实际问题是关于第一次加载图像。当我第一次加载图像时，我的代码正在将图像加载到服务器并获取图像的路径并将其加载到我的地图中。但在第二次不改变我的Leaflet imagelayer的形象。之后，当我第三次加载时，它会加载第二张图像进行映射。第四，它加载第三张图像，依此类推。

我对FileReader.onload事件有疑问。因为当我调试我的代码时，我看到我的代码在调用ChangeMap（）函数后进入FileReader的onload事件。我无法理解我的代码中发生了什么:)

编辑：这是我的代码的工作版本＆gt; http://jsfiddle.net/v905xhre/

Answer 1

您似乎对异步流程感到困惑。您的UploadToServer函数会创建一个AJAX（第一个＆＃34; A＆＃34;用于异步）请求，并且只有在请求成功完成后才会将数据分配给result和imageUrl变量。

一旦将AJAX发送到您的服务器（但尚未完成），您的脚本将继续执行，因此下一行将测试result。首次上传时，它为undefined。在第二次上传时，它是true，因为它永远不会重置为false，您的图片网址将更改为当前imageUrl中的内容，即第一次上传的网址，因为第二次上传仍在服务器上处理。等等。

    check(); // calls UploadToServer

    if (result == "true") // executes while the AJAX is sent
    {
      ChangeMap("..\\" + imageUrl);
    }

您可以将调用ChangeMap简单地移动到AJAX请求的成功回调中。

编辑：关于如何正确使用异步/ AJAX流程，您还可以参考How to return the response from an asynchronous call?

动态更改传单ImageLayer URL

1 个答案: