Question

我正在使用Leaflet.js在我的网络应用中将标记放在楼层平面图上。但是当我将具有大尺寸的图像（例如2363 * 3390）上传到地图控件时，它会将图像旋转出我的控件。当我从Windows图像查看器更改图像的旋转时，任何变化。为什么传单会自动旋转？

    function LoadMap(_base64Data, boundHeight, boundWidth) {
        mapLoadCount = mapLoadCount + 1;

        var w = boundWidth,
            h = boundHeight,
            url = '';

        if (mapLoadCount == 1) {
            map = L.map('map', {
                minZoom: 7,
                maxZoom: 18,
                center: [0, 0],
                crs: L.CRS.Simple
            }).setView([50.4333, 30.5167], 16);


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

            markerLayer = new L.FeatureGroup();
            deletedMarkers = new L.FeatureGroup();
            map.addLayer(markerLayer);
        }
        else {
            var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
            var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
            bounds = new L.LatLngBounds(southWest, northEast);

            map.removeLayer(overlay);

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

            map.setMaxBounds(bounds);
        }
    }

Answer 1

我遇到同样的问题，但经过大量搜索后，我宁愿使用L.imageTransform(image_object, latlngs ).addTo(map);而不是L.imageOverlay() 我用上面的改变重写了你的代码。它在功能上对我有用，我很多项目。如果你没有得到好的结果，只需检查你的代码和参数。我设置了＆＃34; image_latlngs＆＃34;不要是方形，你可以改变参数来建立你想要的形状。

function LoadMap(_base64Data, boundHeight, boundWidth) {
    mapLoadCount = mapLoadCount + 1;

    var w = boundWidth,
        h = boundHeight,
        url = '';

    if (mapLoadCount == 1) {
        map = L.map('map', {
            minZoom: 7,
            maxZoom: 18,
            center: [0, 0],
            crs: L.CRS.Simple
        }).setView([50.4333, 30.5167], 16);


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


        // ######### new codes #############
        var latlng = map.getBounds().getCenter();
        var X = latlng.lat;
        var Y = latlng.lng;
        var delta = Math.pow(2,map.getMaxZoom() - map.getZoom())*0.000000001;
        var image_latlngs = [
            [X + delta , Y - delta],
            [X + delta * 3/2 , Y + delta * 3/2 ],
            [X + delta * 1/2 , Y +  + delta * 5/2  ],
            [X - delta * 1/2 , Y - delta * 1/2]
        ];
        var image = L.imageTransform( url , image_latlngs ).addTo(map);
        map.setMaxBounds(map.getBounds());
        // ######### new codes #############



        markerLayer = new L.FeatureGroup();
        deletedMarkers = new L.FeatureGroup();
        map.addLayer(markerLayer);
    }
    else {
        // var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        // var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        // bounds = new L.LatLngBounds(southWest, northEast);

        // map.removeLayer(overlay);
        // overlay = L.imageOverlay(_base64Data, bounds);
        // overlay.addTo(map);

        // ######### new codes #############
        map.removeLayer(image);
        var latlng = map.getBounds().getCenter();
        var X = latlng.lat;
        var Y = latlng.lng;
        var delta = Math.pow(2,map.getMaxZoom() - map.getZoom())*0.000000001;
        var image_latlngs = [
            [X + delta , Y - delta],
            [X + delta * 3/2 , Y + delta * 3/2 ],
            [X + delta * 1/2 , Y +  + delta * 5/2  ],
            [X - delta * 1/2 , Y - delta * 1/2]
        ];
        var image = L.imageTransform( url , image_latlngs ).addTo(map);
        map.setMaxBounds(map.getBounds());
        // ######### new codes #############
    }
}

Leaflet.js正在旋转大尺寸图像

1 个答案: