小叶开关层控制和phantomjs

时间:2015-09-03 15:36:03

标签: javascript phantomjs leaflet

我目前正在使用Leaflet开发一个网站来显示统计数据。

我的源代码是用geoJSON编写的,并在JavaScript数组中定位。 基本上我想将我的渲染导出为PDF,但我的地图包含一个图层切换器。

以下是一个例子:

http://i.imgur.com/htFHBOm.png

我使用PhantomJS进行导出,但它只绘制了我的第一层。当我切换图层时,县的颜色正在改变,但不在我的PDF文件中。

我的源文件是这样的:

enter image description here

我使用json-tags(&#34; EDS&#34;,&#34; MCO&#34;等...)在图层切换器中调用,以检测具有适当图例的值和颜色县。< / p>

你有getColor函数:

function getColor_MCO(d) {
    return d > 38 ? '#800026' :
           d > 33  ? '#E31A1C' :
           d > 27  ? '#FD8D3C' :
           d > 21   ? '#FEB24C' :
           d > 14   ? '#FED976' :
                      '#000';
}

造型功能:

function style_MCO(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '5',
        fillOpacity: 0.7,
        fillColor: getColor_MCO(feature.properties.MCO)
    };
}

这是我初始化切换层选项的方式:

var MCO = L.geoJson(toulonData, {
    style: style_MCO,
    onEachFeature: function (feature, layer) {
        popupOptions = {maxWidth: 200};
        layer.bindPopup("<b>Nom de la region : </b> " + feature.properties.Name +
            "<br><b>Taux d'attractivite (en %) : </b>" + feature.properties.MCO
            ,popupOptions);
            //highlight
    function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
});

info1.update(layer.feature.properties);

最后,这就是切换层选项的工作原理:

map.on('baselayerchange', function (eventLayer) {
    if (eventLayer.name === 'EDS') {
        map.removeControl(currentLegend);
        currentLegend = legend_EDS;
        legend_EDS.addTo(map);
        map.removeControl(currentInfo);
        currentInfo=info0;
        info0.addTo(map);
    }
    else if (eventLayer.name === 'MCO') {
        map.removeControl(currentLegend);
        currentLegend = legend_MCO;
        legend_MCO.addTo(map);
         map.removeControl(currentInfo);
        currentInfo=info1;
        info1.addTo(map);
    }
    else if ... (same for the others)

0 个答案:

没有答案