diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/server.js b/src/api/server.js
new file mode 100644
index 0000000..51c3f45
--- /dev/null
+++ b/src/api/server.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取服务列表
+export function getServerList(params) {
+  return request({
+    url: '/map/server/listPage',
+    method: 'get',
+    params: params
+  })
+}
+// 编辑服务地址
+export function serverEdit(params) {
+  return request({
+    url: '/map/server/edit',
+    method: 'post',
+    params: params
+  })
+}

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/server.js b/src/api/server.js
new file mode 100644
index 0000000..51c3f45
--- /dev/null
+++ b/src/api/server.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取服务列表
+export function getServerList(params) {
+  return request({
+    url: '/map/server/listPage',
+    method: 'get',
+    params: params
+  })
+}
+// 编辑服务地址
+export function serverEdit(params) {
+  return request({
+    url: '/map/server/edit',
+    method: 'post',
+    params: params
+  })
+}
diff --git a/src/main.js b/src/main.js
index 27566d4..fa430f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@
 import 'leaflet.pm'
 import 'leaflet.pm/dist/leaflet.pm.css'
 import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import 'esri-leaflet/dist/esri-leaflet.js'
+import 'esri-leaflet-renderers/dist/esri-leaflet-renderers.js'
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/server.js b/src/api/server.js
new file mode 100644
index 0000000..51c3f45
--- /dev/null
+++ b/src/api/server.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取服务列表
+export function getServerList(params) {
+  return request({
+    url: '/map/server/listPage',
+    method: 'get',
+    params: params
+  })
+}
+// 编辑服务地址
+export function serverEdit(params) {
+  return request({
+    url: '/map/server/edit',
+    method: 'post',
+    params: params
+  })
+}
diff --git a/src/main.js b/src/main.js
index 27566d4..fa430f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@
 import 'leaflet.pm'
 import 'leaflet.pm/dist/leaflet.pm.css'
 import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import 'esri-leaflet/dist/esri-leaflet.js'
+import 'esri-leaflet-renderers/dist/esri-leaflet-renderers.js'
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
diff --git a/src/views/overview/listoverview.vue b/src/views/overview/listoverview.vue
index aa58e6f..86a422b 100644
--- a/src/views/overview/listoverview.vue
+++ b/src/views/overview/listoverview.vue
@@ -21,7 +21,8 @@
         <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" size="small" clearable value=""/>
       </search-item>
     </search-area>
-
+    <el-checkbox v-model="showBase" style="position: absolute;top: 20px;right: 100px">矢量</el-checkbox>
+    <el-checkbox v-model="showImg" style="position: absolute;top: 20px;right: 50px">影像</el-checkbox>
     <div id="map">
       <!--查询结果Table显示-->
       <div slot="header" class="rightcard" >
@@ -60,7 +61,7 @@
         <i v-if="showtable==false" class="el-icon-arrow-right" style="position:absolute; right:20px;top:20px;margin-top:-8px;"/>
       </div>
 
-      <el-table v-if="showtable==true" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
+      <el-table v-if="showtable==true" :row-style="{height: '35px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
@@ -93,445 +94,366 @@
   </app-container>
 </template>
 <script>
-import editCarInfo from '@/views/carinfo/editCarInfo'
-import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
-import { getDictCode } from '@/api/dict'
-import DeptSelect from '@/components/DeptSelect'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
-
-export default {
-  name: 'ListOverview',
-  components: { DeptSelect, editCarInfo },
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '30',
-      online: 0,
-      offline: 0,
-      showtable: true,
-      deptShow: true,
-      listQuery: {
-        description: '',
-        carCode: '',
-        carType: '',
-        deptId: '',
-        offset: 1,
-        limit: 15
-      }, // 查询条件
-      columns: [
-        {
-          text: '车辆描述',
-          value: 'description',
-          align: 'center'
+  import editCarInfo from '@/views/carinfo/editCarInfo'
+  import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
+  import { getDictCode } from '@/api/dict'
+  import DeptSelect from '@/components/DeptSelect'
+  import { getServerList } from '@/api/server'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+  var esri = require('esri-leaflet')
+  export default {
+    name: 'ListOverview',
+    components: { DeptSelect, editCarInfo },
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '30',
+        showBase:false,
+        showImg:true,
+        online: 0,
+        offline: 0,
+        showtable: true,
+        deptShow: true,
+        listQuery: {
+          description: '',
+          carCode: '',
+          carType: '',
+          deptId: '',
+          offset: 1,
+          limit: 15
+        }, // 查询条件
+        columns: [
+          {
+            text: '车辆描述',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '车牌号',
+            value: 'carCode',
+            align: 'center',
+            width: 90
+          },
+          {
+            text: '状态',
+            value: 'status',
+            align: 'center',
+            width: 70
+          }
+        ], // 动态加载的表头
+        TianDiTu: {
+          Normal: {
+            Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Satellite: {
+            Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Terrain: {
+            Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
         },
-        {
-          text: '车牌号',
-          value: 'carCode',
-          align: 'center',
-          width: 90
-        },
-        {
-          text: '状态',
-          value: 'status',
-          align: 'center',
-          width: 70
-        }
-      ], // 动态加载的表头
-      TianDiTu: {
-        Normal: {
-          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Satellite: {
-          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Terrain: {
-          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+        pointlayer: null,
+        imglayer: null,
+        featurelayer: null,
+        baselayer: [],
+        baseUrl: '',
+        mapUrl: '',
+        list: [], // 列表数据
+        alllist: [], // 列表数据
+        map: null,
+        initlocation: false,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        // listLoading: true, // 加载动画
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      showBase(val) {
+        if(val)  this.map.addLayer(this.featurelayer)
+        else this.map.removeLayer(this.featurelayer)
       },
-      baselayer: [],
-      list: [], // 列表数据
-      alllist: [], // 列表数据
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      // listLoading: true, // 加载动画
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+      showImg(val) {
+        if(val)  this.map.addLayer(this.imglayer)
+        else this.map.removeLayer(this.imglayer)
+      },
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      getDictCode('carType').then(response => {
+        this.cartypelist = response.data
+      })
+      this.initMap()
+      setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      dbSelected(row) {
+        this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
+      },
+      tableclick() {
+        this.showtable = !this.showtable
+      },
+      detail(id) {
+        this.dialogFormVisible = true
+        var item = { id: id }
+        this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
+      },
+      track(id) {
+        this.$router.push({
+          name: 'Track',
+          query: {
+            id: id
+          }
+        })
+      },
+      trail(id, row) {
+        this.$router.push({
+          name: 'Trail',
+          query: {
+            id: id,
+            name: row.carCode + '-' + row.carTypeName
+          }
+        })
+      },
+      async initMap() {
+        const map = L.map('map', {
+          minZoom: 3,
+          maxZoom: 18,
+          center: [27.75962, 116.06021],
+          zoom: 16,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG3857
+        })
+        map.doubleClickZoom.disable()
+        this.map = map // data上需要挂载
+        window.map = map
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.imglayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        }).addTo(map)
+        var  listQuery={
+          offset: 1,
+          limit: 15
+        }
+        const res = await getServerList(listQuery)
+        var list = res.data.rows
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].name === 'GIS地图') {
+            this.baseUrl = list[i].url
+          } else if (list[i].name === '二维地图URL') {
+            this.mapUrl = list[i].url
+          }
+        }
+        this.featurelayer = esri.dynamicMapLayer({
+          url: this.baseUrl + this.mapUrl,
+          minZoom: 4, // 最小缩放等级
+          maxZoom: 21// 最大缩放等级
+        })
+        this.fetchData()
+      },
+      search() {
+        this.fetchData(false)
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchCar()
-      }
-    }
-  },
-  mounted() {
-    getDictCode('carType').then(response => {
-      this.cartypelist = response.data
-    })
-    this.initMap()
-    this.fetchData()
-    setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    dbSelected(row) {
-      this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
-    },
-    tableclick() {
-      this.showtable = !this.showtable
-    },
-    detail(id) {
-      this.dialogFormVisible = true
-      var item = { id: id }
-      this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
-    },
-    track(id) {
-      this.$router.push({
-        name: 'Track',
-        query: {
-          id: id
+      },
+      setZoom(points) {
+        // console.log(points)
+        if (points.length > 0) {
+          var maxLng = points[0][1]
+          var minLng = points[0][1]
+          var maxLat = points[0][0]
+          var minLat = points[0][0]
+          var res
+          for (var i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+          var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+          this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+        } else {
+          // 没有坐标，显示全中国
+          this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
         }
-      })
-    },
-    trail(id, row) {
-      this.$router.push({
-        name: 'Trail',
-        query: {
-          id: id,
-          name: row.carCode + '-' + row.carTypeName
+      },
+      getZoom(maxLng, minLng, maxLat, minLat) {
+        var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
+        var latlng = L.latLng(maxLat, maxLng)
+        var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+        // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+          if (zoom[i] - distance > 0) {
+            return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+          }
         }
-      })
-    },
-    initMap() {
-      const map = L.map('map', {
-        minZoom: 3,
-        maxZoom: 18,
-        center: [27.75962, 116.06021],
-        zoom: 11,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      map.doubleClickZoom.disable()
-      this.map = map // data上需要挂载
-      window.map = map
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-    },
-    search() {
-      this.fetchData(false)
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    setZoom(points) {
-      // console.log(points)
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
+      },
+      fetchData(isNowPage = true) {
+        offlineCount(this.listQuery).then(response => {
+          this.online = response.data.online
+          this.offline = response.data.offline
+        })
+        this.sec = Number(this.refresh)
+        if (!isNowPage) {
+          this.listQuery.offset = 1
         }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-    },
-    setCenter(points) {
-      // 获取折线中心点坐标
-      if (points.length > 0) {
-        let maxLng = points[0][1]
-        let minLng = points[0][1]
-        let maxLat = points[0][0]
-        let minLat = points[0][0]
-        let res
-        for (let i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+        getOverviewList(this.listQuery).then(response => {
+          this.list = response.data.rows
+          this.total = parseInt(response.data.total)
+        })
+        getOverviewAllList(this.listQuery).then(response => {
+          this.alllist = response.data
+          if(this.pointlayer!==null) this.map.removeLayer(this.pointlayer)
+          this.pointlayer = new L.layerGroup().addTo(this.map)
+          var list = []
+          for (i = 0; i < this.alllist.length; i++) {
+            if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
+              continue
+            }
+            var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
+            list.push(item)
+          }
+          // if (list.length !== 0) {
+          //   this.setZoom(list)
+          // }
+          var Icon
+          for (var i = 0; i < this.alllist.length; i++) {
+            if(i===0 && !this.initlocation){
+              this.map.setView({ lat: this.alllist[0].lat, lng:  this.alllist[0].lng },16)
+              this.initlocation = true
+            }
+            if (this.alllist[i].status === '离线') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '超时') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '停车') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '行驶') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-online.png'), // 绿
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '报警') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
+                iconSize: [40, 40]
+              })
+            }
+            var myIcon = L.divIcon({
+              html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
+              className: '',
+              iconSize: [100, 15]
+            })
+            L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.pointlayer)
+            const { carId,description, carTypeName, deptName, status,lng,lat, upTime,speed } = this.alllist[i]
+            var btndetail = 'btndetail'+ carId
+            var btntrack = 'btntrack'+ carId
+            var btntrail = 'btntrail'+ carId
+            var str = `<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label> ${description}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label> ${carTypeName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label> ${deptName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label> ${status}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label> ${lng} , ${lat}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label> ${upTime}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label> ${speed} (km/h)</div>
+            <div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id=${btndetail}>详情</button>
+            <button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;
+            color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrack}>跟踪</button>
+            <button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrail}>轨迹</button></div></div>`
+            var popup = L.popup().setContent(str)
+            var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
+              icon: Icon,
+              slug: this.alllist[i],
+              rotationAngle: this.alllist[i].direction,
+              zIndexOffset: 100000
+            }).addTo(this.pointlayer).bindPopup(popup)
 
-        this.map.setView({ lat: cenLat, lng: cenLng })
-      }
-    },
-    fetchData(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
-      }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
+            var that = this
+            marker.on('click', function(e) {
+              console.log('按钮：',document.getElementById(btndetail))
+              document.getElementById(btndetail).onclick = function() {
+                console.log('carId:',e.sourceTarget.options.slug.carId)
+                that.detail(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrack).onclick = function() {
+                that.track(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrail).onclick = function() {
+                that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              }
+            })
           }
         })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        if (list.length !== 0) {
-          this.setZoom(list)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    fetchCar(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
+      },
+      indexMethod(index) {
+        return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      },
+      // 改变页容量
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.fetchData()
+      },
+      // 改变当前页
+      handleCurrentChange(val) {
+        this.listQuery.offset = val
+        this.fetchData()
+      },
+      // 多选触发方法
+      handleSelectionChange(val) {
+        this.multipleSelection = val
       }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
