From 57ee5a54b4b0b684317be56615a2a228e64e6a1a Mon Sep 17 00:00:00 2001
From: oldHome <szdot@qq.com>
Date: Tue, 3 Jun 2025 03:50:56 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=94=B9=E5=8F=98=E8=AE=BE=E7=BD=AE=E7=A6=81?=
 =?UTF-8?q?=E9=A3=9E=E5=8C=BA=E7=9A=84=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=20=E5=88=A0=E6=8E=89=E5=88=97=E8=A1=A8=E9=A1=B5=20add=E9=A1=B5?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BAset=E9=A1=B5=202.=E6=9B=B4=E6=94=B9=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E6=97=A0=20=E8=AE=BE=E7=BD=AE=E8=BF=9B=E9=A3=9E?=
 =?UTF-8?q?=E6=9C=BA=E6=97=A0=E5=AD=90=E9=A1=B9=203.=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=A6=81=E9=A3=9E=E5=8C=BA=E6=A0=B7=E5=BC=8F=20=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=20=E7=BA=A2=E8=89=B2=204.=E6=B7=BB=E5=8A=A0=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=8C=89=E9=92=AE=20=20=E4=BF=9D=E5=AD=98=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=8F=8A=E5=85=B6=E5=9B=9E=E8=B0=83=20=20=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 117 +++++++++-
 package.json                                  |   1 +
 src/components/MapBox.vue                     |  42 +++-
 src/router/index.js                           |  29 +--
 src/utils/mapboxgl_plugs/index.js             | 155 +++++++++++++
 .../layout/components/main/nofly/add.vue      | 218 ------------------
 .../layout/components/main/nofly/index.vue    | 125 ----------
 .../layout/components/main/nofly/set.vue      |  80 +++++++
 8 files changed, 396 insertions(+), 371 deletions(-)
 delete mode 100644 src/views/layout/components/main/nofly/add.vue
 delete mode 100644 src/views/layout/components/main/nofly/index.vue
 create mode 100644 src/views/layout/components/main/nofly/set.vue

diff --git a/package-lock.json b/package-lock.json
index d7ee52e..400f0d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,19 @@
 {
   "name": "food",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "food",
-      "version": "0.1.0",
+      "version": "1.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
         "vuex": "^3.4.0"
       },
       "devDependencies": {
+        "@mapbox/mapbox-gl-draw": "^1.5.0",
         "@vue/cli-plugin-babel": "~4.4.0",
         "@vue/cli-plugin-eslint": "~4.4.0",
         "@vue/cli-plugin-router": "~4.4.0",
@@ -1932,6 +1933,24 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/geojson-area": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
+      "integrity": "sha512-bBqqFn1kIbLBfn7Yq1PzzwVkPYQr9lVUeT8Dhd0NL5n76PBuXzOcuLV7GOSbEB1ia8qWxH4COCvFpziEu/yReA==",
+      "dev": true,
+      "dependencies": {
+        "wgs84": "0.0.0"
+      }
+    },
+    "node_modules/@mapbox/geojson-normalize": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
+      "integrity": "sha512-82V7YHcle8lhgIGqEWwtXYN5cy0QM/OHq3ypGhQTbvHR57DF0vMHMjjVSQKFfVXBe/yWCBZTyOuzvK7DFFnx5Q==",
+      "dev": true,
+      "bin": {
+        "geojson-normalize": "geojson-normalize"
+      }
+    },
     "node_modules/@mapbox/geojson-rewind": {
       "version": "0.5.2",
       "resolved": "https://registry.npmmirror.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
@@ -1963,6 +1982,46 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/@mapbox/mapbox-gl-draw": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.5.0.tgz",
+      "integrity": "sha512-uchQbTa8wiv6GWWTbxW1g5b8H6VySz4t91SmduNH6jjWinPze7cjcmsPUEzhySXsYpYr2/50gRJLZz3bx7O88A==",
+      "dev": true,
+      "dependencies": {
+        "@mapbox/geojson-area": "^0.2.2",
+        "@mapbox/geojson-normalize": "^0.0.1",
+        "@mapbox/point-geometry": "^1.1.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.9"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-draw/node_modules/@mapbox/point-geometry": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+      "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+      "dev": true
+    },
+    "node_modules/@mapbox/mapbox-gl-draw/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/@mapbox/mapbox-gl-supported": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
@@ -17064,6 +17123,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/wgs84": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
+      "integrity": "sha512-ANHlY4Rb5kHw40D0NJ6moaVfOCMrp9Gpd1R/AIQYg2ko4/jzcJ+TVXYYF6kXJqQwITvEZP4yEthjM7U6rYlljQ==",
+      "dev": true
+    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -18732,6 +18797,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@mapbox/geojson-area": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
+      "integrity": "sha512-bBqqFn1kIbLBfn7Yq1PzzwVkPYQr9lVUeT8Dhd0NL5n76PBuXzOcuLV7GOSbEB1ia8qWxH4COCvFpziEu/yReA==",
+      "dev": true,
+      "requires": {
+        "wgs84": "0.0.0"
+      }
+    },
+    "@mapbox/geojson-normalize": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz",
+      "integrity": "sha512-82V7YHcle8lhgIGqEWwtXYN5cy0QM/OHq3ypGhQTbvHR57DF0vMHMjjVSQKFfVXBe/yWCBZTyOuzvK7DFFnx5Q==",
+      "dev": true
+    },
     "@mapbox/geojson-rewind": {
       "version": "0.5.2",
       "resolved": "https://registry.npmmirror.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
@@ -18756,6 +18836,33 @@
       "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
       "dev": true
     },
