leaflet-easyPrint, 添加 icon 以打印地图演示 @ http的传单插件

分享于 

5分钟阅读

GitHub

  繁體 雙語
A leaflet plugin which adds an icon to print the map - http://rowanwins.github.io/leaflet-easyPrint/
  • 源代码名称:leaflet-easyPrint
  • 源代码网址:http://www.github.com/rowanwins/leaflet-easyPrint
  • leaflet-easyPrint源代码文档
  • leaflet-easyPrint源代码下载
  • Git URL:
    git://www.github.com/rowanwins/leaflet-easyPrint.git
    Git Clone代码到本地:
    git clone http://www.github.com/rowanwins/leaflet-easyPrint
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/rowanwins/leaflet-easyPrint
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    leaflet-easyprint

    一个简单的标签插件插件,它添加了一个打印或者导出地图的。

    特性

    • 支持调整预定义大小( A4 landscape &头像) 以及自定义大小的大小
    • 支持保存到 png,以及打印
    • 与 Leaflet v1+和 0.7兼容
    • 在 Chrome 上测试,Firefox
      • 由于 dom-to-image 依赖关系,与 IE &边缘不兼容

    查看演示程序。

    下载

    你可以直接下载这里 repo,也可以通过NPM安装。

    
    npm install leaflet-easyprint
    
    
    
    

    命令行选项

    你可以向插件传递许多选项来控制各种设置。

    选项类型默认说明
    标题字符串'Print打印地图'设置显示为打印/导出按钮的工具提示的文本
    位置传单控制位置。"'"'定位打印按钮
    sizeModesarrayCurrent可用选项包括 CurrentA4PortraitA4Landscape 或者自定义大小对象
    defaultSizeTitles对象{Current: 'Current Size', A4Landscape: 'A4 Landscape', A4Portrait: 'A4 Portrait'}默认页面大小的按钮工具提示
    exportOnly布尔型false如果设置为 true,映射将导出到png文件
    tileLayer小叶瓷砖层。null你可以等待绘制的平铺层( 调整大小时很有用)
    tileWait整型500等待瓷砖绘制的时间( 调整大小时有帮助)
    文件名字符串'''如果仅导出选项设置为 true,则为文件的名称
    隐藏布尔型false如果你不想显示工具栏,则设置为 true。 你可以通过编程方式创建自己的按钮或者fire打印事件。 你仍然需要调用 addTo(map) 来设置小叶地图上下文。
    hideControlContainer布尔型true隐藏标签控件,如缩放按钮和打印出来的属性。
    hideClassesarray[ ]隐藏打印输出上的类。 按如下所示使用字符串的array: ['div1', 'div2' ]
    customWindowTitle字符串默认为地图窗口标题。打印窗口的标题,将被添加到打印的纸张中。
    spinnerBgColor字符串'#0DC5C1''Spinner background 颜色的有效css颜色。
    customSpinnerClass字符串'epLoader''用于在等待打印时使用的自定义 css Spinner的类。

    示例

    
    L.easyPrint({
    
    
     title: 'My awesome print button',
    
    
     position: 'bottomright',
    
    
     sizeModes: ['A4Portrait', 'A4Landscape']
    
    
    }).addTo(map);
    
    
    
    

    方法/使用编程方式

    方法选项说明
    printMap ( 大小,文件名)打印大小名称,'currentsize','a4portrait','a4landscape'或者自定义大小的className。 还有文件名手动触发打印操作
    
    var printPlugin = L.easyPrint({
    
    
     hidden: true,
    
    
     sizeModes: ['A4Portrait']
    
    
    }).addTo(map); 
    
    
    printPlugin.printMap('A4Portrait', 'MyFileName');
    
    
    
    

    自定义打印大小

    你可以通过传递一些选项来创建额外的打印大小。 宽度&高度在 90 DPI的像素中定义。 css类应该包含一个 background base64编码的svg图像。

    
    var a3Size = {
    
    
     width: 2339,
    
    
     height: 3308,
    
    
     className: 'a3CssClass',
    
    
     tooltip: 'A custom A3 size'
    
    
    }
    
    
    
    //in css 
    
    
    .easyPrintHolder. a3CssClass { 
    
    
     background-image: url(data:image/svg+xml;utf8;base64,PD9...go=);
    
    
    }
    
    
    
    

    确认

    巨大的hats off到 mourner,所有的贡献者到项目,这是一个开源软件的神奇部分

    同时还使用了 dom-to-imageFileSaver。


    plugin  添加  HTTP  DEMO  ICO  icon  
    相关文章