-    },
-    // 多选触发方法
-    handleSelectionChange(val) {
-      this.multipleSelection = val
     }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   /*.el-table__header tr,*/
   /*.el-table__header th {*/
-    /*padding: 0;*/
-    /*height: 40px;*/
-    /*background-color: #f8f8f8;*/
+  /*padding: 0;*/
+  /*height: 40px;*/
+  /*background-color: #f8f8f8;*/
   /*}*/
   /*.table{*/
-    /*margin-bottom: 20px;*/
+  /*margin-bottom: 20px;*/
   /*}*/
   /*.pagination-container{*/
-    /*margin-bottom: 100px;*/
+  /*margin-bottom: 100px;*/
   /*}*/
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -566,7 +488,7 @@
     width: 458px;
     background-color: #ffffff;
     /* margin-top: 20px; */
-    padding-top: 20px;
+    margin-top: 25px;
     padding-bottom: 10px;
   }
   .table-name{
@@ -594,14 +516,14 @@
     border-top: 12px solid #ebebeb;
   }
   /deep/ .el-table--scrollable-y .el-table__body-wrapper{
-      padding-bottom: 11px !important;
+    padding-bottom: 11px !important;
   }
   /*/deep/ .el-radio__input.is-checked+.el-radio__label {*/
-    /*color: red;*/
+  /*color: red;*/
   /*}*/
   /*/deep/ .el-radio__input.is-checked .el-radio__inner {*/
-    /*border-color: #e91e63;*/
-    /*background: #e91e63;*/
+  /*border-color: #e91e63;*/
+  /*background: #e91e63;*/
   /*}*/
   /deep/ .el-radio{
     margin-right: 5px;

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/server.js b/src/api/server.js
new file mode 100644
index 0000000..51c3f45
--- /dev/null
+++ b/src/api/server.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取服务列表
+export function getServerList(params) {
+  return request({
+    url: '/map/server/listPage',
+    method: 'get',
+    params: params
+  })
+}
+// 编辑服务地址
+export function serverEdit(params) {
+  return request({
+    url: '/map/server/edit',
+    method: 'post',
+    params: params
+  })
+}
diff --git a/src/main.js b/src/main.js
index 27566d4..fa430f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@
 import 'leaflet.pm'
 import 'leaflet.pm/dist/leaflet.pm.css'
 import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import 'esri-leaflet/dist/esri-leaflet.js'
+import 'esri-leaflet-renderers/dist/esri-leaflet-renderers.js'
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
diff --git a/src/views/overview/listoverview.vue b/src/views/overview/listoverview.vue
index aa58e6f..86a422b 100644
--- a/src/views/overview/listoverview.vue
+++ b/src/views/overview/listoverview.vue
@@ -21,7 +21,8 @@
         <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" size="small" clearable value=""/>
       </search-item>
     </search-area>
-
+    <el-checkbox v-model="showBase" style="position: absolute;top: 20px;right: 100px">矢量</el-checkbox>
+    <el-checkbox v-model="showImg" style="position: absolute;top: 20px;right: 50px">影像</el-checkbox>
     <div id="map">
       <!--查询结果Table显示-->
       <div slot="header" class="rightcard" >
@@ -60,7 +61,7 @@
         <i v-if="showtable==false" class="el-icon-arrow-right" style="position:absolute; right:20px;top:20px;margin-top:-8px;"/>
       </div>
 
-      <el-table v-if="showtable==true" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
+      <el-table v-if="showtable==true" :row-style="{height: '35px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
@@ -93,445 +94,366 @@
   </app-container>
 </template>
 <script>
-import editCarInfo from '@/views/carinfo/editCarInfo'
-import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
-import { getDictCode } from '@/api/dict'
-import DeptSelect from '@/components/DeptSelect'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
-
-export default {
-  name: 'ListOverview',
-  components: { DeptSelect, editCarInfo },
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '30',
-      online: 0,
-      offline: 0,
-      showtable: true,
-      deptShow: true,
-      listQuery: {
-        description: '',
-        carCode: '',
-        carType: '',
-        deptId: '',
-        offset: 1,
-        limit: 15
-      }, // 查询条件
-      columns: [
-        {
-          text: '车辆描述',
-          value: 'description',
-          align: 'center'
+  import editCarInfo from '@/views/carinfo/editCarInfo'
+  import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
+  import { getDictCode } from '@/api/dict'
+  import DeptSelect from '@/components/DeptSelect'
+  import { getServerList } from '@/api/server'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+  var esri = require('esri-leaflet')
+  export default {
+    name: 'ListOverview',
+    components: { DeptSelect, editCarInfo },
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '30',
+        showBase:false,
+        showImg:true,
+        online: 0,
+        offline: 0,
+        showtable: true,
+        deptShow: true,
+        listQuery: {
+          description: '',
+          carCode: '',
+          carType: '',
+          deptId: '',
+          offset: 1,
+          limit: 15
+        }, // 查询条件
+        columns: [
+          {
+            text: '车辆描述',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '车牌号',
+            value: 'carCode',
+            align: 'center',
+            width: 90
+          },
+          {
+            text: '状态',
+            value: 'status',
+            align: 'center',
+            width: 70
+          }
+        ], // 动态加载的表头
+        TianDiTu: {
+          Normal: {
+            Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Satellite: {
+            Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Terrain: {
+            Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
         },
-        {
-          text: '车牌号',
-          value: 'carCode',
-          align: 'center',
-          width: 90
-        },
-        {
-          text: '状态',
-          value: 'status',
-          align: 'center',
-          width: 70
-        }
-      ], // 动态加载的表头
-      TianDiTu: {
-        Normal: {
-          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Satellite: {
-          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Terrain: {
-          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+        pointlayer: null,
+        imglayer: null,
+        featurelayer: null,
+        baselayer: [],
+        baseUrl: '',
+        mapUrl: '',
+        list: [], // 列表数据
+        alllist: [], // 列表数据
+        map: null,
+        initlocation: false,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        // listLoading: true, // 加载动画
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      showBase(val) {
+        if(val)  this.map.addLayer(this.featurelayer)
+        else this.map.removeLayer(this.featurelayer)
       },
-      baselayer: [],
-      list: [], // 列表数据
-      alllist: [], // 列表数据
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      // listLoading: true, // 加载动画
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+      showImg(val) {
+        if(val)  this.map.addLayer(this.imglayer)
+        else this.map.removeLayer(this.imglayer)
+      },
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      getDictCode('carType').then(response => {
+        this.cartypelist = response.data
+      })
+      this.initMap()
+      setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      dbSelected(row) {
+        this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
+      },
+      tableclick() {
+        this.showtable = !this.showtable
+      },
+      detail(id) {
+        this.dialogFormVisible = true
+        var item = { id: id }
+        this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
+      },
+      track(id) {
+        this.$router.push({
+          name: 'Track',
+          query: {
+            id: id
+          }
+        })
+      },
+      trail(id, row) {
+        this.$router.push({
+          name: 'Trail',
+          query: {
+            id: id,
+            name: row.carCode + '-' + row.carTypeName
+          }
+        })
+      },
+      async initMap() {
+        const map = L.map('map', {
+          minZoom: 3,
+          maxZoom: 18,
+          center: [27.75962, 116.06021],
+          zoom: 16,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG3857
+        })
+        map.doubleClickZoom.disable()
+        this.map = map // data上需要挂载
+        window.map = map
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.imglayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        }).addTo(map)
+        var  listQuery={
+          offset: 1,
+          limit: 15
+        }
+        const res = await getServerList(listQuery)
+        var list = res.data.rows
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].name === 'GIS地图') {
+            this.baseUrl = list[i].url
+          } else if (list[i].name === '二维地图URL') {
+            this.mapUrl = list[i].url
+          }
+        }
+        this.featurelayer = esri.dynamicMapLayer({
+          url: this.baseUrl + this.mapUrl,
+          minZoom: 4, // 最小缩放等级
+          maxZoom: 21// 最大缩放等级
+        })
+        this.fetchData()
+      },
+      search() {
+        this.fetchData(false)
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchCar()
-      }
-    }
-  },
-  mounted() {
-    getDictCode('carType').then(response => {
-      this.cartypelist = response.data
-    })
-    this.initMap()
-    this.fetchData()
-    setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    dbSelected(row) {
-      this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
-    },
-    tableclick() {
-      this.showtable = !this.showtable
-    },
-    detail(id) {
-      this.dialogFormVisible = true
-      var item = { id: id }
-      this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
-    },
-    track(id) {
-      this.$router.push({
-        name: 'Track',
-        query: {
-          id: id
+      },
+      setZoom(points) {
+        // console.log(points)
+        if (points.length > 0) {
+          var maxLng = points[0][1]
+          var minLng = points[0][1]
+          var maxLat = points[0][0]
+          var minLat = points[0][0]
+          var res
+          for (var i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+          var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+          this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+        } else {
+          // 没有坐标，显示全中国
+          this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
         }
-      })
-    },
-    trail(id, row) {
-      this.$router.push({
-        name: 'Trail',
-        query: {
-          id: id,
-          name: row.carCode + '-' + row.carTypeName
+      },
+      getZoom(maxLng, minLng, maxLat, minLat) {
+        var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
+        var latlng = L.latLng(maxLat, maxLng)
+        var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+        // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+          if (zoom[i] - distance > 0) {
+            return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+          }
         }
-      })
-    },
-    initMap() {
-      const map = L.map('map', {
-        minZoom: 3,
-        maxZoom: 18,
-        center: [27.75962, 116.06021],
-        zoom: 11,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      map.doubleClickZoom.disable()
-      this.map = map // data上需要挂载
-      window.map = map
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-    },
-    search() {
-      this.fetchData(false)
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    setZoom(points) {
-      // console.log(points)
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
+      },
+      fetchData(isNowPage = true) {
+        offlineCount(this.listQuery).then(response => {
+          this.online = response.data.online
+          this.offline = response.data.offline
+        })
+        this.sec = Number(this.refresh)
+        if (!isNowPage) {
+          this.listQuery.offset = 1
         }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-    },
-    setCenter(points) {
-      // 获取折线中心点坐标
-      if (points.length > 0) {
-        let maxLng = points[0][1]
-        let minLng = points[0][1]
-        let maxLat = points[0][0]
-        let minLat = points[0][0]
-        let res
-        for (let i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+        getOverviewList(this.listQuery).then(response => {
+          this.list = response.data.rows
+          this.total = parseInt(response.data.total)
+        })
+        getOverviewAllList(this.listQuery).then(response => {
+          this.alllist = response.data
+          if(this.pointlayer!==null) this.map.removeLayer(this.pointlayer)
+          this.pointlayer = new L.layerGroup().addTo(this.map)
+          var list = []
+          for (i = 0; i < this.alllist.length; i++) {
+            if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
+              continue
+            }
+            var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
+            list.push(item)
+          }
+          // if (list.length !== 0) {
+          //   this.setZoom(list)
+          // }
+          var Icon
+          for (var i = 0; i < this.alllist.length; i++) {
+            if(i===0 && !this.initlocation){
+              this.map.setView({ lat: this.alllist[0].lat, lng:  this.alllist[0].lng },16)
+              this.initlocation = true
+            }
+            if (this.alllist[i].status === '离线') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '超时') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '停车') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '行驶') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-online.png'), // 绿
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '报警') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
+                iconSize: [40, 40]
+              })
+            }
+            var myIcon = L.divIcon({
+              html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
+              className: '',
+              iconSize: [100, 15]
+            })
+            L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.pointlayer)
+            const { carId,description, carTypeName, deptName, status,lng,lat, upTime,speed } = this.alllist[i]
+            var btndetail = 'btndetail'+ carId
+            var btntrack = 'btntrack'+ carId
+            var btntrail = 'btntrail'+ carId
+            var str = `<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label> ${description}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label> ${carTypeName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label> ${deptName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label> ${status}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label> ${lng} , ${lat}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label> ${upTime}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label> ${speed} (km/h)</div>
+            <div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id=${btndetail}>详情</button>
+            <button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;
+            color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrack}>跟踪</button>
+            <button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrail}>轨迹</button></div></div>`
+            var popup = L.popup().setContent(str)
+            var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
+              icon: Icon,
+              slug: this.alllist[i],
+              rotationAngle: this.alllist[i].direction,
+              zIndexOffset: 100000
+            }).addTo(this.pointlayer).bindPopup(popup)
 
-        this.map.setView({ lat: cenLat, lng: cenLng })
-      }
-    },
-    fetchData(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
-      }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
+            var that = this
+            marker.on('click', function(e) {
+              console.log('按钮：',document.getElementById(btndetail))
+              document.getElementById(btndetail).onclick = function() {
+                console.log('carId:',e.sourceTarget.options.slug.carId)
+                that.detail(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrack).onclick = function() {
+                that.track(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrail).onclick = function() {
+                that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              }
+            })
           }
         })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        if (list.length !== 0) {
-          this.setZoom(list)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    fetchCar(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
+      },
+      indexMethod(index) {
+        return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      },
+      // 改变页容量
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.fetchData()
+      },
+      // 改变当前页
+      handleCurrentChange(val) {
+        this.listQuery.offset = val
+        this.fetchData()
+      },
+      // 多选触发方法
+      handleSelectionChange(val) {
+        this.multipleSelection = val
       }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
-    },
-    // 多选触发方法
-    handleSelectionChange(val) {
-      this.multipleSelection = val
     }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   /*.el-table__header tr,*/
   /*.el-table__header th {*/
