Leaflet 指令 - 全屏显示 png

Question

我目前正在从事一个必须在地图上显示 geojson 数据的项目。

我正在为 AngularJS 使用 leaflet-directive，它工作正常。

我的地图与 geojson 数据正确显示。

角度控制器

angular.extend($scope, {
    intersection: {
        lat: 50.891,
        lng: 4.258,
        zoom: 14
    },
    defaults: {
        scrollWheelZoom: false
    },
    geojson : {},
    layers: {
        baselayers: {
            xyz: {
                name: 'OpenStreetMap (XYZ)',
                url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                type: 'xyz'
            }
        },
        overlays: {}
    }
});

$scope.$watch("intersection.zoom", function(zoom) {
    if(zoom > 17){
        $scope.layers.overlays = {
            wms: {
                name: 'intersectionDraw',
                type: 'wms',
                visible: true,
                url: 'img/map.png'
            }
        }
    };
});

现在我想添加一个功能。当我的缩放达到最大缩放时，我想显示一个 png 绘图。目前，我的代码正在马赛克中显示 png。我希望这个 png 能够获得我的地图的完整高度和宽度，并且只看到这个。无需在此 png 上放大更多，但如果我缩小“正常”地图将再次显示

马赛克 PNG

Answer 1

使用L.ImageOverlay。见Leaflet single picture和https://github.com/Leaflet/Leaflet/blob/master/debug/map/image-overlay.html