diff --git a/css/maptalks.control.compass.css b/css/maptalks.control.compass.css
index 041a6ce..8535ecb 100644
--- a/css/maptalks.control.compass.css
+++ b/css/maptalks.control.compass.css
@@ -4,22 +4,15 @@
   border-radius: 50%; }
   .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock {
     position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
     width: 2px;
-    height: 40px;
-    left: calc(50% - 1px); }
-    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock::before, .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock::after {
-      content: '\20';
-      display: block;
-      width: 2px;
-      background: white; }
-    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(odd)::before, .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(odd)::after {
-      height: 8px; }
-    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(odd)::after {
-      margin-top: 24px; }
-    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(even)::before, .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(even)::after {
-      height: 4px; }
-    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(even)::after {
-      margin-top: 32px; }
+    height: 40px; }
+    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(odd) {
+      background: linear-gradient(white 8px, transparent 8px, transparent calc(100% - 8px), white calc(100% - 8px)); }
+    .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(even) {
+      background: linear-gradient(white 4px, transparent 4px, transparent calc(100% - 4px), white calc(100% - 4px)); }
     .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(1) {
       transform: rotate(0deg); }
     .maptalks-compass .maptalks-compass-dial .maptalks-compass-dial-clock:nth-child(2) {
@@ -30,24 +23,27 @@
       transform: rotate(135deg); }
   .maptalks-compass .maptalks-compass-needle {
     position: absolute;
-    width: 100%;
-    top: 50%; }
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%; }
     .maptalks-compass .maptalks-compass-needle::before, .maptalks-compass .maptalks-compass-needle::after {
       content: '';
       position: absolute;
-      width: 0;
-      height: 0;
+      margin: auto;
+      left: 0;
+      right: 0;
       border-style: solid;
-      left: 16px; }
+      width: 0; }
     .maptalks-compass .maptalks-compass-needle::before {
-      top: 0;
-      border-width: 20px 4px 0;
-      border-color: white transparent transparent;
-      transform-origin: top center; }
-    .maptalks-compass .maptalks-compass-needle::after {
-      top: -20px;
+      bottom: 50%;
       border-width: 0 4px 20px;
       border-color: transparent transparent red;
       transform-origin: bottom center; }
+    .maptalks-compass .maptalks-compass-needle::after {
+      top: 50%;
+      border-width: 20px 4px 0;
+      border-color: white transparent transparent;
+      transform-origin: top center; }
 
 /*# sourceMappingURL=maptalks.control.compass.css.map */