-    /*padding: 0;*/
-    /*height: 40px;*/
-    /*background-color: #f8f8f8;*/
+  /*padding: 0;*/
+  /*height: 40px;*/
+  /*background-color: #f8f8f8;*/
   /*}*/
   /*.table{*/
-    /*margin-bottom: 20px;*/
+  /*margin-bottom: 20px;*/
   /*}*/
   /*.pagination-container{*/
-    /*margin-bottom: 100px;*/
+  /*margin-bottom: 100px;*/
   /*}*/
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -566,7 +488,7 @@
     width: 458px;
     background-color: #ffffff;
     /* margin-top: 20px; */
-    padding-top: 20px;
+    margin-top: 25px;
     padding-bottom: 10px;
   }
   .table-name{
@@ -594,14 +516,14 @@
     border-top: 12px solid #ebebeb;
   }
   /deep/ .el-table--scrollable-y .el-table__body-wrapper{
-      padding-bottom: 11px !important;
+    padding-bottom: 11px !important;
   }
   /*/deep/ .el-radio__input.is-checked+.el-radio__label {*/
-    /*color: red;*/
+  /*color: red;*/
   /*}*/
   /*/deep/ .el-radio__input.is-checked .el-radio__inner {*/
-    /*border-color: #e91e63;*/
-    /*background: #e91e63;*/
+  /*border-color: #e91e63;*/
+  /*background: #e91e63;*/
   /*}*/
   /deep/ .el-radio{
     margin-right: 5px;
diff --git a/src/views/overview/track.vue b/src/views/overview/track.vue
index 424fa11..cf123da 100644
--- a/src/views/overview/track.vue
+++ b/src/views/overview/track.vue
@@ -27,148 +27,148 @@
   </div>
 </template>
 <script>
-import { track } from '@/api/overview'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-export default {
-  name: 'Track',
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '10',
-      showtable: true,
-      id: '',
-      marker: null,
-      label: null,
-      baselayer: [],
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+  import { track } from '@/api/overview'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  export default {
+    name: 'Track',
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '10',
+        showtable: true,
+        id: '',
+        marker: null,
+        label: null,
+        baselayer: [],
+        map: null,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      if (this.$route.query) {
+        this.id = this.$route.query.id
+      }
+      this.initMap()
+      this.fetchData()
+      this.timer = setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      initMap() {
+        track(this.id).then(response => {
+          var data = response.data
+          var map
+          if (data.lat !== '') {
+            map = L.map('map', {
+              minZoom: 3,
+              maxZoom: 18,
+              center: [data.lat, data.lng],
+              zoom: 16,
+              zoomControl: false,
+              attributionControl: false,
+              crs: L.CRS.EPSG3857
+            })
+          } else {
+            map = L.map('map', {
+              minZoom: 3,
+              maxZoom: 18,
+              center: [27.75962, 116.06021],
+              zoom: 16,
+              zoomControl: false,
+              attributionControl: false,
+              crs: L.CRS.EPSG3857
+            })
+          }
+          this.map = map // data上需要挂载
+          window.map = map
+          this.baselayer.push(L.tileLayer(
+            'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+          ).addTo(map))
+          this.baselayer.push(L.tileLayer(
+            'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+          ).addTo(map))
+        })
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchData()
+      },
+      fetchData() {
+        track(this.id).then(response => {
+          var data = response.data
+          if (this.marker != null) {
+            this.marker.remove()
+            this.label.remove()
+          }
+          var Icon
+          if (data.status === '') {
+            return
+          } else if (data.status === '离线') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-offline.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '超时') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-timeout.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '停车') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-stop.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '行驶') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-online.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '报警') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-alarm.png'),
+              iconSize: [40, 40]
+            })
+          }
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
+          var myIcon = L.divIcon({
+            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
+            className: '',
+            iconSize: [100, 15]
+          })
+          this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
+          var popup = L.popup().setContent(str)
+          this.marker = L.marker([data.lat, data.lng], {
+            icon: Icon,
+            slug: data,
+            rotationAngle: data.direction
+          }).addTo(this.map).bindPopup(popup)
+          this.map.setView({ lat: data.lat, lng: data.lng },16)
+        })
       }
     }
-  },
-  mounted() {
-    if (this.$route.query) {
-      this.id = this.$route.query.id
-    }
-    this.initMap()
-    this.fetchData()
-    this.timer = setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    initMap() {
-      track(this.id).then(response => {
-        var data = response.data
-        var map
-        if (data.lat !== '') {
-          map = L.map('map', {
-            minZoom: 3,
-            maxZoom: 14,
-            center: [data.lat, data.lng],
-            zoom: 12,
-            zoomControl: false,
-            attributionControl: false,
-            crs: L.CRS.EPSG3857
-          })
-        } else {
-          map = L.map('map', {
-            minZoom: 3,
-            maxZoom: 11,
-            center: [27.75962, 116.06021],
-            zoom: 12,
-            zoomControl: false,
-            attributionControl: false,
-            crs: L.CRS.EPSG3857
-          })
-        }
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-      })
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    fetchData() {
-      track(this.id).then(response => {
-        var data = response.data
-        if (this.marker != null) {
-          this.marker.remove()
-          this.label.remove()
-        }
-        var Icon
-        if (data.status === '') {
-          return
-        } else if (data.status === '离线') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-offline.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '超时') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-timeout.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '停车') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-stop.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '行驶') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-online.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '报警') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-alarm.png'),
-            iconSize: [40, 40]
-          })
-        }
-        var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
-        var myIcon = L.divIcon({
-          html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
-          className: '',
-          iconSize: [100, 15]
-        })
-        this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
-        var popup = L.popup().setContent(str)
-        this.marker = L.marker([data.lat, data.lng], {
-          icon: Icon,
-          slug: data,
-          rotationAngle: data.direction
-        }).addTo(this.map).bindPopup(popup)
-        this.map.setView({ lat: data.lat, lng: data.lng })
-      })
-    }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   .rightcard{

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/server.js b/src/api/server.js
new file mode 100644
index 0000000..51c3f45
--- /dev/null
+++ b/src/api/server.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取服务列表
+export function getServerList(params) {
+  return request({
+    url: '/map/server/listPage',
+    method: 'get',
+    params: params
+  })
+}
+// 编辑服务地址
+export function serverEdit(params) {
+  return request({
+    url: '/map/server/edit',
+    method: 'post',
+    params: params
+  })
+}
diff --git a/src/main.js b/src/main.js
index 27566d4..fa430f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@
 import 'leaflet.pm'
 import 'leaflet.pm/dist/leaflet.pm.css'
 import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import 'esri-leaflet/dist/esri-leaflet.js'
+import 'esri-leaflet-renderers/dist/esri-leaflet-renderers.js'
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
diff --git a/src/views/overview/listoverview.vue b/src/views/overview/listoverview.vue
index aa58e6f..86a422b 100644
--- a/src/views/overview/listoverview.vue
+++ b/src/views/overview/listoverview.vue
@@ -21,7 +21,8 @@
         <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" size="small" clearable value=""/>
       </search-item>
     </search-area>
-
+    <el-checkbox v-model="showBase" style="position: absolute;top: 20px;right: 100px">矢量</el-checkbox>
+    <el-checkbox v-model="showImg" style="position: absolute;top: 20px;right: 50px">影像</el-checkbox>
     <div id="map">
       <!--查询结果Table显示-->
       <div slot="header" class="rightcard" >
@@ -60,7 +61,7 @@
         <i v-if="showtable==false" class="el-icon-arrow-right" style="position:absolute; right:20px;top:20px;margin-top:-8px;"/>
       </div>
 
-      <el-table v-if="showtable==true" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
+      <el-table v-if="showtable==true" :row-style="{height: '35px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
@@ -93,445 +94,366 @@
   </app-container>
 </template>
 <script>
-import editCarInfo from '@/views/carinfo/editCarInfo'
-import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
-import { getDictCode } from '@/api/dict'
-import DeptSelect from '@/components/DeptSelect'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
-
-export default {
-  name: 'ListOverview',
-  components: { DeptSelect, editCarInfo },
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '30',
-      online: 0,
-      offline: 0,
-      showtable: true,
-      deptShow: true,
-      listQuery: {
-        description: '',
-        carCode: '',
-        carType: '',
-        deptId: '',
-        offset: 1,
-        limit: 15
-      }, // 查询条件
-      columns: [
-        {
-          text: '车辆描述',
-          value: 'description',
-          align: 'center'
+  import editCarInfo from '@/views/carinfo/editCarInfo'
+  import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
+  import { getDictCode } from '@/api/dict'
+  import DeptSelect from '@/components/DeptSelect'
+  import { getServerList } from '@/api/server'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+  var esri = require('esri-leaflet')
+  export default {
+    name: 'ListOverview',
+    components: { DeptSelect, editCarInfo },
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '30',
+        showBase:false,
+        showImg:true,
+        online: 0,
+        offline: 0,
+        showtable: true,
+        deptShow: true,
+        listQuery: {
+          description: '',
+          carCode: '',
+          carType: '',
+          deptId: '',
+          offset: 1,
+          limit: 15
+        }, // 查询条件
+        columns: [
+          {
+            text: '车辆描述',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '车牌号',
+            value: 'carCode',
+            align: 'center',
+            width: 90
+          },
+          {
+            text: '状态',
+            value: 'status',
+            align: 'center',
+            width: 70
+          }
+        ], // 动态加载的表头
+        TianDiTu: {
+          Normal: {
+            Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Satellite: {
+            Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Terrain: {
+            Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
         },
-        {
-          text: '车牌号',
-          value: 'carCode',
-          align: 'center',
-          width: 90
-        },
-        {
-          text: '状态',
-          value: 'status',
-          align: 'center',
-          width: 70
-        }
-      ], // 动态加载的表头
-      TianDiTu: {
-        Normal: {
-          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Satellite: {
-          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Terrain: {
-          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+        pointlayer: null,
+        imglayer: null,
+        featurelayer: null,
+        baselayer: [],
+        baseUrl: '',
+        mapUrl: '',
+        list: [], // 列表数据
+        alllist: [], // 列表数据
+        map: null,
+        initlocation: false,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        // listLoading: true, // 加载动画
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      showBase(val) {
+        if(val)  this.map.addLayer(this.featurelayer)
+        else this.map.removeLayer(this.featurelayer)
       },
-      baselayer: [],
-      list: [], // 列表数据
-      alllist: [], // 列表数据
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      // listLoading: true, // 加载动画
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+      showImg(val) {
+        if(val)  this.map.addLayer(this.imglayer)
+        else this.map.removeLayer(this.imglayer)
+      },
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      getDictCode('carType').then(response => {
+        this.cartypelist = response.data
+      })
+      this.initMap()
+      setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      dbSelected(row) {
+        this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
+      },
+      tableclick() {
+        this.showtable = !this.showtable
+      },
+      detail(id) {
+        this.dialogFormVisible = true
+        var item = { id: id }
+        this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
+      },
+      track(id) {
+        this.$router.push({
+          name: 'Track',
+          query: {
+            id: id
+          }
+        })
+      },
+      trail(id, row) {
+        this.$router.push({
+          name: 'Trail',
+          query: {
+            id: id,
+            name: row.carCode + '-' + row.carTypeName
+          }
+        })
+      },
+      async initMap() {
+        const map = L.map('map', {
+          minZoom: 3,
+          maxZoom: 18,
+          center: [27.75962, 116.06021],
+          zoom: 16,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG3857
+        })
+        map.doubleClickZoom.disable()
+        this.map = map // data上需要挂载
+        window.map = map
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.imglayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        }).addTo(map)
+        var  listQuery={
+          offset: 1,
+          limit: 15
+        }
+        const res = await getServerList(listQuery)
+        var list = res.data.rows
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].name === 'GIS地图') {
+            this.baseUrl = list[i].url
+          } else if (list[i].name === '二维地图URL') {
+            this.mapUrl = list[i].url
+          }
+        }
+        this.featurelayer = esri.dynamicMapLayer({
+          url: this.baseUrl + this.mapUrl,
+          minZoom: 4, // 最小缩放等级
+          maxZoom: 21// 最大缩放等级
+        })
+        this.fetchData()
+      },
+      search() {
+        this.fetchData(false)
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchCar()
-      }
-    }
-  },
-  mounted() {
-    getDictCode('carType').then(response => {
-      this.cartypelist = response.data
-    })
-    this.initMap()
-    this.fetchData()
-    setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    dbSelected(row) {
-      this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
-    },
-    tableclick() {
-      this.showtable = !this.showtable
-    },
-    detail(id) {
-      this.dialogFormVisible = true
-      var item = { id: id }
-      this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
-    },
-    track(id) {
-      this.$router.push({
-        name: 'Track',
-        query: {
-          id: id
+      },
+      setZoom(points) {
+        // console.log(points)
+        if (points.length > 0) {
+          var maxLng = points[0][1]
+          var minLng = points[0][1]
+          var maxLat = points[0][0]
+          var minLat = points[0][0]
+          var res
+          for (var i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+          var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+          this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+        } else {
+          // 没有坐标，显示全中国
+          this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
         }
-      })
-    },
-    trail(id, row) {
-      this.$router.push({
-        name: 'Trail',
-        query: {
-          id: id,
-          name: row.carCode + '-' + row.carTypeName
+      },
+      getZoom(maxLng, minLng, maxLat, minLat) {
+        var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
+        var latlng = L.latLng(maxLat, maxLng)
+        var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+        // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+          if (zoom[i] - distance > 0) {
+            return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+          }
         }
-      })
-    },
-    initMap() {
-      const map = L.map('map', {
-        minZoom: 3,
-        maxZoom: 18,
-        center: [27.75962, 116.06021],
-        zoom: 11,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      map.doubleClickZoom.disable()
-      this.map = map // data上需要挂载
-      window.map = map
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-    },
-    search() {
-      this.fetchData(false)
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    setZoom(points) {
-      // console.log(points)
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
+      },
+      fetchData(isNowPage = true) {
+        offlineCount(this.listQuery).then(response => {
+          this.online = response.data.online
+          this.offline = response.data.offline
+        })
+        this.sec = Number(this.refresh)
+        if (!isNowPage) {
+          this.listQuery.offset = 1
         }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-    },
-    setCenter(points) {
-      // 获取折线中心点坐标
-      if (points.length > 0) {
-        let maxLng = points[0][1]
-        let minLng = points[0][1]
-        let maxLat = points[0][0]
-        let minLat = points[0][0]
-        let res
-        for (let i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+        getOverviewList(this.listQuery).then(response => {
+          this.list = response.data.rows
+          this.total = parseInt(response.data.total)
+        })
+        getOverviewAllList(this.listQuery).then(response => {
+          this.alllist = response.data
+          if(this.pointlayer!==null) this.map.removeLayer(this.pointlayer)
+          this.pointlayer = new L.layerGroup().addTo(this.map)
+          var list = []
+          for (i = 0; i < this.alllist.length; i++) {
+            if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
+              continue
+            }
+            var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
+            list.push(item)
+          }
+          // if (list.length !== 0) {
+          //   this.setZoom(list)
+          // }
+          var Icon
+          for (var i = 0; i < this.alllist.length; i++) {
+            if(i===0 && !this.initlocation){
+              this.map.setView({ lat: this.alllist[0].lat, lng:  this.alllist[0].lng },16)
+              this.initlocation = true
+            }
+            if (this.alllist[i].status === '离线') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '超时') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '停车') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '行驶') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-online.png'), // 绿
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '报警') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
+                iconSize: [40, 40]
+              })
+            }
+            var myIcon = L.divIcon({
+              html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
+              className: '',
+              iconSize: [100, 15]
+            })
+            L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.pointlayer)
+            const { carId,description, carTypeName, deptName, status,lng,lat, upTime,speed } = this.alllist[i]
+            var btndetail = 'btndetail'+ carId
+            var btntrack = 'btntrack'+ carId
+            var btntrail = 'btntrail'+ carId
+            var str = `<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label> ${description}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label> ${carTypeName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label> ${deptName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label> ${status}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label> ${lng} , ${lat}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label> ${upTime}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label> ${speed} (km/h)</div>
+            <div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id=${btndetail}>详情</button>
+            <button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;
+            color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrack}>跟踪</button>
+            <button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrail}>轨迹</button></div></div>`
+            var popup = L.popup().setContent(str)
+            var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
+              icon: Icon,
+              slug: this.alllist[i],
+              rotationAngle: this.alllist[i].direction,
+              zIndexOffset: 100000
+            }).addTo(this.pointlayer).bindPopup(popup)
 
-        this.map.setView({ lat: cenLat, lng: cenLng })
-      }
-    },
-    fetchData(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
-      }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
+            var that = this
+            marker.on('click', function(e) {
+              console.log('按钮：',document.getElementById(btndetail))
+              document.getElementById(btndetail).onclick = function() {
+                console.log('carId:',e.sourceTarget.options.slug.carId)
+                that.detail(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrack).onclick = function() {
+                that.track(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrail).onclick = function() {
+                that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              }
+            })
           }
         })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        if (list.length !== 0) {
-          this.setZoom(list)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    fetchCar(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
+      },
+      indexMethod(index) {
+        return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      },
+      // 改变页容量
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.fetchData()
+      },
+      // 改变当前页
+      handleCurrentChange(val) {
+        this.listQuery.offset = val
+        this.fetchData()
+      },
+      // 多选触发方法
+      handleSelectionChange(val) {
+        this.multipleSelection = val
       }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
-    },
-    // 多选触发方法
-    handleSelectionChange(val) {
-      this.multipleSelection = val
     }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   /*.el-table__header tr,*/
   /*.el-table__header th {*/