+    "@mapbox/mapbox-gl-draw": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.5.0.tgz",
+      "integrity": "sha512-uchQbTa8wiv6GWWTbxW1g5b8H6VySz4t91SmduNH6jjWinPze7cjcmsPUEzhySXsYpYr2/50gRJLZz3bx7O88A==",
+      "dev": true,
+      "requires": {
+        "@mapbox/geojson-area": "^0.2.2",
+        "@mapbox/geojson-normalize": "^0.0.1",
+        "@mapbox/point-geometry": "^1.1.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.9"
+      },
+      "dependencies": {
+        "@mapbox/point-geometry": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+          "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+          "dev": true
+        },
+        "nanoid": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+          "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+          "dev": true
+        }
+      }
+    },
     "@mapbox/mapbox-gl-supported": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
@@ -30851,6 +30958,12 @@
         }
       }
     },
+    "wgs84": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
+      "integrity": "sha512-ANHlY4Rb5kHw40D0NJ6moaVfOCMrp9Gpd1R/AIQYg2ko4/jzcJ+TVXYYF6kXJqQwITvEZP4yEthjM7U6rYlljQ==",
+      "dev": true
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 4c02c31..5b1cd9e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.5.0",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
     "@vue/cli-plugin-router": "~4.4.0",
diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 22ae424..9ce0d83 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -6,7 +6,7 @@
 
 <script>
 import mapboxgl from 'mapbox-gl'
-import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl } from '@/utils/mapboxgl_plugs'
+import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl, NoFlyControl } from '@/utils/mapboxgl_plugs'
 import planeIcon from '@/assets/svg/plane.svg'
 
 export default {
@@ -159,6 +159,10 @@ export default {
     enblueScale: { // 开启 地图 距离比例 组件
       type: Boolean,
       default: false
+    },
+    enableNofly: { // 禁飞区 设置 组件
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -315,6 +319,41 @@ export default {
           }
         }), 'top-right')
       }
