路线图是新增的功能,可以把铁路、高速、国道、省道甚至乡村道路等绘制出来。生成路线数据需要有对应的shapefile,要有路线名字属性。另外如果数据文件较大,可以使用 ArcGis
加以泛化处理或者使用 jmap-plus-converter 配置中的 lineInterval
选项,关于转化器的配置请参考README.md。
同标记图一样,制作路线图的步骤为:
- 增加路线数据或者引入数据文件;
- 在配置中给
lines
赋值;
数据生成
生成路线数据需要2个条件:① jmap-plus-converter 工具; ②路线shapefile;另外,如果路线需要展示在某个区域内,配置文件中需要指定依赖区域文件。
路线数据格式为对象,包含2个属性:lineNames
(路线名称集合),lines
(路线集合);其中 lines
包含了路线名字索引和路径信息。
配置
假设路线数据变量名字为 lineData
,直接给配置中的 lines
赋值即可。
$('#world-map').vectorMap({ map: 'js_mill_cn', lines: lineData });
完整代码
<!DOCTYPE html> <html> <head> <title>jmap-plus example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" media="screen" href="../dist/assets/css/jquery-jmapplus.min.css" type="text/css"/> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../bower_components/jquery-mousewheel/jquery.mousewheel.min.js"></script> <script src="../dist/assets/js/jquery-jmapplus.min.js"></script> <script src="../dist/assets/data/china/jquery-jmapplus-region-js-mill-cn.js"></script> <script src="../dist/assets/data/china/jquery-jmapplus-line-js-mill-cn.js"></script> </head> <body style="margin:auto"> <div id="world-map" style="width: 100%; height: 400px"></div> <script> $(function () { $('#world-map').height($(window).height()); $('#world-map').vectorMap({ map: 'js_mill_cn', lines: lineData, showRegionLabel: true }); }); </script> </body> </html>