-    /*padding: 0;*/
-    /*height: 40px;*/
-    /*background-color: #f8f8f8;*/
+  /*padding: 0;*/
+  /*height: 40px;*/
+  /*background-color: #f8f8f8;*/
   /*}*/
   /*.table{*/
-    /*margin-bottom: 20px;*/
+  /*margin-bottom: 20px;*/
   /*}*/
   /*.pagination-container{*/
-    /*margin-bottom: 100px;*/
+  /*margin-bottom: 100px;*/
   /*}*/
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -566,7 +488,7 @@
     width: 458px;
     background-color: #ffffff;
     /* margin-top: 20px; */
-    padding-top: 20px;
+    margin-top: 25px;
     padding-bottom: 10px;
   }
   .table-name{
@@ -594,14 +516,14 @@
     border-top: 12px solid #ebebeb;
   }
   /deep/ .el-table--scrollable-y .el-table__body-wrapper{
-      padding-bottom: 11px !important;
+    padding-bottom: 11px !important;
   }
   /*/deep/ .el-radio__input.is-checked+.el-radio__label {*/
-    /*color: red;*/
+  /*color: red;*/
   /*}*/
   /*/deep/ .el-radio__input.is-checked .el-radio__inner {*/
-    /*border-color: #e91e63;*/
-    /*background: #e91e63;*/
+  /*border-color: #e91e63;*/
+  /*background: #e91e63;*/
   /*}*/
   /deep/ .el-radio{
     margin-right: 5px;
diff --git a/src/views/overview/track.vue b/src/views/overview/track.vue
index 424fa11..cf123da 100644
--- a/src/views/overview/track.vue
+++ b/src/views/overview/track.vue
@@ -27,148 +27,148 @@
   </div>
 </template>
 <script>
-import { track } from '@/api/overview'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-export default {
-  name: 'Track',
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '10',
-      showtable: true,
-      id: '',
-      marker: null,
-      label: null,
-      baselayer: [],
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+  import { track } from '@/api/overview'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  export default {
+    name: 'Track',
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '10',
+        showtable: true,
+        id: '',
+        marker: null,
+        label: null,
+        baselayer: [],
+        map: null,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      if (this.$route.query) {
+        this.id = this.$route.query.id
+      }
+      this.initMap()
+      this.fetchData()
+      this.timer = setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      initMap() {
+        track(this.id).then(response => {
+          var data = response.data
+          var map
+          if (data.lat !== '') {
+            map = L.map('map', {
+              minZoom: 3,
+              maxZoom: 18,
+              center: [data.lat, data.lng],
+              zoom: 16,
+              zoomControl: false,
+              attributionControl: false,
+              crs: L.CRS.EPSG3857
+            })
+          } else {
+            map = L.map('map', {
+              minZoom: 3,
+              maxZoom: 18,
+              center: [27.75962, 116.06021],
+              zoom: 16,
+              zoomControl: false,
+              attributionControl: false,
+              crs: L.CRS.EPSG3857
+            })
+          }
+          this.map = map // data上需要挂载
+          window.map = map
+          this.baselayer.push(L.tileLayer(
+            'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+          ).addTo(map))
+          this.baselayer.push(L.tileLayer(
+            'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+          ).addTo(map))
+        })
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchData()
+      },
+      fetchData() {
+        track(this.id).then(response => {
+          var data = response.data
+          if (this.marker != null) {
+            this.marker.remove()
+            this.label.remove()
+          }
+          var Icon
+          if (data.status === '') {
+            return
+          } else if (data.status === '离线') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-offline.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '超时') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-timeout.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '停车') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-stop.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '行驶') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-online.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '报警') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-alarm.png'),
+              iconSize: [40, 40]
+            })
+          }
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
+          var myIcon = L.divIcon({
+            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
+            className: '',
+            iconSize: [100, 15]
+          })
+          this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
+          var popup = L.popup().setContent(str)
+          this.marker = L.marker([data.lat, data.lng], {
+            icon: Icon,
+            slug: data,
+            rotationAngle: data.direction
+          }).addTo(this.map).bindPopup(popup)
+          this.map.setView({ lat: data.lat, lng: data.lng },16)
+        })
       }
     }
