diff --git a/src/track-playback/src/control.trackplayback/control.playback.js b/src/track-playback/src/control.trackplayback/control.playback.js
index 6c6f101980579abf0abab21b9d32c2d4626abca4..ae331f50b32040c9a34bab5dc7f8154a4d5cbaf0 100644
--- a/src/track-playback/src/control.trackplayback/control.playback.js
+++ b/src/track-playback/src/control.trackplayback/control.playback.js
@@ -100,11 +100,33 @@ export const TrackPlayBackControl = L.Control.extend({
       "sliderContainer",
       this._container
     );
-    this._lineCbx = this._createCheckbox(
+    this._filterContainer = this._createContainer(
+      "filterContainer",
+      this._container
+    );
+    /*     this._lineCbx = this._createCheckbox(
       "show trackLine",
       "show-trackLine",
       this._optionsContainer,
       this._showTrackLine
+    ); */
+    this._filterInfantry = this._createCheckbox(
+      "show infantry units",
+      "show-infantry",
+      this._filterContainer,
+      this._showInfantry
+    );
+    this._filterRecon = this._createCheckbox(
+      "show recon units",
+      "show-recon",
+      this._filterContainer,
+      this._showRecon
+    );
+    this._filterMechanized = this._createCheckbox(
+      "show mechanized units",
+      "show-mechanized",
+      this._filterContainer,
+      this._showMechanized
     );
 
     this._playBtn = this._createButton(
@@ -120,13 +142,13 @@ export const TrackPlayBackControl = L.Control.extend({
       this._restart
     );
     this._slowSpeedBtn = this._createButton(
-      "slow",
+      "decrease speed",
       "btn-slow",
       this._buttonContainer,
       this._slow
     );
     this._quickSpeedBtn = this._createButton(
-      "quick",
+      "increase speed",
       "btn-quick",
       this._buttonContainer,
       this._quick
@@ -187,6 +209,7 @@ export const TrackPlayBackControl = L.Control.extend({
     let inputId = `trackplayback-input-${L.Util.stamp(inputEle)}`;
     inputEle.setAttribute("type", "checkbox");
     inputEle.setAttribute("id", inputId);
+    inputEle.checked = true;
 
     let labelEle = L.DomUtil.create("label", "trackplayback-label", divEle);
     labelEle.setAttribute("for", inputId);
@@ -250,6 +273,18 @@ export const TrackPlayBackControl = L.Control.extend({
     }
   },
 
+  _showInfantry(e) {
+    this.trackPlayBack.toggleInfantry(e.target.checked);
+  },
+
+  _showRecon(e) {
+    this.trackPlayBack.toggleRecon(e.target.checked);
+  },
+
+  _showMechanized(e) {
+    this.trackPlayBack.toggleMechanized(e.target.checked);
+  },
+
   _play: function() {
     let hasClass = L.DomUtil.hasClass(this._playBtn, "btn-stop");
     if (hasClass) {
diff --git a/src/track-playback/src/leaflet.trackplayback/draw.js b/src/track-playback/src/leaflet.trackplayback/draw.js
index ba05a447d31c1f556076c475519b2401a460d501..20517c1cf11aa7d2603d2b52457faa07e21508d7 100644
--- a/src/track-playback/src/leaflet.trackplayback/draw.js
+++ b/src/track-playback/src/leaflet.trackplayback/draw.js
@@ -40,6 +40,11 @@ export const Draw = L.Class.extend({
     direction: "top",
     permanent: false
   },
+  filterOptions: {
+    infantry: true,
+    recon: true,
+    mechanized: true
+  },
 
   initialize: function(map, options) {
     L.extend(this.trackPointOptions, options.trackPointOptions);
@@ -189,12 +194,15 @@ export const Draw = L.Class.extend({
     }
     // 画船
     let targetPoint = trackpoints[trackpoints.length - 1];
+    // get info from first trackpoint
     let info = trackpoints[0].info;
-    if (this.targetOptions.useImg && this._targetImg) {
+    // compare icon to filter, draw if true else skip
+    if (this.filterOptions[info[0]["value"].slice(0, -4)]) {
       this._drawShipImage(targetPoint, info);
-    } else {
-      this._drawShipCanvas(targetPoint);
     }
+    /*     else {
+      this._drawShipCanvas(targetPoint);
+    } */
     // 画标注信息
     if (this.targetOptions.showText) {
       this._drawtxt(`航向：${parseInt(targetPoint.dir)}度`, targetPoint);
diff --git a/src/track-playback/src/leaflet.trackplayback/trackplayback.js b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
index 460102ff1b594c01fad7396cb9517366a04242f8..a1188331ed4a0d34884dc096ed7eb295f83f68f1 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackplayback.js
+++ b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
@@ -1,18 +1,10 @@
-import L from 'leaflet'
+import L from "leaflet";
 
-import {
-  Track
-} from './track'
-import {
-  TrackController
-} from './trackcontroller'
-import {
-  Clock
-} from './clock'
-import {
-  Draw
-} from './draw'
-import * as Util from './util'
+import { Track } from "./track";
+import { TrackController } from "./trackcontroller";
+import { Clock } from "./clock";
+import { Draw } from "./draw";
+import * as Util from "./util";
 
 /**
  * single track data
@@ -22,110 +14,121 @@ import * as Util from './util'
  * [single track data, single track data, single track data]
  */
 export const TrackPlayBack = L.Class.extend({
-
   includes: L.Mixin.Events,
 
-  initialize: function (data, map, options = {}) {
+  initialize: function(data, map, options = {}) {
     let drawOptions = {
       trackPointOptions: options.trackPointOptions,
       trackLineOptions: options.trackLineOptions,
       targetOptions: options.targetOptions,
       toolTipOptions: options.toolTipOptions
-    }
-    this.tracks = this._initTracks(data)
-    this.draw = new Draw(map, drawOptions)
-    this.trackController = new TrackController(this.tracks, this.draw)
-    this.clock = new Clock(this.trackController, options.clockOptions)
+    };
+    this.tracks = this._initTracks(data);
+    this.draw = new Draw(map, drawOptions);
+    this.trackController = new TrackController(this.tracks, this.draw);
+    this.clock = new Clock(this.trackController, options.clockOptions);
 
-    this.clock.on('tick', this._tick, this)
+    this.clock.on("tick", this._tick, this);
+  },
+  start: function() {
+    this.clock.start();
+    return this;
+  },
+  stop: function() {
+    this.clock.stop();
+    return this;
+  },
+  rePlaying: function() {
+    this.clock.rePlaying();
+    return this;
   },
-  start: function () {
-    this.clock.start()
-    return this
+  slowSpeed: function() {
+    this.clock.slowSpeed();
+    return this;
   },
-  stop: function () {
-    this.clock.stop()
-    return this
+  quickSpeed: function() {
+    this.clock.quickSpeed();
+    return this;
   },
-  rePlaying: function () {
-    this.clock.rePlaying()
-    return this
+  getSpeed: function() {
+    return this.clock.getSpeed();
   },
-  slowSpeed: function () {
-    this.clock.slowSpeed()
-    return this
+  getCurTime: function() {
+    return this.clock.getCurTime();
   },
-  quickSpeed: function () {
-    this.clock.quickSpeed()
-    return this
+  getStartTime: function() {
+    return this.clock.getStartTime();
   },
-  getSpeed: function () {
-    return this.clock.getSpeed()
+  getEndTime: function() {
+    return this.clock.getEndTime();
   },
-  getCurTime: function () {
-    return this.clock.getCurTime()
+  isPlaying: function() {
+    return this.clock.isPlaying();
   },
-  getStartTime: function () {
-    return this.clock.getStartTime()
+  setCursor: function(time) {
+    this.clock.setCursor(time);
+    return this;
   },
-  getEndTime: function () {
-    return this.clock.getEndTime()
+  setSpeed: function(speed) {
+    this.clock.setSpeed(speed);
+    return this;
   },
-  isPlaying: function () {
-    return this.clock.isPlaying()
+  showTrackPoint: function() {
+    this.draw.showTrackPoint();
+    return this;
   },
-  setCursor: function (time) {
-    this.clock.setCursor(time)
-    return this
+  hideTrackPoint: function() {
+    this.draw.hideTrackPoint();
+    return this;
   },
-  setSpeed: function (speed) {
-    this.clock.setSpeed(speed)
-    return this
+  showTrackLine: function() {
+    this.draw.showTrackLine();
+    return this;
   },
-  showTrackPoint: function () {
-    this.draw.showTrackPoint()
-    return this
+  hideTrackLine: function() {
+    this.draw.hideTrackLine();
+    return this;
   },
-  hideTrackPoint: function () {
-    this.draw.hideTrackPoint()
-    return this
+  toggleInfantry: function(e) {
+    this.draw.filterOptions.infantry = e;
+    return this;
   },
-  showTrackLine: function () {
-    this.draw.showTrackLine()
-    return this
+  toggleRecon: function(e) {
+    this.draw.filterOptions.recon = e;
+    return this;
   },
-  hideTrackLine: function () {
-    this.draw.hideTrackLine()
-    return this
+  toggleMechanized: function(e) {
+    this.draw.filterOptions.mechanized = e;
+    return this;
   },
-  dispose: function () {
-    this.clock.off('tick', this._tick)
-    this.draw.remove()
-    this.tracks = null
-    this.draw = null
-    this.trackController = null
-    this.clock = null
+  dispose: function() {
+    this.clock.off("tick", this._tick);
+    this.draw.remove();
+    this.tracks = null;
+    this.draw = null;
+    this.trackController = null;
+    this.clock = null;
   },
-  _tick: function (e) {
-    this.fire('tick', e)
+  _tick: function(e) {
+    this.fire("tick", e);
   },
-  _initTracks: function (data) {
-    let tracks = []
+  _initTracks: function(data) {
+    let tracks = [];
     if (Util.isArray(data)) {
       if (Util.isArray(data[0])) {
         // 多条轨迹
         for (let i = 0, len = data.length; i < len; i++) {
-          tracks.push(new Track(data[i]))
+          tracks.push(new Track(data[i]));
         }
       } else {
         // 单条轨迹
-        tracks.push(new Track(data))
+        tracks.push(new Track(data));
       }
     }
-    return tracks
+    return tracks;
   }
-})
+});
 
-export const trackplayback = function (data, map, options) {
-  return new TrackPlayBack(data, map, options)
-}
+export const trackplayback = function(data, map, options) {
+  return new TrackPlayBack(data, map, options);
+};