高德地图 Web JS API UI组件示例学习笔记（5）——轨迹展示

简单路径

展示PathSimplifier的基本接口的使用方法。

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
      if (!PathSimplifier.supportCanvas) {
        alert('当前环境不支持 Canvas！');
        return;
      }

      // 创建简单路径
      var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        //autoSetFitView:false,
        map: map, //所属的地图实例
        // 获取路径
        getPath: function (pathData, pathIndex) {
          return pathData.path;
        },
        // 鼠标悬浮在点上，显示的标题
        getHoverTitle: function (pathData, pathIndex, pointIndex) {
          if (pointIndex >= 0) {
            //point 
            return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
          }

          return pathData.name + '，点数量' + pathData.path.length;
        },
        renderOptions: {
          renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
        }
      });

      window.pathSimplifierIns = pathSimplifierIns;

      //设置数据
      pathSimplifierIns.setData([{
        name: '路线0',
        path: [
          [116.405289, 39.904987],
          [113.964458, 40.54664],
          [111.47836, 41.135964],
          [108.949297, 41.670904],
          [106.380111, 42.149509],
          [103.774185, 42.56996],
          [101.135432, 42.930601],
          [98.46826, 43.229964],
          [95.777529, 43.466798],
          [93.068486, 43.64009],
          [90.34669, 43.749086],
          [87.61792, 43.793308]
        ]
      }]);

      //对第一条线路（即索引 0）创建一个巡航器
      var navg1 = pathSimplifierIns.createPathNavigator(0, {
        loop: true, //循环播放
        speed: 1000000 //巡航速度，单位千米/小时
      });

      navg1.start();
    });

仅展示驶过线

通过pathLinePassedStyle属性控制PathSimplifier巡航器已经驶过部分的线路样式。

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
      if (!PathSimplifier.supportCanvas) {
        alert('当前环境不支持 Canvas！');
        return;
      }

      var emptyLineStyle = {
        lineWidth: 0,
        fillStyle: null,
        strokeStyle: null,
        borderStyle: null
      };

      var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        //autoSetFitView:false,
        map: map, //所属的地图实例
        getPath: function (pathData, pathIndex) {
          return pathData.path;
        },
        getHoverTitle: function (pathData, pathIndex, pointIndex) {
          return null;
        },
        renderOptions: {
          //将点、线相关的style全部置emptyLineStyle
          pathLineStyle: emptyLineStyle,
          pathLineSelectedStyle: emptyLineStyle,
          pathLineHoverStyle: emptyLineStyle,
          keyPointStyle: emptyLineStyle,
          startPointStyle: emptyLineStyle,
          endPointStyle: emptyLineStyle,
          keyPointHoverStyle: emptyLineStyle,
          keyPointOnSelectedPathLineStyle: emptyLineStyle
        }
      });

      window.pathSimplifierIns = pathSimplifierIns;

      pathSimplifierIns.setData([{
        name: '测试',
        path: [
          [116.405289, 39.904987],
          [113.964458, 40.54664],
          [111.47836, 41.135964],
          [108.949297, 41.670904],
          [106.380111, 42.149509],
          [103.774185, 42.56996],
          [101.135432, 42.930601],
          [98.46826, 43.229964],
          [95.777529, 43.466798],
          [93.068486, 43.64009],
          [90.34669, 43.749086],
          [87.61792, 43.793308]
        ]
      }]);

      function onload() {
        pathSimplifierIns.renderLater();
      }

      function onerror(e) {
        alert('图片加载失败！');
      }

      var navg1 = pathSimplifierIns.createPathNavigator(0, {
        loop: true,
        speed: 1000000,
        pathNavigatorStyle: {
          width: 24,
          height: 24,
          //使用图片
          content: PathSimplifier.Render.Canvas.getImageContent('./imgs/plane.png', onload, onerror),
          strokeStyle: null,
          fillStyle: null,
          //经过路径的样式
          pathLinePassedStyle: {
            lineWidth: 6,
            strokeStyle: 'black',
            dirArrowStyle: {
              stepSpace: 15,
              strokeStyle: 'red'
            }
          }
        }
      });
      navg1.start();
    });

简单数据附加

给PathSimplifier路径的节点附加数据，并展示。

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
      if (!PathSimplifier.supportCanvas) {
        alert('当前环境不支持 Canvas！');
        return;
      }

      var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        //autoSetFitView:false,
        map: map, //所属的地图实例
        getPath: function (pathData, pathIndex) {
          var points = pathData.points,
            lnglatList = [];
          for (var i = 0, len = points.length; i < len; i++) {
            lnglatList.push(points[i].lnglat);
          }
          return lnglatList;
        },
        getHoverTitle: function (pathData, pathIndex, pointIndex) {
          if (pointIndex >= 0) {
            //point 
            return pathData.name + '，' + pathData.points[pointIndex].name;
          }
          return pathData.name + '，点数量' + pathData.points.length;
        },
        renderOptions: {
          renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
        }
      });

      window.pathSimplifierIns = pathSimplifierIns;

      //设置数据
      pathSimplifierIns.setData([{
        name: '路线0',
        points: [{
          name: "点a",
          lnglat: [116.405289, 39.904987]
        }, {
          name: "点b",
          lnglat: [113.964458, 40.54664]
        }, {
          name: "点c",
          lnglat: [111.47836, 41.135964]
        }, {
          name: "点d",
          lnglat: [108.949297, 41.670904]
        }, {
          name: "点e",
          lnglat: [106.380111, 42.149509]
        }, {
          name: "点f",
          lnglat: [103.774185, 42.56996]
        }, {
          name: "点g",
          lnglat: [101.135432, 42.930601]
        }, {
          name: "点h",
          lnglat: [98.46826, 43.229964]
        }, {
          name: "点i",
          lnglat: [95.777529, 43.466798]
        }, {
          name: "点j",
          lnglat: [93.068486, 43.64009]
        }, {
          name: "点k",
          lnglat: [90.34669, 43.749086]
        }, {
          name: "点l",
          lnglat: [87.61792, 43.793308]
        }]
      }]);

      //选中路线0
      pathSimplifierIns.setSelectedPathIndex(0);

      pathSimplifierIns.on('pointClick', function (e, info) {
        console.log('Click: ' + info.pathData.points[info.pointIndex].name);
      });
    });