-  },
-  mounted() {
-    if (this.$route.query) {
-      this.id = this.$route.query.id
-    }
-    this.initMap()
-    this.fetchData()
-    this.timer = setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    initMap() {
-      track(this.id).then(response => {
-        var data = response.data
-        var map
-        if (data.lat !== '') {
-          map = L.map('map', {
-            minZoom: 3,
-            maxZoom: 14,
-            center: [data.lat, data.lng],
-            zoom: 12,
-            zoomControl: false,
-            attributionControl: false,
-            crs: L.CRS.EPSG3857
-          })
-        } else {
-          map = L.map('map', {
-            minZoom: 3,
-            maxZoom: 11,
-            center: [27.75962, 116.06021],
-            zoom: 12,
-            zoomControl: false,
-            attributionControl: false,
-            crs: L.CRS.EPSG3857
-          })
-        }
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-      })
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    fetchData() {
-      track(this.id).then(response => {
-        var data = response.data
-        if (this.marker != null) {
-          this.marker.remove()
-          this.label.remove()
-        }
-        var Icon
-        if (data.status === '') {
-          return
-        } else if (data.status === '离线') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-offline.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '超时') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-timeout.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '停车') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-stop.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '行驶') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-online.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '报警') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-alarm.png'),
-            iconSize: [40, 40]
-          })
-        }
-        var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
-        var myIcon = L.divIcon({
-          html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
-          className: '',
-          iconSize: [100, 15]
-        })
-        this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
-        var popup = L.popup().setContent(str)
-        this.marker = L.marker([data.lat, data.lng], {
-          icon: Icon,
-          slug: data,
-          rotationAngle: data.direction
-        }).addTo(this.map).bindPopup(popup)
-        this.map.setView({ lat: data.lat, lng: data.lng })
-      })
-    }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   .rightcard{
diff --git a/src/views/overview/trail.vue b/src/views/overview/trail.vue
index c043833..0f6e3b6 100644
--- a/src/views/overview/trail.vue
+++ b/src/views/overview/trail.vue
@@ -43,116 +43,88 @@
   </app-container>
 </template>
 <script>
-import trailStatic from '@/views/overview/trailStatic'
-import { trail } from '@/api/overview'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
-export default {
-  name: 'Trail',
-  components: { trailStatic },
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '10',
-      sec: 50,
-      showindex: 0,
-      state: 0, // 1:开始 2:暂停 3:停止
-      showtable: true,
-      deptShow: true,
-      listQuery: {
-        carId: '',
-        startTime: '',
-        endTime: ''
-      }, // 查询条件
-      baselayer: [],
-      carName: '',
-      dateTimeRange: [],
-      pathlist: [], // 列表数据
-      list: [], // 列表数据
-      map: null,
-      listLoading: true, // 加载动画
-      fullscreenLoading: false, // 全屏加载动画
-      timer: null,
-      carpoint: null
-    }
-  },
-  watch: {
-    dateTimeRange(val) {
-      if (val && val.length > 0) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      } else {
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
+  import trailStatic from '@/views/overview/trailStatic'
+  import { trail } from '@/api/overview'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+  export default {
+    name: 'Trail',
+    components: { trailStatic },
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '10',
+        sec: 50,
+        showindex: 0,
+        state: 0, // 1:开始 2:暂停 3:停止
+        showtable: true,
+        deptShow: true,
+        listQuery: {
+          carId: '',
+          startTime: '',
+          endTime: ''
+        }, // 查询条件
+        baselayer: [],
+        carName: '',
+        dateTimeRange: [],
+        pathlist: [], // 列表数据
+        list: [], // 列表数据
+        map: null,
+        listLoading: true, // 加载动画
+        fullscreenLoading: false, // 全屏加载动画
+        timer: null,
+        carpoint: null
       }
-    }
-  },
-  mounted() {
-    if (this.$route.query) {
-      this.listQuery.carId = this.$route.query.id
-      this.carName = this.$route.query.name
-    }
-    const date = new Date()
-    const year = date.getFullYear() // 年
-    const month = date.getMonth() + 1 // 月
-    const day = date.getDate() // 日
-    this.dateTimeRange = [year + '-' + month + '-' + day + ' 00:00:00', year + '-' + month + '-' + day + ' 23:59:59']
-    this.initMap()
-    this.settimer()
-  },
-  methods: {
-    settimer() {
-      clearTimeout(this.timer)
-      this.timer = setInterval(() => {
-        this.showcar()
-      }, this.sec * 10)
     },
-    staticspeed() {
-      this.dialogFormVisible = true
-      this.$refs.trailStatic.initDialog(this.dialogFormVisible, this.listQuery, this.carName)
-    },
-    showcar() {
-      if (this.state !== 1) {
-        return
+    watch: {
+      dateTimeRange(val) {
+        if (val && val.length > 0) {
+          this.listQuery.startTime = val[0]
+          this.listQuery.endTime = val[1]
+        } else {
+          this.listQuery.startTime = ''
+          this.listQuery.endTime = ''
+        }
       }
-      this.showindex++
-      if (this.showindex === this.list.length) {
-        clearTimeout(this.timer)
-        var that = this
-        setTimeout(function() { that.stop() }, this.sec * 10)
-        return
-      }
-      this.carpoint.remove()
-      // add point
-      var Icon = L.icon({
-        iconUrl: require('../../assets/global_images/car.png'),
-        iconSize: [40, 40]
-      })
-      var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
-      '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[this.showindex].lng + ' , ' + this.list[this.showindex].lat + '</div>' +
-      '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[this.showindex].upTime + '</div>' +
-      '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[this.showindex].speed + '(km/h)</div>' +
-      '</div>'
-      var popup = L.popup().setContent(str)
-      this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
-        icon: Icon,
-        rotationAngle: this.list[this.showindex].direction
-      }).addTo(this.map).bindPopup(popup)
-      this.carpoint.openPopup()
     },
-    play() {
-      this.state = 1
+    mounted() {
+      if (this.$route.query) {
+        this.listQuery.carId = this.$route.query.id
+        this.carName = this.$route.query.name
+      }
+      const date = new Date()
+      const year = date.getFullYear() // 年
+      const month = date.getMonth() + 1 // 月
+      const day = date.getDate() // 日
+      this.dateTimeRange = [year + '-' + month + '-' + day + ' 00:00:00', year + '-' + month + '-' + day + ' 23:59:59']
+      this.initMap()
       this.settimer()
     },
-    pause() {
-      this.state = 2
-    },
-    changepos() {
-      if (this.list.length !== 0) {
-        if (this.carpoint !== null) {
-          this.carpoint.remove()
+    methods: {
+      settimer() {
+        clearTimeout(this.timer)
+        this.timer = setInterval(() => {
+          this.showcar()
+        }, this.sec * 10)
+      },
+      staticspeed() {
+        this.dialogFormVisible = true
+        this.$refs.trailStatic.initDialog(this.dialogFormVisible, this.listQuery, this.carName)
+      },
+      showcar() {
+        if (this.state !== 1) {
+          return
         }
+        this.showindex++
+        if (this.showindex === this.list.length) {
+          clearTimeout(this.timer)
+          var that = this
+          setTimeout(function() { that.stop() }, this.sec * 10)
+          return
+        }
+        this.carpoint.remove()
+        // add point
         var Icon = L.icon({
           iconUrl: require('../../assets/global_images/car.png'),
           iconSize: [40, 40]
@@ -165,170 +137,198 @@
         var popup = L.popup().setContent(str)
         this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
           icon: Icon,
-          rotationAngle: Number(this.list[this.showindex].direction)
+          rotationAngle: this.list[this.showindex].direction
         }).addTo(this.map).bindPopup(popup)
         this.carpoint.openPopup()
-      }
-    },
-    stop() {
-      this.state = 3
-      if (this.list.length !== 0) {
-        if (this.carpoint !== null) {
-          this.carpoint.remove()
-        }
-        var Icon = L.icon({
-          iconUrl: require('../../assets/global_images/car.png'),
-          iconSize: [40, 40]
-        })
-        var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[0].lng + ' , ' + this.list[0].lat + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[0].upTime + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[0].speed + '(km/h)</div>' +
-          '</div>'
-        var popup = L.popup().setContent(str)
-        this.carpoint = L.marker([this.list[0].lat, this.list[0].lng], {
-          icon: Icon,
-          rotationAngle: Number(this.list[0].direction)
-        }).addTo(this.map).bindPopup(popup)
-        this.carpoint.openPopup()
-        this.showindex = 0
-      }
-    },
-    formatTooltip(val) {
-      return val / 100
-    },
-    timeTooltip(val) {
-      if (this.list.length !== 0) {
-        return this.list[val].upTime
-      }
-    },
-    initMap() {
-      const map = L.map('map', {
-        minZoom: 3,
-        maxZoom: 18,
-        center: [27.75962, 116.06021],
-        zoom: 11,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      this.map = map // data上需要挂载
-      window.map = map
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.search()
-    },
-    search() {
-      this.fetchData(false)
-    },
-    setZoom(points) {
-      console.log(points)
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          console.log(i)
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-    },
-    setCenter(points) {
-      // 获取折线中心点坐标
-      if (points.length > 0) {
-        let maxLng = points[0][1]
-        let minLng = points[0][1]
-        let maxLat = points[0][0]
-        let minLat = points[0][0]
-        let res
-        for (let i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-
-        this.map.setView({ lat: cenLat, lng: cenLng })
-      }
-    },
-    fetchData() { // 划线
-      this.listLoading = true
-      trail(this.listQuery).then(response => {
-        this.list = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        if (this.list.length === 0) {
-          this.$message.warning('查询结果为空')
-        }
+      },
+      play() {
+        this.state = 1
+        this.settimer()
+      },
+      pause() {
+        this.state = 2
+      },
+      changepos() {
         if (this.list.length !== 0) {
-          var myStyle = {
-            'color': '#e69010',
-            'weight': 5
+          if (this.carpoint !== null) {
+            this.carpoint.remove()
           }
-          this.pathlist = []
-          for (var i = 0; i < this.list.length; i++) {
-            var item = [Number(this.list[i].lat), Number(this.list[i].lng)]
-            this.pathlist.push(item)
-          }
-          L.polyline(this.pathlist, myStyle).addTo(this.map)
-          this.setZoom(this.pathlist)
           var Icon = L.icon({
-            iconUrl: require('../../assets/global_images/start.png'),
+            iconUrl: require('../../assets/global_images/car.png'),
             iconSize: [40, 40]
           })
-          L.marker([this.list[0].lat, this.list[0].lng], {
-            icon: Icon
-          }).addTo(this.map)
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/end.png'),
-            iconSize: [40, 40]
-          })
-          L.marker([this.list[this.list.length - 1].lat, this.list[this.list.length - 1].lng], {
-            icon: Icon
-          }).addTo(this.map)
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[this.showindex].lng + ' , ' + this.list[this.showindex].lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[this.showindex].upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[this.showindex].speed + '(km/h)</div>' +
+            '</div>'
+          var popup = L.popup().setContent(str)
+          this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
+            icon: Icon,
+            rotationAngle: Number(this.list[this.showindex].direction)
+          }).addTo(this.map).bindPopup(popup)
+          this.carpoint.openPopup()
         }
-        this.stop()
-      })
+      },
+      stop() {
+        this.state = 3
+        if (this.list.length !== 0) {
+          if (this.carpoint !== null) {
+            this.carpoint.remove()
+          }
+          var Icon = L.icon({
+            iconUrl: require('../../assets/global_images/car.png'),
+            iconSize: [40, 40]
+          })
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[0].lng + ' , ' + this.list[0].lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[0].upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[0].speed + '(km/h)</div>' +
+            '</div>'
+          var popup = L.popup().setContent(str)
+          this.carpoint = L.marker([this.list[0].lat, this.list[0].lng], {
+            icon: Icon,
+            rotationAngle: Number(this.list[0].direction)
+          }).addTo(this.map).bindPopup(popup)
+          this.carpoint.openPopup()
+          this.showindex = 0
+        }
+      },
+      formatTooltip(val) {
+        return val / 100
+      },
+      timeTooltip(val) {
+        if (this.list.length !== 0) {
+          return this.list[val].upTime
+        }
+      },
+      initMap() {
+        const map = L.map('map', {
+          minZoom: 3,
+          maxZoom: 18,
+          center: [27.75962, 116.06021],
+          zoom: 11,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG3857
+        })
+        this.map = map // data上需要挂载
+        window.map = map
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.search()
+      },
+      search() {
+        this.fetchData(false)
+      },
+      setZoom(points) {
+        console.log(points)
+        if (points.length > 0) {
+          var maxLng = points[0][1]
+          var minLng = points[0][1]
+          var maxLat = points[0][0]
+          var minLat = points[0][0]
+          var res
+          for (var i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+          var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+          this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+        } else {
+          // 没有坐标，显示全中国
+          this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
+        }
+      },
+      getZoom(maxLng, minLng, maxLat, minLat) {
+        var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
+        var latlng = L.latLng(maxLat, maxLng)
+        var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+        // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+          if (zoom[i] - distance > 0) {
+            console.log(i)
+            return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+          }
+        }
+      },
+      setCenter(points) {
+        // 获取折线中心点坐标
+        if (points.length > 0) {
+          let maxLng = points[0][1]
+          let minLng = points[0][1]
+          let maxLat = points[0][0]
+          let minLat = points[0][0]
+          let res
+          for (let i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+
+          this.map.setView({ lat: cenLat, lng: cenLng })
+        }
+      },
+      fetchData() { // 划线
+        this.listLoading = true
+        trail(this.listQuery).then(response => {
+          this.list = response.data
+          var base = this.baselayer
+          this.map.eachLayer(function(layer) {
+            if (layer !== base[0] && layer !== base[1]) {
+              layer.remove()
+            }
+          })
+          if (this.list.length === 0) {
+            this.$message.warning('查询结果为空')
+          }
+          if (this.list.length !== 0) {
+            var myStyle = {
+              'color': '#e69010',
+              'weight': 5
+            }
+            this.pathlist = []
+            for (var i = 0; i < this.list.length; i++) {
+              var item = [Number(this.list[i].lat), Number(this.list[i].lng)]
+              this.pathlist.push(item)
+            }
+            L.polyline(this.pathlist, myStyle).addTo(this.map)
+            this.setZoom(this.pathlist)
+            var Icon = L.icon({
+              iconUrl: require('../../assets/global_images/start.png'),
+              iconSize: [40, 40]
+            })
+            L.marker([this.list[0].lat, this.list[0].lng], {
+              icon: Icon
+            }).addTo(this.map)
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/end.png'),
+              iconSize: [40, 40]
+            })
+            L.marker([this.list[this.list.length - 1].lat, this.list[this.list.length - 1].lng], {
+              icon: Icon
+            }).addTo(this.map)
+          }
+          this.stop()
+        })
+      }
     }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   .search-div{

diff --git a/config/index.js b/config/index.js
index 8abd37a..59bc586 100644
--- a/config/index.js
+++ b/config/index.js
@@ -69,7 +69,7 @@
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: '/Smartcitycarfront/',
 
     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5e7c005..7dfc9e9 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "animate.css": "^3.7.2",
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
-    "echarts": "^5.0.0",
+    "echarts": "^5.1.2",
     "element-ui": "2.13.0",
+    "esri-leaflet": "^3.0.2",
+    "esri-leaflet-renderers": "^2.1.2",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/server.js b/src/api/server.js
new file mode 100644
index 0000000..51c3f45
--- /dev/null
+++ b/src/api/server.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取服务列表
+export function getServerList(params) {
+  return request({
+    url: '/map/server/listPage',
+    method: 'get',
+    params: params
+  })
+}
+// 编辑服务地址
+export function serverEdit(params) {
+  return request({
+    url: '/map/server/edit',
+    method: 'post',
+    params: params
+  })
+}
diff --git a/src/main.js b/src/main.js
index 27566d4..fa430f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,8 @@
 import 'leaflet.pm'
 import 'leaflet.pm/dist/leaflet.pm.css'
 import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import 'esri-leaflet/dist/esri-leaflet.js'
+import 'esri-leaflet-renderers/dist/esri-leaflet-renderers.js'
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
diff --git a/src/views/overview/listoverview.vue b/src/views/overview/listoverview.vue
index aa58e6f..86a422b 100644
--- a/src/views/overview/listoverview.vue
+++ b/src/views/overview/listoverview.vue
@@ -21,7 +21,8 @@
         <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" size="small" clearable value=""/>
       </search-item>
     </search-area>
-
+    <el-checkbox v-model="showBase" style="position: absolute;top: 20px;right: 100px">矢量</el-checkbox>
+    <el-checkbox v-model="showImg" style="position: absolute;top: 20px;right: 50px">影像</el-checkbox>
     <div id="map">
       <!--查询结果Table显示-->
       <div slot="header" class="rightcard" >
@@ -60,7 +61,7 @@
         <i v-if="showtable==false" class="el-icon-arrow-right" style="position:absolute; right:20px;top:20px;margin-top:-8px;"/>
       </div>
 
-      <el-table v-if="showtable==true" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
+      <el-table v-if="showtable==true" :row-style="{height: '35px'}" :cell-style="{padding: '0px'}" :header-cell-style="{background: '#ffffff'}" :data="list" max-height="300" class="table" border @row-dblclick="dbSelected" @selection-change="handleSelectionChange">
         <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
@@ -93,445 +94,366 @@
   </app-container>
 </template>
 <script>
-import editCarInfo from '@/views/carinfo/editCarInfo'
-import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
-import { getDictCode } from '@/api/dict'
-import DeptSelect from '@/components/DeptSelect'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
-
-export default {
-  name: 'ListOverview',
-  components: { DeptSelect, editCarInfo },
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '30',
-      online: 0,
-      offline: 0,
-      showtable: true,
-      deptShow: true,
-      listQuery: {
-        description: '',
-        carCode: '',
-        carType: '',
-        deptId: '',
-        offset: 1,
-        limit: 15
-      }, // 查询条件
-      columns: [
-        {
-          text: '车辆描述',
-          value: 'description',
-          align: 'center'
+  import editCarInfo from '@/views/carinfo/editCarInfo'
+  import { getOverviewList, offlineCount, getOverviewAllList } from '@/api/overview'
+  import { getDictCode } from '@/api/dict'
+  import DeptSelect from '@/components/DeptSelect'
+  import { getServerList } from '@/api/server'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+  var esri = require('esri-leaflet')
+  export default {
+    name: 'ListOverview',
+    components: { DeptSelect, editCarInfo },
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '30',
+        showBase:false,
+        showImg:true,
+        online: 0,
+        offline: 0,
+        showtable: true,
+        deptShow: true,
+        listQuery: {
+          description: '',
+          carCode: '',
+          carType: '',
+          deptId: '',
+          offset: 1,
+          limit: 15
+        }, // 查询条件
+        columns: [
+          {
+            text: '车辆描述',
+            value: 'description',
+            align: 'center'
+          },
+          {
+            text: '车牌号',
+            value: 'carCode',
+            align: 'center',
+            width: 90
+          },
+          {
+            text: '状态',
+            value: 'status',
+            align: 'center',
+            width: 70
+          }
+        ], // 动态加载的表头
+        TianDiTu: {
+          Normal: {
+            Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Satellite: {
+            Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Terrain: {
+            Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
+          },
+          Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
         },
-        {
-          text: '车牌号',
-          value: 'carCode',
-          align: 'center',
-          width: 90
-        },
-        {
-          text: '状态',
-          value: 'status',
-          align: 'center',
-          width: 70
-        }
-      ], // 动态加载的表头
-      TianDiTu: {
-        Normal: {
-          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Satellite: {
-          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Terrain: {
-          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
-        },
-        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+        pointlayer: null,
+        imglayer: null,
+        featurelayer: null,
+        baselayer: [],
+        baseUrl: '',
+        mapUrl: '',
+        list: [], // 列表数据
+        alllist: [], // 列表数据
+        map: null,
+        initlocation: false,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        // listLoading: true, // 加载动画
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      showBase(val) {
+        if(val)  this.map.addLayer(this.featurelayer)
+        else this.map.removeLayer(this.featurelayer)
       },
-      baselayer: [],
-      list: [], // 列表数据
-      alllist: [], // 列表数据
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      // listLoading: true, // 加载动画
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+      showImg(val) {
+        if(val)  this.map.addLayer(this.imglayer)
+        else this.map.removeLayer(this.imglayer)
+      },
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      getDictCode('carType').then(response => {
+        this.cartypelist = response.data
+      })
+      this.initMap()
+      setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      dbSelected(row) {
+        this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
+      },
+      tableclick() {
+        this.showtable = !this.showtable
+      },
+      detail(id) {
+        this.dialogFormVisible = true
+        var item = { id: id }
+        this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
+      },
+      track(id) {
+        this.$router.push({
+          name: 'Track',
+          query: {
+            id: id
+          }
+        })
+      },
+      trail(id, row) {
+        this.$router.push({
+          name: 'Trail',
+          query: {
+            id: id,
+            name: row.carCode + '-' + row.carTypeName
+          }
+        })
+      },
+      async initMap() {
+        const map = L.map('map', {
+          minZoom: 3,
+          maxZoom: 18,
+          center: [27.75962, 116.06021],
+          zoom: 16,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG3857
+        })
+        map.doubleClickZoom.disable()
+        this.map = map // data上需要挂载
+        window.map = map
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.imglayer = L.tileLayer(this.baseConfig.satelliteUrl, {
+          maxZoom: 22
+        }).addTo(map)
+        var  listQuery={
+          offset: 1,
+          limit: 15
+        }
+        const res = await getServerList(listQuery)
+        var list = res.data.rows
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].name === 'GIS地图') {
+            this.baseUrl = list[i].url
+          } else if (list[i].name === '二维地图URL') {
+            this.mapUrl = list[i].url
+          }
+        }
+        this.featurelayer = esri.dynamicMapLayer({
+          url: this.baseUrl + this.mapUrl,
+          minZoom: 4, // 最小缩放等级
+          maxZoom: 21// 最大缩放等级
+        })
+        this.fetchData()
+      },
+      search() {
+        this.fetchData(false)
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchCar()
-      }
-    }
-  },
-  mounted() {
-    getDictCode('carType').then(response => {
-      this.cartypelist = response.data
-    })
-    this.initMap()
-    this.fetchData()
-    setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    dbSelected(row) {
-      this.map.setView({ lat: Number(row.lat), lng: Number(row.lng) }, 18)
-    },
-    tableclick() {
-      this.showtable = !this.showtable
-    },
-    detail(id) {
-      this.dialogFormVisible = true
-      var item = { id: id }
-      this.$refs.editCarInfo.initDialog('detail', this.dialogFormVisible, item)
-    },
-    track(id) {
-      this.$router.push({
-        name: 'Track',
-        query: {
-          id: id
+      },
+      setZoom(points) {
+        // console.log(points)
+        if (points.length > 0) {
+          var maxLng = points[0][1]
+          var minLng = points[0][1]
+          var maxLat = points[0][0]
+          var minLat = points[0][0]
+          var res
+          for (var i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+          var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+          this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+        } else {
+          // 没有坐标，显示全中国
+          this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
         }
-      })
-    },
-    trail(id, row) {
-      this.$router.push({
-        name: 'Trail',
-        query: {
-          id: id,
-          name: row.carCode + '-' + row.carTypeName
+      },
+      getZoom(maxLng, minLng, maxLat, minLat) {
+        var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
+        var latlng = L.latLng(maxLat, maxLng)
+        var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+        // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+          if (zoom[i] - distance > 0) {
+            return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+          }
         }
-      })
-    },
-    initMap() {
-      const map = L.map('map', {
-        minZoom: 3,
-        maxZoom: 18,
-        center: [27.75962, 116.06021],
-        zoom: 11,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      map.doubleClickZoom.disable()
-      this.map = map // data上需要挂载
-      window.map = map
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-    },
-    search() {
-      this.fetchData(false)
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    setZoom(points) {
-      // console.log(points)
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
+      },
+      fetchData(isNowPage = true) {
+        offlineCount(this.listQuery).then(response => {
+          this.online = response.data.online
+          this.offline = response.data.offline
+        })
+        this.sec = Number(this.refresh)
+        if (!isNowPage) {
+          this.listQuery.offset = 1
         }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-    },
-    setCenter(points) {
-      // 获取折线中心点坐标
-      if (points.length > 0) {
-        let maxLng = points[0][1]
-        let minLng = points[0][1]
-        let maxLat = points[0][0]
-        let minLat = points[0][0]
-        let res
-        for (let i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+        getOverviewList(this.listQuery).then(response => {
+          this.list = response.data.rows
+          this.total = parseInt(response.data.total)
+        })
+        getOverviewAllList(this.listQuery).then(response => {
+          this.alllist = response.data
+          if(this.pointlayer!==null) this.map.removeLayer(this.pointlayer)
+          this.pointlayer = new L.layerGroup().addTo(this.map)
+          var list = []
+          for (i = 0; i < this.alllist.length; i++) {
+            if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
+              continue
+            }
+            var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
+            list.push(item)
+          }
+          // if (list.length !== 0) {
+          //   this.setZoom(list)
+          // }
+          var Icon
+          for (var i = 0; i < this.alllist.length; i++) {
+            if(i===0 && !this.initlocation){
+              this.map.setView({ lat: this.alllist[0].lat, lng:  this.alllist[0].lng },16)
+              this.initlocation = true
+            }
+            if (this.alllist[i].status === '离线') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '超时') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '停车') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '行驶') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-online.png'), // 绿
+                iconSize: [40, 40]
+              })
+            } else if (this.alllist[i].status === '报警') {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
+                iconSize: [40, 40]
+              })
+            }
+            var myIcon = L.divIcon({
+              html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
+              className: '',
+              iconSize: [100, 15]
+            })
+            L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.pointlayer)
+            const { carId,description, carTypeName, deptName, status,lng,lat, upTime,speed } = this.alllist[i]
+            var btndetail = 'btndetail'+ carId
+            var btntrack = 'btntrack'+ carId
+            var btntrail = 'btntrail'+ carId
+            var str = `<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label> ${description}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label> ${carTypeName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label> ${deptName}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label> ${status}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label> ${lng} , ${lat}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label> ${upTime}</div>
+            <div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label> ${speed} (km/h)</div>
+            <div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id=${btndetail}>详情</button>
+            <button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;
+            color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrack}>跟踪</button>
+            <button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id=${btntrail}>轨迹</button></div></div>`
+            var popup = L.popup().setContent(str)
+            var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
+              icon: Icon,
+              slug: this.alllist[i],
+              rotationAngle: this.alllist[i].direction,
+              zIndexOffset: 100000
+            }).addTo(this.pointlayer).bindPopup(popup)
 
-        this.map.setView({ lat: cenLat, lng: cenLng })
-      }
-    },
-    fetchData(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
-      }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
+            var that = this
+            marker.on('click', function(e) {
+              console.log('按钮：',document.getElementById(btndetail))
+              document.getElementById(btndetail).onclick = function() {
+                console.log('carId:',e.sourceTarget.options.slug.carId)
+                that.detail(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrack).onclick = function() {
+                that.track(e.sourceTarget.options.slug.carId)
+              }
+              document.getElementById(btntrail).onclick = function() {
+                that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
+              }
+            })
           }
         })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        if (list.length !== 0) {
-          this.setZoom(list)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    fetchCar(isNowPage = true) {
-      // this.listLoading = true
-      offlineCount(this.listQuery).then(response => {
-        this.online = response.data.online
-        this.offline = response.data.offline
-      })
-      this.sec = Number(this.refresh)
-      if (!isNowPage) {
-        this.listQuery.offset = 1
+      },
+      indexMethod(index) {
+        return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+      },
+      // 改变页容量
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.fetchData()
+      },
+      // 改变当前页
+      handleCurrentChange(val) {
+        this.listQuery.offset = val
+        this.fetchData()
+      },
+      // 多选触发方法
+      handleSelectionChange(val) {
+        this.multipleSelection = val
       }
-      getOverviewList(this.listQuery).then(response => {
-        this.list = response.data.rows
-        this.total = parseInt(response.data.total)
-        // this.listLoading = false
-      })
-      getOverviewAllList(this.listQuery).then(response => {
-        this.alllist = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        var list = []
-        for (i = 0; i < this.alllist.length; i++) {
-          if (Number(this.alllist[i].lat) === 0 && Number(this.alllist[i].lng) === 0) {
-            continue
-          }
-          var item = [Number(this.alllist[i].lat), Number(this.alllist[i].lng)]
-          list.push(item)
-        }
-        var Icon
-        for (var i = 0; i < this.alllist.length; i++) {
-          if (this.alllist[i].status === '离线') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-offline.png'), // 灰
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '超时') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-timeout.png'), // 橙
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '停车') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-stop.png'), // 黄
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '行驶') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-online.png'), // 绿
-              iconSize: [40, 40]
-            })
-          } else if (this.alllist[i].status === '报警') {
-            Icon = L.icon({
-              iconUrl: require('../../assets/global_images/car-alarm.png'), // 红
-              iconSize: [40, 40]
-            })
-          }
-          var myIcon = L.divIcon({
-            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + this.alllist[i].deptName + '_' + this.alllist[i].description + '</div>',
-            className: '',
-            iconSize: [100, 15]
-          })
-          L.marker([this.alllist[i].lat, this.alllist[i].lng], { icon: myIcon }).addTo(this.map)
-          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + this.alllist[i].description + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + this.alllist[i].carTypeName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + this.alllist[i].deptName + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + this.alllist[i].status + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.alllist[i].lng + ' , ' + this.alllist[i].lat + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.alllist[i].upTime + '</div>' +
-            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.alllist[i].speed + '(km/h)</div>' +
-            '<div style="padding-top: 8px"><button style="margin-left: 80px;background-color: #42b983;border-color: #42b983;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px"  id="btndetail">详情</button>' +
-            '<button style="margin-right: 5px;margin-left: 5px;background-color: #409eff;border-color: #409eff;' +
-            'color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrack">跟踪</button>' +
-            '<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 8px;font-size: 12px;border-radius: 4px" id="btntrail">轨迹</button></div></div>'
-          var popup = L.popup().setContent(str)
-          var marker = L.marker([this.alllist[i].lat, this.alllist[i].lng], {
-            icon: Icon,
-            slug: this.alllist[i],
-            rotationAngle: this.alllist[i].direction,
-            zIndexOffset: 100000
-          }).addTo(this.map).bindPopup(popup)
-
-          var that = this
-          marker.on('click', function(e) {
-            document.getElementById('btndetail').onclick = function() {
-              that.detail(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrack').onclick = function() {
-              that.track(e.sourceTarget.options.slug.carId)
-            }
-            document.getElementById('btntrail').onclick = function() {
-              that.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
-            }
-          })
-        }
-      })
-    },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
-      this.fetchData()
-    },
-    // 多选触发方法
-    handleSelectionChange(val) {
-      this.multipleSelection = val
     }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   /*.el-table__header tr,*/
   /*.el-table__header th {*/
