JVectorMap 路线图

路线图是新增的功能,可以把铁路、高速、国道、省道甚至乡村道路等绘制出来。生成路线数据需要有对应的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>

演示

发表评论