使用Leaflet打印地图

时间:2016-05-19 08:57:04

标签: jquery google-maps leaflet

我正在尝试创建一个仅包含使用Leaflet创建的地图的可打印视图。我正在使用包含Multipolygons的GeoJson文件创建地图,以将国家/地区拆分为邮政编码。

我的地图按以下方式设置:

<div id="printableMap"></div>
var map = L.map('printableMap', {
        'center': [55.483959, -2.244644],
        'zoom': 6,
        'maxBounds': maxBounds
    });
L.tileLayer('LINK TO MAPQUEST', {
        type: 'map',
        ext: 'jpg',
        attribution: 'LINK TO MAPQUEST',
        subdomains: '1234',
        minZoom: 6,
        maxZoom: 9
    }).addTo(map);

var geoJson = JSON.parse(JSON.stringify(data));
    L.geoJson(geoJson, {
        onEachFeature: onEachFeature,
        style: function (feature) {
            if ($.inArray(feature.properties.Name, postcodes.split(',')) > -1) {
                return {
                    color: "#000000",
                    weight: 2.5,
                    opacity: 1,
                    fillOpacity: 0.7,
                    fillColor: "#0000ff"
                };
            } else {
                return getDefaultStyle();
            }
        }
    }).addTo(map);

map.on('zoomend', function () {
    map.invalidateSize();
});
map.on('dragend', function () {
    map.invalidateSize();
});

在我操作地图(缩放,平移)之后,通过浏览器打印选项打印地图时出现问题 - 看起来geojson图层没有更新以匹配地图,并且还溢出包含地图。

Screenshot of a print preview of the map

我的印象是map.invalidateSize应该更新geoJson图层以适应地图,我错过了什么?

编辑 - 我在使用IE8,Chrome和Firefox时获得预期的打印输出,但不是IE Edge。

编辑 - 我尝试使用与发送打印命令之前创建的地图相同的方式重新创建地图,但这会打印出按比例放大的geoJson图层以填充页面而不会打印任何地图图块。 / p>

0 个答案:

没有答案