-    /*padding: 0;*/
-    /*height: 40px;*/
-    /*background-color: #f8f8f8;*/
+  /*padding: 0;*/
+  /*height: 40px;*/
+  /*background-color: #f8f8f8;*/
   /*}*/
   /*.table{*/
-    /*margin-bottom: 20px;*/
+  /*margin-bottom: 20px;*/
   /*}*/
   /*.pagination-container{*/
-    /*margin-bottom: 100px;*/
+  /*margin-bottom: 100px;*/
   /*}*/
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -566,7 +488,7 @@
     width: 458px;
     background-color: #ffffff;
     /* margin-top: 20px; */
-    padding-top: 20px;
+    margin-top: 25px;
     padding-bottom: 10px;
   }
   .table-name{
@@ -594,14 +516,14 @@
     border-top: 12px solid #ebebeb;
   }
   /deep/ .el-table--scrollable-y .el-table__body-wrapper{
-      padding-bottom: 11px !important;
+    padding-bottom: 11px !important;
   }
   /*/deep/ .el-radio__input.is-checked+.el-radio__label {*/
-    /*color: red;*/
+  /*color: red;*/
   /*}*/
   /*/deep/ .el-radio__input.is-checked .el-radio__inner {*/
-    /*border-color: #e91e63;*/
-    /*background: #e91e63;*/
+  /*border-color: #e91e63;*/
+  /*background: #e91e63;*/
   /*}*/
   /deep/ .el-radio{
     margin-right: 5px;
diff --git a/src/views/overview/track.vue b/src/views/overview/track.vue
index 424fa11..cf123da 100644
--- a/src/views/overview/track.vue
+++ b/src/views/overview/track.vue
@@ -27,148 +27,148 @@
   </div>
 </template>
 <script>
-import { track } from '@/api/overview'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-export default {
-  name: 'Track',
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '10',
-      showtable: true,
-      id: '',
-      marker: null,
-      label: null,
-      baselayer: [],
-      map: null,
-      total: 0, // 数据总数
-      sec: 10, // 数据总数
-      fullscreenLoading: false, // 全屏加载动画
-      cartypelist: [], // 类型列表
-      deptlist: [] // 类型列表
-    }
-  },
-  watch: {
-    sec(val) {
-      if (val === 0) {
+  import { track } from '@/api/overview'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  export default {
+    name: 'Track',
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '10',
+        showtable: true,
+        id: '',
+        marker: null,
+        label: null,
+        baselayer: [],
+        map: null,
+        total: 0, // 数据总数
+        sec: 10, // 数据总数
+        fullscreenLoading: false, // 全屏加载动画
+        cartypelist: [], // 类型列表
+        deptlist: [] // 类型列表
+      }
+    },
+    watch: {
+      sec(val) {
+        if (val === 0) {
+          this.sec = Number(this.refresh)
+          this.fetchData()
+        }
+      }
+    },
+    mounted() {
+      if (this.$route.query) {
+        this.id = this.$route.query.id
+      }
+      this.initMap()
+      this.fetchData()
+      this.timer = setInterval(() => {
+        this.sec--
+      }, 1000)
+    },
+    methods: {
+      initMap() {
+        track(this.id).then(response => {
+          var data = response.data
+          var map
+          if (data.lat !== '') {
+            map = L.map('map', {
+              minZoom: 3,
+              maxZoom: 18,
+              center: [data.lat, data.lng],
+              zoom: 16,
+              zoomControl: false,
+              attributionControl: false,
+              crs: L.CRS.EPSG3857
+            })
+          } else {
+            map = L.map('map', {
+              minZoom: 3,
+              maxZoom: 18,
+              center: [27.75962, 116.06021],
+              zoom: 16,
+              zoomControl: false,
+              attributionControl: false,
+              crs: L.CRS.EPSG3857
+            })
+          }
+          this.map = map // data上需要挂载
+          window.map = map
+          this.baselayer.push(L.tileLayer(
+            'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+          ).addTo(map))
+          this.baselayer.push(L.tileLayer(
+            'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+            { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+          ).addTo(map))
+        })
+      },
+      clicktime() {
         this.sec = Number(this.refresh)
-        this.fetchData()
+      },
+      fetchData() {
+        track(this.id).then(response => {
+          var data = response.data
+          if (this.marker != null) {
+            this.marker.remove()
+            this.label.remove()
+          }
+          var Icon
+          if (data.status === '') {
+            return
+          } else if (data.status === '离线') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-offline.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '超时') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-timeout.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '停车') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-stop.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '行驶') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-online.png'),
+              iconSize: [40, 40]
+            })
+          } else if (data.status === '报警') {
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/car-alarm.png'),
+              iconSize: [40, 40]
+            })
+          }
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
+          var myIcon = L.divIcon({
+            html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
+            className: '',
+            iconSize: [100, 15]
+          })
+          this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
+          var popup = L.popup().setContent(str)
+          this.marker = L.marker([data.lat, data.lng], {
+            icon: Icon,
+            slug: data,
+            rotationAngle: data.direction
+          }).addTo(this.map).bindPopup(popup)
+          this.map.setView({ lat: data.lat, lng: data.lng },16)
+        })
       }
     }