+
+      // 禁飞区 设置组件
+      if (this.enableNofly) {
+        const defaultPolygons = [
+          [
+            [113.0, 23.0],
+            [113.1, 23.0],
+            [113.1, 23.1],
+            [113.0, 23.1],
+            [113.0, 23.0]
+          ],
+          [
+            [113.2, 23.2],
+            [113.3, 23.2],
+            [113.3, 23.3],
+            [113.2, 23.3],
+            [113.2, 23.2]
+          ],
+          [
+            [113.2, 24.2],
+            [113.5, 23.1],
+            [113.5, 23.2],
+            [113.3, 23.2],
+            [113.3, 23.3],
+            [113.2, 23.3],
+            [113.4, 23.2]
+          ]
+        ]
+        this.map.addControl(new NoFlyControl({
+          defaultPolygons,
+          onSave: (polygons) => {
+            console.log('polygons', polygons)
+          }
+        }), 'top-left')
+      }
     },
     /**
      * @description: 清除地图上的航线
@@ -745,4 +784,5 @@ export default {
   background-size: cover;
   cursor: pointer;
 }
+
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 8945643..bf43226 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -105,44 +105,23 @@ const routes = [
   {
     path: '/nofly',
     component: Layout,
-    redirect: '/nofly/index',
+    redirect: '/nofly/set',
     meta: {
-      title: '禁飞区',
+      title: '设置禁飞区',
       icon: 'iconfont icon-feihangluxian',
       roles: ['admin', 'editor'],
       tapName: 'plane'
     },
     children: [
       {
-        path: '/nofly/index',
-        component: () => import('@/views/layout/components/main/route/index'),
+        path: '/nofly/set',
+        component: () => import('@/views/layout/components/main/route/set'),
         meta: {
           title: '禁飞区列表',
           icon: 'iconfont icon-a-05-1-1jihuazhihanggenzong',
           roles: ['admin', 'editor'],
           tapName: 'plane'
         }
-      },
-      {
-        path: '/nofly/add',
-        component: () => import('@/views/layout/components/main/route/add'),
-        meta: {
-          title: '设置禁飞区',
-          icon: 'iconfont icon-huizhi',
-          roles: ['admin', 'editor'],
-          tapName: 'plane'
-        }
-      },
-      {
-        path: '/nofly/edit/:id',
-        component: () => import('@/views/layout/components/main/route/add'),
-        meta: {
-          title: '编辑禁飞区',
-          icon: 'iconfont icon-huizhi',
-          roles: ['admin', 'editor'],
-          tapName: 'plane',
-          hidden: true
-        }
       }
     ]
   },
diff --git a/src/utils/mapboxgl_plugs/index.js b/src/utils/mapboxgl_plugs/index.js
index 1de9233..88c66d7 100644
--- a/src/utils/mapboxgl_plugs/index.js
+++ b/src/utils/mapboxgl_plugs/index.js
@@ -1,4 +1,6 @@
 import mapboxgl from 'mapbox-gl'
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 
 /**
  * 自定义地图样式切换控件
@@ -213,3 +215,156 @@ export class CustomFullscreenControl extends mapboxgl.FullscreenControl {
     this.handleResize() // 调用自定义的 handleResize 方法
   }
 }
+
+// 禁飞区控件
+export class NoFlyControl {
+  constructor (options = {}) {
+    this._map = null
+    this._container = null
+    this._draw = null
+    this._onDrawFinish = options.onDrawFinish || function () {}
+    this._defaultPolygons = options.defaultPolygons || []
+    this._onSave = options.onSave || function () {}
+  }
+
+  onAdd (map) {
+    this._map = map
+
+    // 创建按钮容器
+    this._container = document.createElement('div')
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
+
+    // 绘制按钮
+    const drawButton = document.createElement('button')
+    drawButton.className = 'mapboxgl-ctrl-icon'
+    drawButton.type = 'button'
+    drawButton.innerHTML = '✏️'
+    drawButton.title = '绘制禁飞区'
+    drawButton.onclick = () => this._enableDraw()
+    this._container.appendChild(drawButton)
+
+    // 保存按钮（磁盘图标）
+    const saveButton = document.createElement('button')
+    saveButton.className = 'mapboxgl-ctrl-icon'
+    saveButton.type = 'button'
+    saveButton.innerHTML = '💾'
+    saveButton.title = '保存禁飞区'
+    saveButton.onclick = () => this._savePolygons()
+    this._container.appendChild(saveButton)
+
+    // 删除按钮（仅删除选中的图形）
+    const deleteButton = document.createElement('button')
+    deleteButton.className = 'mapboxgl-ctrl-icon'
+    deleteButton.type = 'button'
+    deleteButton.innerHTML = '🗑️'
+    deleteButton.title = '删除选中图形'
+    deleteButton.onclick = () => this._deleteSelected()
+    this._container.appendChild(deleteButton)
+
+    // 初始化 Draw 控件
+    this._draw = new MapboxDraw({
+      displayControlsDefault: false,
+      styles: [
+        {
+          id: 'gl-draw-polygon-fill',
+          type: 'fill',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          paint: {
+            'fill-color': '#ff0000',
+            'fill-opacity': 0.3
+          }
+        },
+        {
+          id: 'gl-draw-polygon-stroke-active',
+          type: 'line',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          paint: {
+            'line-color': '#ff0000',
+            'line-width': 2
+          }
+        },
+        {
+          id: 'gl-draw-polygon-and-line-vertex-halo-active',
+          type: 'circle',
+          filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point']],
+          paint: {
+            'circle-radius': 7,
+            'circle-color': '#FFF'
+          }
+        },
+        {
+          id: 'gl-draw-polygon-and-line-vertex-active',
+          type: 'circle',
+          filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point']],
+          paint: {
+            'circle-radius': 5,
+            'circle-color': '#f00'
+          }
+        }
+      ]
+    })
+
+    map.addControl(this._draw)
+
+    // 加载默认禁飞区
+    if (this._defaultPolygons.length > 0) {
+      const features = this._defaultPolygons.map(coords => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [coords]
+        },
+        properties: {}
+      }))
+      this._draw.set({
+        type: 'FeatureCollection',
+        features
+      })
+    }
+
+    map.on('draw.create', this._handleDraw.bind(this))
+
+    return this._container
+  }
+
+  onRemove () {
+    if (this._map && this._draw) {
+      this._map.removeControl(this._draw)
+    }
+    if (this._container?.parentNode) {
+      this._container.parentNode.removeChild(this._container)
+    }
+    this._map = null
+  }
+
+  _enableDraw () {
+    if (this._draw && this._map) {
+      this._draw.changeMode('draw_polygon')
+    }
+  }
+
+  _handleDraw (e) {
+    const features = this._draw.getAll()
+    if (features.features.length > 0) {
+      const coordinates = features.features.map(f => f.geometry.coordinates)
+      this._onDrawFinish(coordinates)
+    }
+  }
+
+  _deleteSelected () {
+    if (this._draw) {
+      const selected = this._draw.getSelectedIds()
+      if (selected.length > 0) {
+        this._draw.delete(selected)
+      }
+    }
+  }
+
+  _savePolygons () {
+    if (!this._draw) return
+    const allFeatures = this._draw.getAll()
+    const polygons = allFeatures.features.map(f => f.geometry.coordinates)
+    // 调用传入的保存回调
+    this._onSave(polygons)
+  }
+}
diff --git a/src/views/layout/components/main/nofly/add.vue b/src/views/layout/components/main/nofly/add.vue
deleted file mode 100644
index 67e4f01..0000000
--- a/src/views/layout/components/main/nofly/add.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div class="h-100">
-    <map-box ref="mapbox">
-      <template #content>
-        <el-row class="w-40 m-t-20 m-l-20" style="position: absolute;">
-          <el-col :span="24">
-            <el-container>
-              <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
-                <div class="l">
-                  <i v-if="pageState === 'add'" class="el-icon-plus f-s-20"></i>
-                  <i v-else class="el-icon-edit f-s-20"></i>
-                  <font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
-                </div>
-              </el-header>
-              <el-main class="border p-20 mainBox bg-white">
-                <el-form ref="form" :model="form" label-width="120px">
-                  <el-form-item v-if="pageState === 'add'" label="所属商铺">
-                    <SelectionShopId v-model="form.shop_id" />
-                  </el-form-item>
-                  <el-form-item label="航线标题">
-                    <el-input v-model="form.name" placeholder="航线标题" />
-                  </el-form-item>
-                  <el-form-item label="航线文件上传">
-                    <el-upload class="upload-demo" drag name="file" :action="action" :headers="myheader"
-                      :on-success="handleUpSuccess" :on-exceed="handleExceed" :on-error="handleUpErr"
-                      :on-remove="handleRemove" :limit="1" :file-list="fileList" :before-upload="beforeAvatarUpload">
-                      <i class="el-icon-upload"></i>
-                      <div class="el-upload__text"><em>点击上传</em></div>
-                    </el-upload>
-                  </el-form-item>
-                  <el-form-item label="航线描述">
-                    <el-input v-model="form.desc" type="textarea" placeholder="非必填" />
-                  </el-form-item>
-                  <el-form-item v-if="pageState == 'add' ? true : false">
-                    <el-button type="primary" icon="el-icon-plus" @click="addRoute">创建</el-button>
-                  </el-form-item>
-                  <el-form-item v-else>
-                    <el-button type="primary" icon="el-icon-edit" @click="saveRoute">更新</el-button>
-                  </el-form-item>
-                </el-form>
-              </el-main>
-            </el-container>
-          </el-col>
-        </el-row>
-      </template>
-    </map-box>
-  </div>
-</template>
-
-<script>
-import MapBox from '@/components/MapBox'
-import SelectionShopId from '@/components/SelectionShopId'
-
-export default {
-  name: 'RouteAdd',
-  data () {
-    return {
-      action: this.$store.state.settings.baseURL + this.$store.state.settings.apiPlanePath + 'upTxtFile',
-      myheader: { token: this.$store.state.user.token },
-      form: {
-        shop_id: '',
-        name: '',
-        desc: '',
-        upFile: '',
-        route_data: ''
-      },
-      routeId: this.$route.params.id,
-      fileList: [],
-      pageState: 'add', // 页面状态
-      route: null
-    }
-  },
-  components: {
-    MapBox,
-    SelectionShopId
-  },
-  computed: {
-    /**
-     * @description: 获取航线列表
-     */
-    routeList () {
-      return this.$store.state.routeList
-    }
-  },
-  methods: {
-    /* 文件上传表单 */
-    handleExceed () {
-      this.$message.warning('需先删除之前上传文件')
-    },
-    handleRemove () {
-      this.form.upFile = ''
-    },
-    handleUpSuccess (res) {
-      this.$refs.mapbox.makeRoute(res.content)// 绘出航线
-      if (res.status === 0) {
-        this.fileList = []
-        this.$message.error(res.msg)
-      } else {
-        this.form.upFile = res.data
-        this.$message.success(res.msg)
-      }
-    },
-    handleUpErr () {
-      this.$message.error('接口访问失败')
-    },
-    beforeAvatarUpload (file) {
-      const isTxt = file.type === 'text/plain' || file.type === 'application/json'
-      if (!isTxt) {
-        this.$message.error('航点文件仅支持txt或json格式!')
-      }
-      return isTxt
-    },
-    /* ED 文件上传表单 */
-    // 设置表单
-    setForm (data) {
-      if (data.desc == null) {
-        data.desc = ''
-      }
-      this.form.shop_id = data.shop_id
-      this.form.name = data.name
-      this.form.upFile = data.upFile
-      this.form.desc = data.desc
-      this.form.route_data = data.route_data
-      if (Object.keys(data).length === 0) {
-        this.$message.warning('清空表单')
-      }
-    },
-    // 初始化页面 添加or编辑
-    initPage () {
-      if (this.routeId === undefined) {
-        this.pageState = 'add'
-      } else {
-        this.pageState = 'edit'
-        this.route = this.routeList.find((item) => item.id === this.routeId)
-        if (this.route) {
-          const data = {
-            shop_id: this.route.shop_id,
-            name: this.route.name,
-            route_data: this.route.route_data,
-            upFile: ''
-          }
-          this.setForm(data)
-          setTimeout(() => {
-            this.$refs.mapbox.makeRoute(JSON.parse(this.route.route_data))// 更新页面 绘出航线 初始化
-          }, 0)
-        }
-      }
-    },
-    /**
-     * @description: 创建新站点
-     */
-    async addRoute () {
-      const res = await this.$store.dispatch('fetchAddRoute', this.form)
-      if (res.data.status === 1) {
-        this.$router.push('/route/index')
-      }
-    },
-    /**
-     * @description: 更新站点
-     */
-    async saveRoute () {
-      this.form.id = this.routeId
-      const res = await this.$store.dispatch('fetchSaveRoute', this.form)
-      if (res.data.status === 1) {
-        this.$router.push('/route/index')
-      }
-    }
-  },
-  watch: {
-    routeList () {
-      this.initPage()// 初始化页面
-    }
-  },
-  created () {
-    if (this.routeList.length > 0) {
-      this.initPage()// 初始化页面
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.line {
-  text-align: center;
-}
-
-.el-header,
-.el-main {
-  z-index: 1001;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-</style>
diff --git a/src/views/layout/components/main/nofly/index.vue b/src/views/layout/components/main/nofly/index.vue
deleted file mode 100644
index f7eb553..0000000
--- a/src/views/layout/components/main/nofly/index.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 组合按钮 -->
-    <el-button-group>
-      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/route/add')">添加</el-button>
-      <el-button type="danger" icon="el-icon-delete" @click="deleteRoute(countSelIdArr($refs.myTable.selection))">删除
-      </el-button>
-      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
-    </el-button-group>
-    <!-- 用户select选项 -->
-    <el-button-group class="m-l-20">
-      <SelectionShopId v-model="form.shop_id" :allSel="true" />
-    </el-button-group>
-    <!-- 航线表格 -->
-    <el-table class="m-t-20 w-100" ref="myTable"
-      :data="routeListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
-      <el-table-column align="center" type="selection" width="40">
-      </el-table-column>
-      <el-table-column align="center" prop="id" label="id" width="50">
-      </el-table-column>
-      <el-table-column prop="name" label="任务标题" width="150" min-width="150">
-      </el-table-column>
-      <el-table-column prop="route_data" label="航线" min-width="150" show-overflow-tooltip>
-      </el-table-column>
-      <el-table-column prop="controler" label="操作" width="150" min-width="150">
-        <template slot-scope="scope">
-          <el-button-group>
-            <el-button type="danger" icon="el-icon-delete" @click="deleteRoute([scope.row.id])">删除</el-button>
-          </el-button-group>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
-      :total="routeListArr.length">
-    </el-pagination>
-  </div>
-</template>
-
-<script>
-import { countSelIdArr } from '@/utils'
-import SelectionShopId from '@/components/SelectionShopId'
-
-export default {
-  name: 'Route',
-  data () {
-    return {
-      pageSize: 8, // 每页显示记录条数
-      currentPage: 1, // 当前页
-      form: {
-        shop_id: ''
-      }
-    }
-  },
-  components: {
-    SelectionShopId
-  },
-  computed: {
-    /**
-     * @description: 获取航线列表
-     */
-    routeList () {
-      return this.$store.state.routeList
-    },
-    /**
-     * @description: 过滤掉 不对应客户的 航线列表
-     * @return: 航线列表
-     */
-    routeListArr () {
-      if (this.form.shop_id !== '') {
-        return this.routeList.filter((item) => item.shop_id === this.form.shop_id)
-      } else {
-        return this.routeList
-      }
-    }
-  },
-  methods: {
-    countSelIdArr,
-    /**
-     * @description: 跳转到编辑页面
-     */
-    toEditPage () {
-      const selId = this.countSelIdArr(this.$refs.myTable.selection)
-      switch (selId.length) {
-        case 0:
-          this.$message.error('请选择一条需要编辑的记录')
-          break
-        case 1:
-          this.$router.push('/route/edit/' + selId['0'])
-          break
-        default:
-          this.$message.error('只能选择一条记录')
-      }
-    },
-    /**
-     * @description: 删除航线
-     */
-    deleteRoute (idArr) {
-      this.$store.dispatch('fetchDelRoute', idArr)
-    }
-  },
-  watch: {
-  },
-  created () {
-  },
-  filters: {
-    countSelIdArr
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/theme.scss";
-
-.el-tag {
-  i {
-    vertical-align: middle
-  }
-}
-
-.image-placeholder {
-  position: relative;
-  display: inline-block;
-}
-</style>
diff --git a/src/views/layout/components/main/nofly/set.vue b/src/views/layout/components/main/nofly/set.vue
new file mode 100644
index 0000000..a479c4f
--- /dev/null
+++ b/src/views/layout/components/main/nofly/set.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="h-100">
+    <map-box ref="mapbox" :enableNofly="true"/>
+  </div>
+</template>
+
+<script>
+import MapBox from '@/components/MapBox'
+
+export default {
+  name: 'Nofly',
+  data () {
+    return {
+    }
+  },
+  components: {
+    MapBox
+  },
+  computed: {
+    airList () {
+      return this.$store.state.airList
+    },
+    /**
+     * @description: 侧边栏显隐
+     */
+    isCollapse () {
+      return this.$store.state.app.isCollapse
+    }
+  },
+  methods: {
+    /**
+     * @description: 创建飞机图标
+     */
+    makePlanes (planes) {
+      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
+      planes.forEach((plane, index) => { // 创建所有飞机
+        let planeDefaultLonLat
+        if (localStorage.getItem(plane.name) !== null) { // 从本地缓存 拿飞机得初始位置
+          planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
+          plane.lon = planeDefaultLonLat.lon
+          plane.lat = planeDefaultLonLat.lat
+        } else {
+          plane.lon = 0
+          plane.lat = 0
+        }
+        this.$refs.mapbox.makePlane(plane, index)
+      })
+    }
+  },
+  mounted () {
+    if (this.airList.length > 0) {
+      this.makePlanes(this.airList)// 创建飞机图标
+    }
+  },
+  watch: {
+    /**
+     * @description: 飞机列表更新时候 更新地图
+     */
+    airList: {
+      handler (val) {
+        this.makePlanes(val)
+      }
+    },
+    /**
+     * @description: 侧边栏缩进有变化时 地图重新自适应
+     */
+    isCollapse: {
+      handler (val) {
+        if (val) {
+          this.$refs.mapbox.handleResize()
+        }
+      }
+    }
+  },
+  destroyed () {
+  }
+}
+</script>
+
+<style></style>