diff --git a/_server/editor.js b/_server/editor.js
index 536e0df5..f5c7d0e1 100644
--- a/_server/editor.js
+++ b/_server/editor.js
@@ -159,8 +159,8 @@ editor.prototype.drawInitData = function (icons) {
 }
 editor.prototype.mapInit = function () {
     var ec = document.getElementById('event').getContext('2d');
-    ec.clearRect(0, 0, 416, 416);
-    document.getElementById('event2').getContext('2d').clearRect(0, 0, 416, 416);
+    ec.clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
+    document.getElementById('event2').getContext('2d').clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
     editor.map = [];
     for (var y = 0; y < 13; y++) {
         editor.map[y] = [];
diff --git a/docs/personalization.md b/docs/personalization.md
index 47a807b6..0c2a6075 100644
--- a/docs/personalization.md
+++ b/docs/personalization.md
@@ -18,6 +18,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
 - animate：动画层；主要用来绘制动画，图块的淡入/淡出效果，图块的移动。showImage事件绘制的图片也是在这一层。
 - weather：天气层；主要用来绘制天气（雨/雪）
 - curtain：色调层；用来控制当前楼层的画面色调
+- route：路线层；主要用来绘制勇士的行走路线图
 - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等
 - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。
 
diff --git a/index.html b/index.html
index 95aff62d..b2a606db 100644
--- a/index.html
+++ b/index.html
@@ -114,6 +114,7 @@
         <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
     </div>
diff --git a/libs/actions.js b/libs/actions.js
index d7303b2e..80e802f0 100644
--- a/libs/actions.js
+++ b/libs/actions.js
@@ -429,7 +429,7 @@ actions.prototype.ondown = function (x ,y) {
     }
 
     core.status.downTime = new Date();
-    core.clearMap('ui');
+    core.clearMap('route');
     var pos={'x':x,'y':y}
     core.status.stepPostfix=[];
     core.status.stepPostfix.push(pos);
@@ -482,8 +482,8 @@ actions.prototype.onup = function () {
         var posy=core.status.stepPostfix[0].y;
         core.status.stepPostfix=[];
         if (!core.status.lockControl) {
-            core.canvas.ui.clearRect(0, 0, 416,416);
-            core.canvas.ui.restore();
+            core.clearMap('route');
+            core.canvas.route.restore();
         }
 
         // 长按
diff --git a/libs/control.js b/libs/control.js
index c65ac8c1..4fa4cfe2 100644
--- a/libs/control.js
+++ b/libs/control.js
@@ -286,7 +286,7 @@ control.prototype.resetStatus = function(hero, hard, floorId, route, maps, value
     // 保存的Index
     core.status.saveIndex = core.getLocalStorage('saveIndex2', 1);
 
-    core.status.automaticRoute.clickMoveDirectly = core.getLocalStorage('clickMoveDirectly', true);
+    core.status.automaticRoute.clickMoveDirectly = core.getLocalStorage('clickMoveDirectly', false);
 
     if (core.isset(values))
         core.values = core.clone(values);
@@ -334,7 +334,7 @@ control.prototype.restart = function() {
 ////// 清除自动寻路路线 //////
 control.prototype.clearAutomaticRouteNode = function (x, y) {
     if (core.status.event.id==null)
-        core.canvas.ui.clearRect(x * 32 + 5, y * 32 + 5, 27, 27);
+        core.canvas.route.clearRect(x * 32 + 5, y * 32 + 5, 27, 27);
 }
 
 ////// 停止自动寻路操作 //////
@@ -352,7 +352,7 @@ control.prototype.stopAutomaticRoute = function () {
     core.status.automaticRoute.lastDirection = null;
     core.stopHero();
     if (core.status.automaticRoute.moveStepBeforeStop.length==0)
-        core.canvas.ui.clearRect(0, 0, 416, 416);
+        core.clearMap('route');
 }
 
 ////// 继续剩下的自动寻路操作 //////
@@ -370,7 +370,7 @@ control.prototype.continueAutomaticRoute = function () {
 
 ////// 清空剩下的自动寻路列表 //////
 control.prototype.clearContinueAutomaticRoute = function () {
-    core.canvas.ui.clearRect(0, 0, 416, 416);
+    core.clearMap('route');
     core.status.automaticRoute.moveStepBeforeStop=[];
 }
 
@@ -458,18 +458,18 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
         if (destX == core.status.hero.loc.x && destY == core.status.hero.loc.y){
             moveStep=[];
         } else {
-            core.canvas.ui.clearRect(0, 0, 416, 416);
+            core.clearMap('route');
             return;
         }
     }
     moveStep=moveStep.concat(stepPostfix);
     core.status.automaticRoute.destX=destX;
     core.status.automaticRoute.destY=destY;
-    core.canvas.ui.save();
-    core.canvas.ui.clearRect(0, 0, 416, 416);
-    core.canvas.ui.fillStyle = '#bfbfbf';
-    core.canvas.ui.strokeStyle = '#bfbfbf';
-    core.canvas.ui.lineWidth = 8;
+    core.canvas.route.save();
+    core.clearMap('route');
+    core.canvas.route.fillStyle = '#bfbfbf';
+    core.canvas.route.strokeStyle = '#bfbfbf';
+    core.canvas.route.lineWidth = 8;
     for (var m = 0; m < moveStep.length; m++) {
         if (tempStep == null) {
             step++;
@@ -487,53 +487,53 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
         if (m == moveStep.length - 1) {
             // core.status.automaticRoutingTemp.moveStep.push({'direction': tempStep, 'step': step});
             core.status.automaticRoute.autoStepRoutes.push({'direction': tempStep, 'step': step});
-            core.canvas.ui.fillRect(moveStep[m].x * 32 + 10, moveStep[m].y * 32 + 10, 12, 12);
+            core.canvas.route.fillRect(moveStep[m].x * 32 + 10, moveStep[m].y * 32 + 10, 12, 12);
         }
         else {
-            core.canvas.ui.beginPath();
+            core.canvas.route.beginPath();
             if (core.isset(moveStep[m + 1]) && tempStep != moveStep[m + 1].direction) {
                 if (tempStep == 'up' && moveStep[m + 1].direction == 'left' || tempStep == 'right' && moveStep[m + 1].direction == 'down') {
-                    core.canvas.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
+                    core.canvas.route.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
                 }
                 else if (tempStep == 'up' && moveStep[m + 1].direction == 'right' || tempStep == 'left' && moveStep[m + 1].direction == 'down') {
-                    core.canvas.ui.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
+                    core.canvas.route.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
                 }
                 else if (tempStep == 'left' && moveStep[m + 1].direction == 'up' || tempStep == 'down' && moveStep[m + 1].direction == 'right') {
-                    core.canvas.ui.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
+                    core.canvas.route.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
                 }
                 else if (tempStep == 'right' && moveStep[m + 1].direction == 'up' || tempStep == 'down' && moveStep[m + 1].direction == 'left') {
-                    core.canvas.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
+                    core.canvas.route.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
                 }
-                core.canvas.ui.stroke();
+                core.canvas.route.stroke();
                 continue;
             }
             switch (tempStep) {
                 case 'up':
                 case 'down':
-                    core.canvas.ui.beginPath();
-                    core.canvas.ui.moveTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
-                    core.canvas.ui.stroke();
+                    core.canvas.route.beginPath();
+                    core.canvas.route.moveTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
+                    core.canvas.route.stroke();
                     break;
                 case 'left':
                 case 'right':
-                    core.canvas.ui.beginPath();
-                    core.canvas.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.lineTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
-                    core.canvas.ui.stroke();
+                    core.canvas.route.beginPath();
+                    core.canvas.route.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
+                    core.canvas.route.lineTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
+                    core.canvas.route.stroke();
                     break;
             }
         }
     }
-    core.canvas.ui.restore();
+    core.canvas.route.restore();
 
     // 立刻移动
     core.setAutoHeroMove();
@@ -632,7 +632,7 @@ control.prototype.automaticRoute = function (destX, destY) {
 
 ////// 显示离散的寻路点 //////
 control.prototype.fillPosWithPoint = function (pos) {
-    core.fillRect('ui', pos.x*32+12,pos.y*32+12,8,8, '#bfbfbf');
+    core.fillRect('route', pos.x*32+12,pos.y*32+12,8,8, '#bfbfbf');
 }
 
 ////// 设置勇士的自动行走路线 //////
@@ -759,7 +759,7 @@ control.prototype.turnHero = function() {
     else if (core.status.hero.loc.direction == 'down') core.status.hero.loc.direction = 'left';
     else if (core.status.hero.loc.direction == 'left') core.status.hero.loc.direction = 'up';
     core.drawHero();
-    core.canvas.ui.clearRect(0, 0, 416, 416);
+    core.clearMap('route');
     core.status.route.push("turn");
 }
 
diff --git a/libs/core.js b/libs/core.js
index 6f569e0b..93f24225 100644
--- a/libs/core.js
+++ b/libs/core.js
@@ -77,7 +77,7 @@ function core() {
         scale: 1.0,
     }
     this.bigmap = {
-        canvas: ["bg", "event", "event2", "fg"],
+        canvas: ["bg", "event", "event2", "fg", "route"],
         offsetX: 0, // in pixel
         offsetY: 0,
         width: 13, // map width and height
@@ -116,7 +116,7 @@ function core() {
             'cursorX': null,
             'cursorY': null,
             "moveDirectly": false,
-            'clickMoveDirectly': true,
+            'clickMoveDirectly': false,
         },
 
         // 按下键的时间：为了判定双击
diff --git a/styles.css b/styles.css
index d85e7d5f..0983974a 100644
--- a/styles.css
+++ b/styles.css
@@ -288,6 +288,10 @@ span#poison, span#weak, span#curse {
     z-index: 80;
 }
 
+#route {
+    z-index: 105;
+}
+
 #ui {
     z-index: 110;
 }