-  },
-  mounted() {
-    if (this.$route.query) {
-      this.id = this.$route.query.id
-    }
-    this.initMap()
-    this.fetchData()
-    this.timer = setInterval(() => {
-      this.sec--
-    }, 1000)
-  },
-  methods: {
-    initMap() {
-      track(this.id).then(response => {
-        var data = response.data
-        var map
-        if (data.lat !== '') {
-          map = L.map('map', {
-            minZoom: 3,
-            maxZoom: 14,
-            center: [data.lat, data.lng],
-            zoom: 12,
-            zoomControl: false,
-            attributionControl: false,
-            crs: L.CRS.EPSG3857
-          })
-        } else {
-          map = L.map('map', {
-            minZoom: 3,
-            maxZoom: 11,
-            center: [27.75962, 116.06021],
-            zoom: 12,
-            zoomControl: false,
-            attributionControl: false,
-            crs: L.CRS.EPSG3857
-          })
-        }
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-      })
-    },
-    clicktime() {
-      this.sec = Number(this.refresh)
-    },
-    fetchData() {
-      track(this.id).then(response => {
-        var data = response.data
-        if (this.marker != null) {
-          this.marker.remove()
-          this.label.remove()
-        }
-        var Icon
-        if (data.status === '') {
-          return
-        } else if (data.status === '离线') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-offline.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '超时') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-timeout.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '停车') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-stop.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '行驶') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-online.png'),
-            iconSize: [40, 40]
-          })
-        } else if (data.status === '报警') {
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/car-alarm.png'),
-            iconSize: [40, 40]
-          })
-        }
-        var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆位置概要信息</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">描述</label>' + data.description + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">类型</label>' + data.carTypeName + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">单位</label>' + data.deptName + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">状态</label>' + data.status + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + data.lng + ' , ' + data.lat + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + data.upTime + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + data.speed + '(km/h)</div></div>'
-        var myIcon = L.divIcon({
-          html: '<div style="font-size: 13px;font-weight: bold;padding-top: 17px;text-align:center;"> ' + data.deptName + '_' + data.description + '</div>',
-          className: '',
-          iconSize: [100, 15]
-        })
-        this.label = L.marker([data.lat, data.lng], { icon: myIcon }).addTo(this.map)
-        var popup = L.popup().setContent(str)
-        this.marker = L.marker([data.lat, data.lng], {
-          icon: Icon,
-          slug: data,
-          rotationAngle: data.direction
-        }).addTo(this.map).bindPopup(popup)
-        this.map.setView({ lat: data.lat, lng: data.lng })
-      })
-    }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   .rightcard{
diff --git a/src/views/overview/trail.vue b/src/views/overview/trail.vue
index c043833..0f6e3b6 100644
--- a/src/views/overview/trail.vue
+++ b/src/views/overview/trail.vue
@@ -43,116 +43,88 @@
   </app-container>
 </template>
 <script>
-import trailStatic from '@/views/overview/trailStatic'
-import { trail } from '@/api/overview'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
-export default {
-  name: 'Trail',
-  components: { trailStatic },
-  data() {
-    return {
-      dialogFormVisible: false, // 是否显示编辑框
-      refresh: '10',
-      sec: 50,
-      showindex: 0,
-      state: 0, // 1:开始 2:暂停 3:停止
-      showtable: true,
-      deptShow: true,
-      listQuery: {
-        carId: '',
-        startTime: '',
-        endTime: ''
-      }, // 查询条件
-      baselayer: [],
-      carName: '',
-      dateTimeRange: [],
-      pathlist: [], // 列表数据
-      list: [], // 列表数据
-      map: null,
-      listLoading: true, // 加载动画
-      fullscreenLoading: false, // 全屏加载动画
-      timer: null,
-      carpoint: null
-    }
-  },
-  watch: {
-    dateTimeRange(val) {
-      if (val && val.length > 0) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      } else {
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
+  import trailStatic from '@/views/overview/trailStatic'
+  import { trail } from '@/api/overview'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+  export default {
+    name: 'Trail',
+    components: { trailStatic },
+    data() {
+      return {
+        dialogFormVisible: false, // 是否显示编辑框
+        refresh: '10',
+        sec: 50,
+        showindex: 0,
+        state: 0, // 1:开始 2:暂停 3:停止
+        showtable: true,
+        deptShow: true,
+        listQuery: {
+          carId: '',
+          startTime: '',
+          endTime: ''
+        }, // 查询条件
+        baselayer: [],
+        carName: '',
+        dateTimeRange: [],
+        pathlist: [], // 列表数据
+        list: [], // 列表数据
+        map: null,
+        listLoading: true, // 加载动画
+        fullscreenLoading: false, // 全屏加载动画
+        timer: null,
+        carpoint: null
       }
-    }
-  },
-  mounted() {
-    if (this.$route.query) {
-      this.listQuery.carId = this.$route.query.id
-      this.carName = this.$route.query.name
-    }
-    const date = new Date()
-    const year = date.getFullYear() // 年
-    const month = date.getMonth() + 1 // 月
-    const day = date.getDate() // 日
-    this.dateTimeRange = [year + '-' + month + '-' + day + ' 00:00:00', year + '-' + month + '-' + day + ' 23:59:59']
-    this.initMap()
-    this.settimer()
-  },
-  methods: {
-    settimer() {
-      clearTimeout(this.timer)
-      this.timer = setInterval(() => {
-        this.showcar()
-      }, this.sec * 10)
     },
-    staticspeed() {
-      this.dialogFormVisible = true
-      this.$refs.trailStatic.initDialog(this.dialogFormVisible, this.listQuery, this.carName)
-    },
-    showcar() {
-      if (this.state !== 1) {
-        return
+    watch: {
+      dateTimeRange(val) {
+        if (val && val.length > 0) {
+          this.listQuery.startTime = val[0]
+          this.listQuery.endTime = val[1]
+        } else {
+          this.listQuery.startTime = ''
+          this.listQuery.endTime = ''
+        }
       }
-      this.showindex++
-      if (this.showindex === this.list.length) {
-        clearTimeout(this.timer)
-        var that = this
-        setTimeout(function() { that.stop() }, this.sec * 10)
-        return
-      }
-      this.carpoint.remove()
-      // add point
-      var Icon = L.icon({
-        iconUrl: require('../../assets/global_images/car.png'),
-        iconSize: [40, 40]
-      })
-      var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
-      '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[this.showindex].lng + ' , ' + this.list[this.showindex].lat + '</div>' +
-      '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[this.showindex].upTime + '</div>' +
-      '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[this.showindex].speed + '(km/h)</div>' +
-      '</div>'
-      var popup = L.popup().setContent(str)
-      this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
-        icon: Icon,
-        rotationAngle: this.list[this.showindex].direction
-      }).addTo(this.map).bindPopup(popup)
-      this.carpoint.openPopup()
     },
-    play() {
-      this.state = 1
+    mounted() {
+      if (this.$route.query) {
+        this.listQuery.carId = this.$route.query.id
+        this.carName = this.$route.query.name
+      }
+      const date = new Date()
+      const year = date.getFullYear() // 年
+      const month = date.getMonth() + 1 // 月
+      const day = date.getDate() // 日
+      this.dateTimeRange = [year + '-' + month + '-' + day + ' 00:00:00', year + '-' + month + '-' + day + ' 23:59:59']
+      this.initMap()
       this.settimer()
     },
-    pause() {
-      this.state = 2
-    },
-    changepos() {
-      if (this.list.length !== 0) {
-        if (this.carpoint !== null) {
-          this.carpoint.remove()
+    methods: {
+      settimer() {
+        clearTimeout(this.timer)
+        this.timer = setInterval(() => {
+          this.showcar()
+        }, this.sec * 10)
+      },
+      staticspeed() {
+        this.dialogFormVisible = true
+        this.$refs.trailStatic.initDialog(this.dialogFormVisible, this.listQuery, this.carName)
+      },
+      showcar() {
+        if (this.state !== 1) {
+          return
         }
+        this.showindex++
+        if (this.showindex === this.list.length) {
+          clearTimeout(this.timer)
+          var that = this
+          setTimeout(function() { that.stop() }, this.sec * 10)
+          return
+        }
+        this.carpoint.remove()
+        // add point
         var Icon = L.icon({
           iconUrl: require('../../assets/global_images/car.png'),
           iconSize: [40, 40]
@@ -165,170 +137,198 @@
         var popup = L.popup().setContent(str)
         this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
           icon: Icon,
-          rotationAngle: Number(this.list[this.showindex].direction)
+          rotationAngle: this.list[this.showindex].direction
         }).addTo(this.map).bindPopup(popup)
         this.carpoint.openPopup()
-      }
-    },
-    stop() {
-      this.state = 3
-      if (this.list.length !== 0) {
-        if (this.carpoint !== null) {
-          this.carpoint.remove()
-        }
-        var Icon = L.icon({
-          iconUrl: require('../../assets/global_images/car.png'),
-          iconSize: [40, 40]
-        })
-        var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[0].lng + ' , ' + this.list[0].lat + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[0].upTime + '</div>' +
-          '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[0].speed + '(km/h)</div>' +
-          '</div>'
-        var popup = L.popup().setContent(str)
-        this.carpoint = L.marker([this.list[0].lat, this.list[0].lng], {
-          icon: Icon,
-          rotationAngle: Number(this.list[0].direction)
-        }).addTo(this.map).bindPopup(popup)
-        this.carpoint.openPopup()
-        this.showindex = 0
-      }
-    },
-    formatTooltip(val) {
-      return val / 100
-    },
-    timeTooltip(val) {
-      if (this.list.length !== 0) {
-        return this.list[val].upTime
-      }
-    },
-    initMap() {
-      const map = L.map('map', {
-        minZoom: 3,
-        maxZoom: 18,
-        center: [27.75962, 116.06021],
-        zoom: 11,
-        zoomControl: false,
-        attributionControl: false,
-        crs: L.CRS.EPSG3857
-      })
-      this.map = map // data上需要挂载
-      window.map = map
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baselayer.push(L.tileLayer(
-        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.search()
-    },
-    search() {
-      this.fetchData(false)
-    },
-    setZoom(points) {
-      console.log(points)
-      if (points.length > 0) {
-        var maxLng = points[0][1]
-        var minLng = points[0][1]
-        var maxLat = points[0][0]
-        var minLat = points[0][0]
-        var res
-        for (var i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
-        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
-      } else {
-        // 没有坐标，显示全中国
-        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
-      }
-    },
-    getZoom(maxLng, minLng, maxLat, minLat) {
-      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
-      var latlng = L.latLng(maxLat, maxLng)
-      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
-      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
-      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
-        if (zoom[i] - distance > 0) {
-          console.log(i)
-          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
-        }
-      }
-    },
-    setCenter(points) {
-      // 获取折线中心点坐标
-      if (points.length > 0) {
-        let maxLng = points[0][1]
-        let minLng = points[0][1]
-        let maxLat = points[0][0]
-        let minLat = points[0][0]
-        let res
-        for (let i = points.length - 1; i >= 0; i--) {
-          res = points[i]
-          if (res[1] > maxLng) maxLng = res[1]
-          if (res[1] < minLng) minLng = res[1]
-          if (res[0] > maxLat) maxLat = res[0]
-          if (res[0] < minLat) minLat = res[0]
-        }
-        const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
-        const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
-
-        this.map.setView({ lat: cenLat, lng: cenLng })
-      }
-    },
-    fetchData() { // 划线
-      this.listLoading = true
-      trail(this.listQuery).then(response => {
-        this.list = response.data
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        if (this.list.length === 0) {
-          this.$message.warning('查询结果为空')
-        }
+      },
+      play() {
+        this.state = 1
+        this.settimer()
+      },
+      pause() {
+        this.state = 2
+      },
+      changepos() {
         if (this.list.length !== 0) {
-          var myStyle = {
-            'color': '#e69010',
-            'weight': 5
+          if (this.carpoint !== null) {
+            this.carpoint.remove()
           }
-          this.pathlist = []
-          for (var i = 0; i < this.list.length; i++) {
-            var item = [Number(this.list[i].lat), Number(this.list[i].lng)]
-            this.pathlist.push(item)
-          }
-          L.polyline(this.pathlist, myStyle).addTo(this.map)
-          this.setZoom(this.pathlist)
           var Icon = L.icon({
-            iconUrl: require('../../assets/global_images/start.png'),
+            iconUrl: require('../../assets/global_images/car.png'),
             iconSize: [40, 40]
           })
-          L.marker([this.list[0].lat, this.list[0].lng], {
-            icon: Icon
-          }).addTo(this.map)
-          Icon = L.icon({
-            iconUrl: require('../../assets/global_images/end.png'),
-            iconSize: [40, 40]
-          })
-          L.marker([this.list[this.list.length - 1].lat, this.list[this.list.length - 1].lng], {
-            icon: Icon
-          }).addTo(this.map)
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[this.showindex].lng + ' , ' + this.list[this.showindex].lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[this.showindex].upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[this.showindex].speed + '(km/h)</div>' +
+            '</div>'
+          var popup = L.popup().setContent(str)
+          this.carpoint = L.marker([this.list[this.showindex].lat, this.list[this.showindex].lng], {
+            icon: Icon,
+            rotationAngle: Number(this.list[this.showindex].direction)
+          }).addTo(this.map).bindPopup(popup)
+          this.carpoint.openPopup()
         }
-        this.stop()
-      })
+      },
+      stop() {
+        this.state = 3
+        if (this.list.length !== 0) {
+          if (this.carpoint !== null) {
+            this.carpoint.remove()
+          }
+          var Icon = L.icon({
+            iconUrl: require('../../assets/global_images/car.png'),
+            iconSize: [40, 40]
+          })
+          var str = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆轨迹点信息</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + this.list[0].lng + ' , ' + this.list[0].lat + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + this.list[0].upTime + '</div>' +
+            '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + this.list[0].speed + '(km/h)</div>' +
+            '</div>'
+          var popup = L.popup().setContent(str)
+          this.carpoint = L.marker([this.list[0].lat, this.list[0].lng], {
+            icon: Icon,
+            rotationAngle: Number(this.list[0].direction)
+          }).addTo(this.map).bindPopup(popup)
+          this.carpoint.openPopup()
+          this.showindex = 0
+        }
+      },
+      formatTooltip(val) {
+        return val / 100
+      },
+      timeTooltip(val) {
+        if (this.list.length !== 0) {
+          return this.list[val].upTime
+        }
+      },
+      initMap() {
+        const map = L.map('map', {
+          minZoom: 3,
+          maxZoom: 18,
+          center: [27.75962, 116.06021],
+          zoom: 11,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG3857
+        })
+        this.map = map // data上需要挂载
+        window.map = map
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.baselayer.push(L.tileLayer(
+          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+        ).addTo(map))
+        this.search()
+      },
+      search() {
+        this.fetchData(false)
+      },
+      setZoom(points) {
+        console.log(points)
+        if (points.length > 0) {
+          var maxLng = points[0][1]
+          var minLng = points[0][1]
+          var maxLat = points[0][0]
+          var minLat = points[0][0]
+          var res
+          for (var i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+          var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
+          this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
+        } else {
+          // 没有坐标，显示全中国
+          this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
+        }
+      },
+      getZoom(maxLng, minLng, maxLat, minLat) {
+        var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000']// 级别18到3。
+        var latlng = L.latLng(maxLat, maxLng)
+        var distance = latlng.distanceTo(L.latLng(minLat, minLng))
+        // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
+        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
+          if (zoom[i] - distance > 0) {
+            console.log(i)
+            return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+          }
+        }
+      },
+      setCenter(points) {
+        // 获取折线中心点坐标
+        if (points.length > 0) {
+          let maxLng = points[0][1]
+          let minLng = points[0][1]
+          let maxLat = points[0][0]
+          let minLat = points[0][0]
+          let res
+          for (let i = points.length - 1; i >= 0; i--) {
+            res = points[i]
+            if (res[1] > maxLng) maxLng = res[1]
+            if (res[1] < minLng) minLng = res[1]
+            if (res[0] > maxLat) maxLat = res[0]
+            if (res[0] < minLat) minLat = res[0]
+          }
+          const cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
+          const cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
+
+          this.map.setView({ lat: cenLat, lng: cenLng })
+        }
+      },
+      fetchData() { // 划线
+        this.listLoading = true
+        trail(this.listQuery).then(response => {
+          this.list = response.data
+          var base = this.baselayer
+          this.map.eachLayer(function(layer) {
+            if (layer !== base[0] && layer !== base[1]) {
+              layer.remove()
+            }
+          })
+          if (this.list.length === 0) {
+            this.$message.warning('查询结果为空')
+          }
+          if (this.list.length !== 0) {
+            var myStyle = {
+              'color': '#e69010',
+              'weight': 5
+            }
+            this.pathlist = []
+            for (var i = 0; i < this.list.length; i++) {
+              var item = [Number(this.list[i].lat), Number(this.list[i].lng)]
+              this.pathlist.push(item)
+            }
+            L.polyline(this.pathlist, myStyle).addTo(this.map)
+            this.setZoom(this.pathlist)
+            var Icon = L.icon({
+              iconUrl: require('../../assets/global_images/start.png'),
+              iconSize: [40, 40]
+            })
+            L.marker([this.list[0].lat, this.list[0].lng], {
+              icon: Icon
+            }).addTo(this.map)
+            Icon = L.icon({
+              iconUrl: require('../../assets/global_images/end.png'),
+              iconSize: [40, 40]
+            })
+            L.marker([this.list[this.list.length - 1].lat, this.list[this.list.length - 1].lng], {
+              icon: Icon
+            }).addTo(this.map)
+          }
+          this.stop()
+        })
+      }
     }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
   .search-div{
diff --git a/static/project.config.json b/static/project.config.json
index 8ee0219..9758914 100644
--- a/static/project.config.json
+++ b/static/project.config.json
@@ -1,6 +1,7 @@
 {
   "title": "车辆管理系统",
   "baseUrl": "http://111.198.10.15:11409/",
+  "satelliteUrl":"http://223.82.47.232:11502/crtiles005/{z}/{x}/{y}.png",
   "mainPage": "",
   "singleSys": true,
   "city":"崇仁县",