diff --git a/css/maptalks.control.compass.css.map b/css/maptalks.control.compass.css.map
index 1a1b8a9..d4407ae 100644
--- a/css/maptalks.control.compass.css.map
+++ b/css/maptalks.control.compass.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAOA,iBAAkB;EACd,KAAK,EAHC,IAAU;EAIhB,MAAM,EAJA,IAAU;EAKhB,aAAa,EAAE,GAAG;EAEd,qEAA6B;IACzB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAdL,GAAG;IAeH,MAAM,EAVR,IAAU;IAWR,IAAI,EAAE,eAA6B;IACnC,2JACS;MACL,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,KAAK;MACd,KAAK,EArBT,GAAG;MAsBC,UAAU,EAAE,KAAK;IAGjB,yLACS;MACL,MAAM,EAzBjB,GAAS;IA2BF,2FAAS;MACL,UAAU,EAAE,IAA0B;IAI1C,2LACS;MACL,MAAM,EAnCnB,GAAG;IAqCM,4FAAS;MACL,UAAU,EAAE,IAAwB;IAIxC,kFAAmB;MACf,SAAS,EAAE,YAA2B;IAD1C,kFAAmB;MACf,SAAS,EAAE,aAA2B;IAD1C,kFAAmB;MACf,SAAS,EAAE,aAA2B;IAD1C,kFAAmB;MACf,SAAS,EAAE,cAA2B;EAMtD,0CAAyB;IACrB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,GAAG,EAAE,GAAG;IACR,qGACS;MACL,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,QAAQ;MAClB,KAAK,EAAE,CAAC;MACR,MAAM,EAAE,CAAC;MACT,YAAY,EAAE,KAAK;MACnB,IAAI,EA1DP,IAAS;IA4DV,kDAAU;MACN,GAAG,EAAE,CAAC;MACN,YAAY,EAAE,UAAe;MAC7B,YAAY,EAAE,6BAA6B;MAC3C,gBAAgB,EAAE,UAAU;IAEhC,iDAAS;MACL,GAAG,EAAE,KAAQ;MACb,YAAY,EAAE,UAAe;MAC7B,YAAY,EAAE,2BAA2B;MACzC,gBAAgB,EAAE,aAAa",
+"mappings": "AAeA,iBAAkB;EACd,KAAK,EAXM,IAAgB;EAY3B,MAAM,EAZK,IAAgB;EAa3B,aAAa,EAAE,GAAG;EAEd,qEAA6B;IAXjC,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IAUA,KAAK,EAtBJ,GAAG;IAuBJ,MAAM,EAlBH,IAAgB;IAmBnB,oFAAiB;MACb,UAAU,EAAE,iGAKX;IAEL,qFAAkB;MACd,UAAU,EAAE,iGAKX;IAGD,kFAAmB;MACf,SAAS,EAAE,YAA2B;IAD1C,kFAAmB;MACf,SAAS,EAAE,aAA2B;IAD1C,kFAAmB;MACf,SAAS,EAAE,aAA2B;IAD1C,kFAAmB;MACf,SAAS,EAAE,cAA2B;EAMtD,0CAAyB;IACrB,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,qGACS;MACL,OAAO,EAAE,EAAE;MA/CnB,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,IAAI;MACZ,IAAI,EAAE,CAAC;MACP,KAAK,EAAE,CAAC;MA8CA,YAAY,EAAE,KAAK;MACnB,KAAK,EAAE,CAAC;IAEZ,kDAAU;MACN,MAAM,EAAE,GAAG;MACX,YAAY,EAAE,UAA+B;MAC7C,YAAY,EAAE,2BAA2B;MACzC,gBAAgB,EAAE,aAAa;IAEnC,iDAAS;MACL,GAAG,EAAE,GAAG;MACR,YAAY,EAAE,UAA+B;MAC7C,YAAY,EAAE,6BAA6B;MAC3C,gBAAgB,EAAE,UAAU",
 "sources": ["maptalks.control.compass.scss"],
 "names": [],
 "file": "maptalks.control.compass.css"
diff --git a/css/maptalks.control.compass.scss b/css/maptalks.control.compass.scss
index 4ddf353..4669745 100644
--- a/css/maptalks.control.compass.scss
+++ b/css/maptalks.control.compass.scss
@@ -1,44 +1,42 @@
-$dialWidth: 2px;
-$size: 4px;
-$sizeX2: $size * 2;
-$sizeX4: $size * 4;
-$sizeX5: $size * 5;
-$sizeX10: $size * 10;
+$dial-width: 2px !default;
+$dial-height: $dial-width * 2;
+$dial-height-even: $dial-height;
+$dial-height-odd: $dial-height * 2;
+
+$compass-size: $dial-width * 20;
+$compass-size-hf: $compass-size / 2;
+
+@mixin margin-middle() {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+}
 
 .maptalks-compass {
-    width: $sizeX10;
-    height: $sizeX10;
+    width: $compass-size;
+    height: $compass-size;
     border-radius: 50%;
     .maptalks-compass-dial {
         .maptalks-compass-dial-clock {
-            position: absolute;
-            width: $dialWidth;
-            height: $sizeX10;
-            left: calc(50% - #{$dialWidth / 2});
-            &::before,
-            &::after {
-                content: '\20';
-                display: block;
-                width: $dialWidth;
-                background: white;
-            }
+            @include margin-middle;
+            width: $dial-width;
+            height: $compass-size;
             &:nth-child(odd) {
-                &::before,
-                &::after {
-                    height: $sizeX2;
-                }
-                &::after {
-                    margin-top: ($sizeX10 - ($sizeX2 * 2));
-                }
+                background: linear-gradient(
+                    white $dial-height-odd,
+                    transparent $dial-height-odd,
+                    transparent calc(100% - #{$dial-height-odd}),
+                    white calc(100% - #{$dial-height-odd})
+                );
             }
             &:nth-child(even) {
-                &::before,
-                &::after {
-                    height: $size;
-                }
-                &::after {
-                    margin-top: ($sizeX10 - ($size * 2));
-                }
+                background: linear-gradient(
+                    white $dial-height-even,
+                    transparent $dial-height-even,
+                    transparent calc(100% - #{$dial-height-even}),
+                    white calc(100% - #{$dial-height-even})
+                );
             }
             @for $i from 1 through 4 {
                 &:nth-child(#{$i}) {
@@ -50,28 +48,28 @@ $sizeX10: $size * 10;
 
     .maptalks-compass-needle {
         position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
         width: 100%;
-        top: 50%;
         &::before,
         &::after {
             content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
+            @include margin-middle;
             border-style: solid;
-            left: $sizeX4;
+            width: 0;
         }
         &::before {
-            top: 0;
-            border-width: $sizeX5 $size 0;
-            border-color: white transparent transparent;
-            transform-origin: top center;
-        }
-        &::after {
-            top: -$sizeX5;
-            border-width: 0 $size $sizeX5;
+            bottom: 50%;
+            border-width: 0 $dial-height $compass-size-hf;
             border-color: transparent transparent red;
             transform-origin: bottom center;
         }
+        &::after {
+            top: 50%;
+            border-width: $compass-size-hf $dial-height 0;
+            border-color: white transparent transparent;
+            transform-origin: top center;
+        }
     }
 }
diff --git a/dist/maptalks.control.compass.es.js b/dist/maptalks.control.compass.es.js
index 00a31a9..b35abe7 100644
--- a/dist/maptalks.control.compass.es.js
+++ b/dist/maptalks.control.compass.es.js
@@ -48,25 +48,25 @@ var CompassControl = function (_maptalks$control$Con) {
 
     CompassControl.prototype.onAdd = function onAdd() {
         this.map = this.getMap();
-        this.map.on('mousemove animating', this._rotateCompass, this);
+        this.map.on('animating mousemove touchmove', this._rotateCompass, this);
         this._rotateCompass();
     };
 
     CompassControl.prototype.onRemove = function onRemove() {
-        this.map.off('mousemove animating', this._rotateCompass, this);
+        this.map.off('animating mousemove touchmove', this._rotateCompass, this);
         this._compass.remove();
-        delete this._deg;
         delete this._compass;
+        delete this._bearing;
         delete this._needle;
         delete this.map;
     };
 
     CompassControl.prototype._rotateCompass = function _rotateCompass() {
-        var bearing = parseInt(this.map.getBearing(), 0);
+        var bearing = this.map.getBearing().toFixed(1);
         if (bearing <= 180) bearing *= -1;
-        if (bearing !== parseInt(this._deg, 0)) {
-            this._deg = bearing;
-            maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._deg + 'deg);');
+        if (bearing !== this._bearing) {
+            this._bearing = bearing;
+            maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._bearing + 'deg);');
         }
     };
 
diff --git a/dist/maptalks.control.compass.js b/dist/maptalks.control.compass.js
index cef91d9..b30b867 100644
--- a/dist/maptalks.control.compass.js
+++ b/dist/maptalks.control.compass.js
@@ -54,25 +54,25 @@ var CompassControl = function (_maptalks$control$Con) {
 
     CompassControl.prototype.onAdd = function onAdd() {
         this.map = this.getMap();
-        this.map.on('mousemove animating', this._rotateCompass, this);
+        this.map.on('animating mousemove touchmove', this._rotateCompass, this);
         this._rotateCompass();
     };
 
     CompassControl.prototype.onRemove = function onRemove() {
-        this.map.off('mousemove animating', this._rotateCompass, this);
+        this.map.off('animating mousemove touchmove', this._rotateCompass, this);
         this._compass.remove();
-        delete this._deg;
         delete this._compass;
+        delete this._bearing;
         delete this._needle;
         delete this.map;
     };
 
     CompassControl.prototype._rotateCompass = function _rotateCompass() {
-        var bearing = parseInt(this.map.getBearing(), 0);
+        var bearing = this.map.getBearing().toFixed(1);
         if (bearing <= 180) bearing *= -1;
-        if (bearing !== parseInt(this._deg, 0)) {
-            this._deg = bearing;
-            maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._deg + 'deg);');
+        if (bearing !== this._bearing) {
+            this._bearing = bearing;
+            maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._bearing + 'deg);');
         }
     };
 
diff --git a/dist/maptalks.control.compass.min.js b/dist/maptalks.control.compass.min.js
index 9535f54..b74328d 100644
--- a/dist/maptalks.control.compass.min.js
+++ b/dist/maptalks.control.compass.min.js
@@ -6,4 +6,4 @@
 /*!
  * requires maptalks@>=0.31.0 
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.maptalks=t.maptalks||{})}(this,function(t){"use strict";function e(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):function(t,e){for(var o=Object.getOwnPropertyNames(e),s=0;s<o.length;s++){var a=o[s],i=Object.getOwnPropertyDescriptor(e,a);i&&i.configurable&&void 0===t[a]&&Object.defineProperty(t,a,i)}}(t,e))}var o,s=(e(a,o=maptalks.control.Control),a.prototype.buildOn=function(){var t=this._getCompass();this._compass=t;var e=this.options.transform,o="background-color: "+this.options.backgroundColor+";";return e&&(o+=" transform: "+e+";"),maptalks.DomUtil.setStyle(this._compass,o),t},a.prototype.onAdd=function(){this.map=this.getMap(),this.map.on("mousemove animating",this._rotateCompass,this),this._rotateCompass()},a.prototype.onRemove=function(){this.map.off("mousemove animating",this._rotateCompass,this),this._compass.remove(),delete this._deg,delete this._compass,delete this._needle,delete this.map},a.prototype._rotateCompass=function(){var t=parseInt(this.map.getBearing(),0);t<=180&&(t*=-1),t!==parseInt(this._deg,0)&&(this._deg=t,maptalks.DomUtil.setStyle(this._needle,"transform: rotate("+this._deg+"deg);"))},a.prototype._getCompass=function(){var t=this._createDivWithClassName(this.COMPASS),e=this._getDial(),o=this._getNeedle();return t.appendChild(e),t.appendChild(o),t},a.prototype._getDial=function(){for(var t=this._createDivWithClassName(this.DIAL),e=0;e<4;e++){var o=this._getClock();t.appendChild(o)}return t},a.prototype._getClock=function(){return this._createDivWithClassName(this.CLOCK)},a.prototype._getNeedle=function(){var t=this._createDivWithClassName(this.NEEDLE);return this._needle=t},a.prototype._createDivWithClassName=function(t){return maptalks.DomUtil.createEl("div",t)},a);function a(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,a);var e=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,o.call(this,t));return e.COMPASS="maptalks-compass",e.DIAL="maptalks-compass-dial",e.NEEDLE="maptalks-compass-needle",e.CLOCK="maptalks-compass-dial-clock",e}s.mergeOptions({position:"top-right",backgroundColor:"#172029",transform:""}),t.CompassControl=s,Object.defineProperty(t,"__esModule",{value:!0}),"undefined"!=typeof console&&console.log("maptalks.control.compass v0.1.3, requires maptalks@>=0.31.0.")});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.maptalks=t.maptalks||{})}(this,function(t){"use strict";function e(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):function(t,e){for(var o=Object.getOwnPropertyNames(e),s=0;s<o.length;s++){var i=o[s],a=Object.getOwnPropertyDescriptor(e,i);a&&a.configurable&&void 0===t[i]&&Object.defineProperty(t,i,a)}}(t,e))}var o,s=(e(i,o=maptalks.control.Control),i.prototype.buildOn=function(){var t=this._getCompass();this._compass=t;var e=this.options.transform,o="background-color: "+this.options.backgroundColor+";";return e&&(o+=" transform: "+e+";"),maptalks.DomUtil.setStyle(this._compass,o),t},i.prototype.onAdd=function(){this.map=this.getMap(),this.map.on("animating mousemove touchmove",this._rotateCompass,this),this._rotateCompass()},i.prototype.onRemove=function(){this.map.off("animating mousemove touchmove",this._rotateCompass,this),this._compass.remove(),delete this._compass,delete this._bearing,delete this._needle,delete this.map},i.prototype._rotateCompass=function(){var t=this.map.getBearing().toFixed(1);t<=180&&(t*=-1),t!==this._bearing&&(this._bearing=t,maptalks.DomUtil.setStyle(this._needle,"transform: rotate("+this._bearing+"deg);"))},i.prototype._getCompass=function(){var t=this._createDivWithClassName(this.COMPASS),e=this._getDial(),o=this._getNeedle();return t.appendChild(e),t.appendChild(o),t},i.prototype._getDial=function(){for(var t=this._createDivWithClassName(this.DIAL),e=0;e<4;e++){var o=this._getClock();t.appendChild(o)}return t},i.prototype._getClock=function(){return this._createDivWithClassName(this.CLOCK)},i.prototype._getNeedle=function(){var t=this._createDivWithClassName(this.NEEDLE);return this._needle=t},i.prototype._createDivWithClassName=function(t){return maptalks.DomUtil.createEl("div",t)},i);function i(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i);var e=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,o.call(this,t));return e.COMPASS="maptalks-compass",e.DIAL="maptalks-compass-dial",e.NEEDLE="maptalks-compass-needle",e.CLOCK="maptalks-compass-dial-clock",e}s.mergeOptions({position:"top-right",backgroundColor:"#172029",transform:""}),t.CompassControl=s,Object.defineProperty(t,"__esModule",{value:!0}),"undefined"!=typeof console&&console.log("maptalks.control.compass v0.1.3, requires maptalks@>=0.31.0.")});
\ No newline at end of file
diff --git a/dist/maptalks.control.compass.min.js.gz b/dist/maptalks.control.compass.min.js.gz
index 71d6ab5..ccf6c4f 100644
Binary files a/dist/maptalks.control.compass.min.js.gz and b/dist/maptalks.control.compass.min.js.gz differ
diff --git a/index.js b/index.js
index ab16efc..0c5207a 100644
--- a/index.js
+++ b/index.js
@@ -26,27 +26,27 @@ export class CompassControl extends maptalks.control.Control {
 
     onAdd() {
         this.map = this.getMap()
-        this.map.on('mousemove animating', this._rotateCompass, this)
+        this.map.on('animating mousemove touchmove', this._rotateCompass, this)
         this._rotateCompass()
     }
 
     onRemove() {
-        this.map.off('mousemove animating', this._rotateCompass, this)
+        this.map.off('animating mousemove touchmove', this._rotateCompass, this)
         this._compass.remove()
-        delete this._deg
         delete this._compass
+        delete this._bearing
         delete this._needle
         delete this.map
     }
 
     _rotateCompass() {
-        let bearing = parseInt(this.map.getBearing(), 0)
+        let bearing = this.map.getBearing().toFixed(1)
         if (bearing <= 180) bearing *= -1
-        if (bearing !== parseInt(this._deg, 0)) {
-            this._deg = bearing
+        if (bearing !== this._bearing) {
+            this._bearing = bearing
             maptalks.DomUtil.setStyle(
                 this._needle,
-                `transform: rotate(${this._deg}deg);`
+                `transform: rotate(${this._bearing}deg);`
             )
         }
     }