diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/src/main.js b/src/main.js
index 5b3d3ac..44228ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
+// import 'leaflet-canvas-marker'
 /**
  * This project originally used easy-mock to simulate data,
  * but its official service is very unstable,

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/src/main.js b/src/main.js
index 5b3d3ac..44228ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
+// import 'leaflet-canvas-marker'
 /**
  * This project originally used easy-mock to simulate data,
  * but its official service is very unstable,
diff --git a/src/utils/index.js b/src/utils/index.js
index f607910..375dd2b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -296,3 +296,34 @@
 export function uniqueArr(arr) {
   return Array.from(new Set(arr))
 }
+
+const isType = function(type) {
+  return function(arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`
+  }
+}
+
+export const isFunction = isType('Function')
+
+export const isObject = isType('Object')
+
+export const isString = isType('String')
+
+export const isArray = isType('Array')
+
+export const isDate = isType('Date')
+
+// 深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item))
+  } else if (isObject(data)) {
+    let ret = {}
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key])
+    })
+    return ret
+  }
+}

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/src/main.js b/src/main.js
index 5b3d3ac..44228ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
+// import 'leaflet-canvas-marker'
 /**
  * This project originally used easy-mock to simulate data,
  * but its official service is very unstable,
diff --git a/src/utils/index.js b/src/utils/index.js
index f607910..375dd2b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -296,3 +296,34 @@
 export function uniqueArr(arr) {
   return Array.from(new Set(arr))
 }
+
+const isType = function(type) {
+  return function(arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`
+  }
+}
+
+export const isFunction = isType('Function')
+
+export const isObject = isType('Object')
+
+export const isString = isType('String')
+
+export const isArray = isType('Array')
+
+export const isDate = isType('Date')
+
+// 深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item))
+  } else if (isObject(data)) {
+    let ret = {}
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key])
+    })
+    return ret
+  }
+}
diff --git a/src/views/overview/overview_cmap.vue b/src/views/overview/overview_cmap.vue
index c30bcaf..dadc1c0 100644
--- a/src/views/overview/overview_cmap.vue
+++ b/src/views/overview/overview_cmap.vue
@@ -66,23 +66,62 @@
     </div>
     <div v-loading="loading" class="overview-map-container">
       <!--地图-->
-      <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/>
+      <!-- <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/> -->
+      <leaflet-map
+        id="map"
+        ref="map"
+        :show-all="showAll"
+        :show-larm="showAlarm"
+        :alarm-markers="alarmWells"
+        :normal-markers="normalWells"
+        :center="leftLetForm.center"
+        :zooms="leftLetForm.zooms"
+        :zoom="leftLetForm.zoom"
+        :basemaps="leftLetForm.basemaps"
+        @onload="readyMap"
+        @popupCenter="popupCenter"
+      >
+        <!-- <graphic-layer id="lamp" :data="lampList"> -->
+        <!-- <simple-popup slot="popup"/> -->
+        <!-- </graphic-layer> -->
+        <!--      <polyline-layer :routes="routes" color="#5EA279" weight="3"/>-->
+        <!-- <animate-routes-layer ref="routeLayer" :routes="routes" :weight="3" :icon="truckIcon" :icon-size="truckSize" :popup-anchor="truckPopupAnchor" :icon-anchor="truckAnchor" color="#5EA279"/> -->
+      </leaflet-map>
     </div>
   </div>
 </template>
 
 <script>
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getWellType } from '@/api/well'
+import { getWellType, getWellList } from '@/api/well'
+// import { getWellList } from '@/api/overview'
 import { getAlarmsNow } from '@/api/overview'
 import DeptSelect from '../../components/DeptSelect/index'
 import Cmap from '../../components/CMap/components/cmap'
 import CmapMarker from '../../components/CMap/components/cmapMarker'
+import LeafletMap from '../../components/leaftletMap/leafletMap.vue'
+import { deepCopy } from '../../utils/index'
+
 export default {
   name: 'Overview',
-  components: { CmapMarker, Cmap, DeptSelect, SelectTree },
+  components: { CmapMarker, Cmap, DeptSelect, SelectTree, LeafletMap },
   data() {
     return {
+      leftLetForm: {
+        center: [39.9, 116.4], // 地图中心-北京
+        zooms: [8, 18], // 缩放范围
+        zoom: 12, // 缩放
+        basemaps: [
+          // ------------------------------亦庄----------------------------
+          // { name: 'tdtMap', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=map&x={x}&y={y}&z={z}&srs=EPSG%3A3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] },
+          // { name: 'tdtLabel', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=maplabel&x={x}&y={y}&z={z}&srs=EPSG:3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] }
+          // -----------------------------天地图---------------------------
+          { name: 'tdtMap', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          { name: 'tdtLabel', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satellite', group: '影像地图', show: false, url: 'http://t0.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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satelliteLabel', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/cia_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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
+        ]
+      },
       refreshType: 'clock', // 刷新数据方式：clock或websocket
       listQuery: {
         keywords: '', // 关键字
@@ -136,6 +175,8 @@
       alarmList: [], // 报警列表
       alarmListOri: [], // 报警列表
       alarmWells: [], // 显示报警井列表
+      normalWells: [], // 正常井列表
+      normalAllWells: [], // 全部正常井
       alarmWellsOri: [], // 原始报警井列表
       offset: [-10, -10], // 偏移量
       alarmOffset: [-15, -30], // 偏移量
@@ -167,6 +208,7 @@
       showAlarm: true, // 是否显示报警
       hasAlarm: false, // 是否有报警,
       showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      // showAll: true, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: false, // 加载图标是否显示
       massMarks: null, // 海量点
@@ -175,19 +217,24 @@
   },
   watch: {
     showAll(val) {
-      if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+      if (val) { // 显示全部井（包含报警和不报警，为false时只显示报警）
+        this.listQuery.isAlarm = '0' // 是否报警
         // 先清空查询条件
-        this.listQuery.deptid = ''
-        this.listQuery.keywords = ''
-        this.listQuery.wellType = ''
+        this.listQuery.deptid = '' // 组织机构
+        this.listQuery.keywords = '' // 关键字
+        this.listQuery.wellType = '' // 井类型
         // 加载海量点
-        this.$refs.map.renderPoi()
+        // this.$refs.map.renderPoi()
+        if (this.normalAllWells && this.normalAllWells.length) {
+          this.normalWells = deepCopy(this.normalAllWells)
+        } else {
+          this.fetchWellList() // 获取井信息
+        }
         // }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         // 清除海量点
-        this.$refs.map.cleanPoi()
+        // this.$refs.map.cleanPoi()
       }
     },
     showAlarm(val) {
@@ -208,14 +255,17 @@
     this.refreshAlarm()
   },
   methods: {
+    popupCenter(val) {
+      this.leftLetForm.center = val
+    },
     // 地图准备好后的操作
     readyMap() {
       console.log('readyMap')
       const that = this
-      // that.getWellList() // 获取报警的井信息
+      that.fetchWellList() // 获取井信息
       that.refreshAlarm() // 刷新报警内容
       if (this.showAll) {
-        this.$refs.map.renderPoi()
+        this.$refs.map.renderPoi() // 加载海量点
       }
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
         setTimeout(function() {
@@ -239,7 +289,7 @@
         }
       })
     },
-    // 数据查询
+    // 点击查询-数据查询
     search(showMessage = true) {
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
@@ -248,7 +298,9 @@
         this.$message.warning('查询条件不能为空')
       } else {
         this.showClearBtn = true
-        this.filterIcon(showMessage)
+        // this.filterIcon(showMessage)
+        this.fetchWellList() // 获取井列表
+        this.refreshAlarm() // 刷新报警列表
       }
     },
     // 清除查询
@@ -256,71 +308,11 @@
       this.listQuery.wellType = ''
       this.listQuery.deptid = ''
       this.listQuery.keywords = ''
-      this.filterIcon()
+      // this.fetchWellList() // 获取井列表
+      this.normalWells = deepCopy(this.normalAllWells) // 全部正常井信息
+      this.refreshAlarm() // 刷新报警列表
       this.showClearBtn = false
     },
-    // 过滤条件
-    filterIcon(showMessage = false) {
-      this.currentWindow.visible = false // 弹窗隐藏
-      const keywords = this.listQuery.keywords
-      const deptid = this.listQuery.deptid
-      const wellType = this.listQuery.wellType
-      console.log('markers length:', this.markers.length)
-      const showWellCodes = []
-      let center = null
-      if (this.showAll) {
-        this.resetMassMarker()
-      }
-      // 对报警标记进行过滤：
-      // 如果地图上需要显示报警
-      if (this.showAlarm) {
-        this.alarmWells = []
-        // 查询报警的井，是否匹配
-        for (const marker of this.alarmWellsOri) {
-          let show = true
-          // 关键字不为空，且没有匹配成功，不显示
-          if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
-            show = false
-          }
-          // 部门不为空， 且没有匹配成功
-          if (deptid && deptid !== '' && marker.deptid !== deptid) {
-            show = false
-          }
-          // 井类型不为空，且没有匹配成功
-          if (wellType && wellType !== '' && marker.wellType !== wellType) {
-            show = false
-          }
-          // 需要显示，加到alarmWells数组中
-          if (show) {
-            this.alarmWells.push(marker)
-            center = marker.position
-            showWellCodes.push(marker.wellCode)
-          }
-        }
-        // 过滤alarmList列表
-        this.alarmList = []
-        if (showWellCodes.length > 0) {
-          for (const alarm of this.alarmListOri) {
-            const findFlag = showWellCodes.findIndex(code => code === alarm.wellCode)
-            if (findFlag !== -1) {
-              this.alarmList.push(alarm)
-            }
-          }
-        }
-      } else { // 如果地图上不显示报警
-        this.alarmWells = []
-        this.alarmList = []
-      }
-      // 如果没有找到符合要求的井，将全部查询结果隐藏
-      if (center !== null) {
-        this.center = center
-      }
-    },
-    // 过滤海量点
-    resetMassMarker() {
-      // 调用子组件，过滤海量点
-      this.$refs.map.filterPoi(this.listQuery)
-    },
     // 刷新报警列表
     refreshAlarm() {
       console.log('refresh Alarm')
@@ -376,6 +368,74 @@
           }
         }, 1000)
       }
+    },
+    // 获取井列表
+    fetchWellList() {
+      console.log('获取正常井的列表')
+      // this.loading = true
+      // const listQuery = {
+      //   keywords: '', // 关键字
+      //   wellType: '', // 井类型
+      //   deptid: '', // 组织机构
+      //   isAlarm: '0' // 没报警
+      // }
+      const listQuery = {
+        keywords: '',
+        wellType: '',
+        deptid: '',
+        offset: 1,
+        limit: 20
+      }
+      // ------------------------------------------------------------------------------
+      // 先调窨井列表，之后没报警的井接口出来之后再调
+      getWellList(listQuery).then(response => {
+        this.normalWells = response.data.rows
+        const keywords = this.listQuery.keywords
+        const deptid = this.listQuery.deptid
+        const wellType = this.listQuery.wellType
+        if (keywords === '' && deptid === '' && wellType === '') {
+          this.normalAllWells = response.data.rows // 全部正常井
+        }
+        // this.total = parseInt(response.data.total)
+        // this.listLoading = false
+      })
+      // getWellList(listQuery).then(response => {
+      //   this.loading = false
+      //   if (response.code === 200) {
+      //     const wells = response.data
+      //     if (wells.length > 0) {
+      //       // 查询没有报警的井
+      //       if (listQuery.isAlarm === '0') { // 查询状态正常的井
+      //         // this.firstAmount = false
+      //         // const centerxs = []
+      //         // const centerys = []
+      //         // for (const well of wells) {
+      //         //   this.markers.push({
+      //         //     wellId: well.id,
+      //         //     wellCode: well.wellCode,
+      //         //     id: well.id,
+      //         //     name: well.wellCode,
+      //         //     lnglat: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     position: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     positionInfo: well.position,
+      //         //     wellType: well.wellType,
+      //         //     deptid: well.deptid,
+      //         //     bfzt: well.bfzt,
+      //         //     icon: this.commonIcon,
+      //         //     visible: true,
+      //         //     wellStatus: 'normal'
+      //         //   })
+      //         //   centerxs.push(parseFloat(well.coordinateX))
+      //         //   centerys.push(parseFloat(well.coordinateY))
+      //         // }
+      //         // centerxs.sort()
+      //         // centerys.sort()
+      //         // const index = Math.floor(centerxs.length / 2)
+      //         // this.center = [centerxs[index], centerys[index]]
+      //       }
+      //     }
+      //   }
+      // })
     }
   }
 }

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/src/main.js b/src/main.js
index 5b3d3ac..44228ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
+// import 'leaflet-canvas-marker'
 /**
  * This project originally used easy-mock to simulate data,
  * but its official service is very unstable,
diff --git a/src/utils/index.js b/src/utils/index.js
index f607910..375dd2b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -296,3 +296,34 @@
 export function uniqueArr(arr) {
   return Array.from(new Set(arr))
 }
+
+const isType = function(type) {
+  return function(arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`
+  }
+}
+
+export const isFunction = isType('Function')
+
+export const isObject = isType('Object')
+
+export const isString = isType('String')
+
+export const isArray = isType('Array')
+
+export const isDate = isType('Date')
+
+// 深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item))
+  } else if (isObject(data)) {
+    let ret = {}
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key])
+    })
+    return ret
+  }
+}
diff --git a/src/views/overview/overview_cmap.vue b/src/views/overview/overview_cmap.vue
index c30bcaf..dadc1c0 100644
--- a/src/views/overview/overview_cmap.vue
+++ b/src/views/overview/overview_cmap.vue
@@ -66,23 +66,62 @@
     </div>
     <div v-loading="loading" class="overview-map-container">
       <!--地图-->
-      <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/>
+      <!-- <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/> -->
+      <leaflet-map
+        id="map"
+        ref="map"
+        :show-all="showAll"
+        :show-larm="showAlarm"
+        :alarm-markers="alarmWells"
+        :normal-markers="normalWells"
+        :center="leftLetForm.center"
+        :zooms="leftLetForm.zooms"
+        :zoom="leftLetForm.zoom"
+        :basemaps="leftLetForm.basemaps"
+        @onload="readyMap"
+        @popupCenter="popupCenter"
+      >
+        <!-- <graphic-layer id="lamp" :data="lampList"> -->
+        <!-- <simple-popup slot="popup"/> -->
+        <!-- </graphic-layer> -->
+        <!--      <polyline-layer :routes="routes" color="#5EA279" weight="3"/>-->
+        <!-- <animate-routes-layer ref="routeLayer" :routes="routes" :weight="3" :icon="truckIcon" :icon-size="truckSize" :popup-anchor="truckPopupAnchor" :icon-anchor="truckAnchor" color="#5EA279"/> -->
+      </leaflet-map>
     </div>
   </div>
 </template>
 
 <script>
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getWellType } from '@/api/well'
+import { getWellType, getWellList } from '@/api/well'
+// import { getWellList } from '@/api/overview'
 import { getAlarmsNow } from '@/api/overview'
 import DeptSelect from '../../components/DeptSelect/index'
 import Cmap from '../../components/CMap/components/cmap'
 import CmapMarker from '../../components/CMap/components/cmapMarker'
+import LeafletMap from '../../components/leaftletMap/leafletMap.vue'
+import { deepCopy } from '../../utils/index'
+
 export default {
   name: 'Overview',
-  components: { CmapMarker, Cmap, DeptSelect, SelectTree },
+  components: { CmapMarker, Cmap, DeptSelect, SelectTree, LeafletMap },
   data() {
     return {
+      leftLetForm: {
+        center: [39.9, 116.4], // 地图中心-北京
+        zooms: [8, 18], // 缩放范围
+        zoom: 12, // 缩放
+        basemaps: [
+          // ------------------------------亦庄----------------------------
+          // { name: 'tdtMap', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=map&x={x}&y={y}&z={z}&srs=EPSG%3A3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] },
+          // { name: 'tdtLabel', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=maplabel&x={x}&y={y}&z={z}&srs=EPSG:3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] }
+          // -----------------------------天地图---------------------------
+          { name: 'tdtMap', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          { name: 'tdtLabel', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satellite', group: '影像地图', show: false, url: 'http://t0.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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satelliteLabel', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/cia_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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
+        ]
+      },
       refreshType: 'clock', // 刷新数据方式：clock或websocket
       listQuery: {
         keywords: '', // 关键字
@@ -136,6 +175,8 @@
       alarmList: [], // 报警列表
       alarmListOri: [], // 报警列表
       alarmWells: [], // 显示报警井列表
+      normalWells: [], // 正常井列表
+      normalAllWells: [], // 全部正常井
       alarmWellsOri: [], // 原始报警井列表
       offset: [-10, -10], // 偏移量
       alarmOffset: [-15, -30], // 偏移量
@@ -167,6 +208,7 @@
       showAlarm: true, // 是否显示报警
       hasAlarm: false, // 是否有报警,
       showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      // showAll: true, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: false, // 加载图标是否显示
       massMarks: null, // 海量点
@@ -175,19 +217,24 @@
   },
   watch: {
     showAll(val) {
-      if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+      if (val) { // 显示全部井（包含报警和不报警，为false时只显示报警）
+        this.listQuery.isAlarm = '0' // 是否报警
         // 先清空查询条件
-        this.listQuery.deptid = ''
-        this.listQuery.keywords = ''
-        this.listQuery.wellType = ''
+        this.listQuery.deptid = '' // 组织机构
+        this.listQuery.keywords = '' // 关键字
+        this.listQuery.wellType = '' // 井类型
         // 加载海量点
-        this.$refs.map.renderPoi()
+        // this.$refs.map.renderPoi()
+        if (this.normalAllWells && this.normalAllWells.length) {
+          this.normalWells = deepCopy(this.normalAllWells)
+        } else {
+          this.fetchWellList() // 获取井信息
+        }
         // }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         // 清除海量点
-        this.$refs.map.cleanPoi()
+        // this.$refs.map.cleanPoi()
       }
     },
     showAlarm(val) {
@@ -208,14 +255,17 @@
     this.refreshAlarm()
   },
   methods: {
+    popupCenter(val) {
+      this.leftLetForm.center = val
+    },
     // 地图准备好后的操作
     readyMap() {
       console.log('readyMap')
       const that = this
-      // that.getWellList() // 获取报警的井信息
+      that.fetchWellList() // 获取井信息
       that.refreshAlarm() // 刷新报警内容
       if (this.showAll) {
-        this.$refs.map.renderPoi()
+        this.$refs.map.renderPoi() // 加载海量点
       }
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
         setTimeout(function() {
@@ -239,7 +289,7 @@
         }
       })
     },
-    // 数据查询
+    // 点击查询-数据查询
     search(showMessage = true) {
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
@@ -248,7 +298,9 @@
         this.$message.warning('查询条件不能为空')
       } else {
         this.showClearBtn = true
-        this.filterIcon(showMessage)
+        // this.filterIcon(showMessage)
+        this.fetchWellList() // 获取井列表
+        this.refreshAlarm() // 刷新报警列表
       }
     },
     // 清除查询
@@ -256,71 +308,11 @@
       this.listQuery.wellType = ''
       this.listQuery.deptid = ''
       this.listQuery.keywords = ''
-      this.filterIcon()
+      // this.fetchWellList() // 获取井列表
+      this.normalWells = deepCopy(this.normalAllWells) // 全部正常井信息
+      this.refreshAlarm() // 刷新报警列表
       this.showClearBtn = false
     },
-    // 过滤条件
-    filterIcon(showMessage = false) {
-      this.currentWindow.visible = false // 弹窗隐藏
-      const keywords = this.listQuery.keywords
-      const deptid = this.listQuery.deptid
-      const wellType = this.listQuery.wellType
-      console.log('markers length:', this.markers.length)
-      const showWellCodes = []
-      let center = null
-      if (this.showAll) {
-        this.resetMassMarker()
-      }
-      // 对报警标记进行过滤：
-      // 如果地图上需要显示报警
-      if (this.showAlarm) {
-        this.alarmWells = []
-        // 查询报警的井，是否匹配
-        for (const marker of this.alarmWellsOri) {
-          let show = true
-          // 关键字不为空，且没有匹配成功，不显示
-          if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
-            show = false
-          }
-          // 部门不为空， 且没有匹配成功
-          if (deptid && deptid !== '' && marker.deptid !== deptid) {
-            show = false
-          }
-          // 井类型不为空，且没有匹配成功
-          if (wellType && wellType !== '' && marker.wellType !== wellType) {
-            show = false
-          }
-          // 需要显示，加到alarmWells数组中
-          if (show) {
-            this.alarmWells.push(marker)
-            center = marker.position
-            showWellCodes.push(marker.wellCode)
-          }
-        }
-        // 过滤alarmList列表
-        this.alarmList = []
-        if (showWellCodes.length > 0) {
-          for (const alarm of this.alarmListOri) {
-            const findFlag = showWellCodes.findIndex(code => code === alarm.wellCode)
-            if (findFlag !== -1) {
-              this.alarmList.push(alarm)
-            }
-          }
-        }
-      } else { // 如果地图上不显示报警
-        this.alarmWells = []
-        this.alarmList = []
-      }
-      // 如果没有找到符合要求的井，将全部查询结果隐藏
-      if (center !== null) {
-        this.center = center
-      }
-    },
-    // 过滤海量点
-    resetMassMarker() {
-      // 调用子组件，过滤海量点
-      this.$refs.map.filterPoi(this.listQuery)
-    },
     // 刷新报警列表
     refreshAlarm() {
       console.log('refresh Alarm')
@@ -376,6 +368,74 @@
           }
         }, 1000)
       }
+    },
+    // 获取井列表
+    fetchWellList() {
+      console.log('获取正常井的列表')
+      // this.loading = true
+      // const listQuery = {
+      //   keywords: '', // 关键字
+      //   wellType: '', // 井类型
+      //   deptid: '', // 组织机构
+      //   isAlarm: '0' // 没报警
+      // }
+      const listQuery = {
+        keywords: '',
+        wellType: '',
+        deptid: '',
+        offset: 1,
+        limit: 20
+      }
+      // ------------------------------------------------------------------------------
+      // 先调窨井列表，之后没报警的井接口出来之后再调
+      getWellList(listQuery).then(response => {
+        this.normalWells = response.data.rows
+        const keywords = this.listQuery.keywords
+        const deptid = this.listQuery.deptid
+        const wellType = this.listQuery.wellType
+        if (keywords === '' && deptid === '' && wellType === '') {
+          this.normalAllWells = response.data.rows // 全部正常井
+        }
+        // this.total = parseInt(response.data.total)
+        // this.listLoading = false
+      })
+      // getWellList(listQuery).then(response => {
+      //   this.loading = false
+      //   if (response.code === 200) {
+      //     const wells = response.data
+      //     if (wells.length > 0) {
+      //       // 查询没有报警的井
+      //       if (listQuery.isAlarm === '0') { // 查询状态正常的井
+      //         // this.firstAmount = false
+      //         // const centerxs = []
+      //         // const centerys = []
+      //         // for (const well of wells) {
+      //         //   this.markers.push({
+      //         //     wellId: well.id,
+      //         //     wellCode: well.wellCode,
+      //         //     id: well.id,
+      //         //     name: well.wellCode,
+      //         //     lnglat: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     position: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     positionInfo: well.position,
+      //         //     wellType: well.wellType,
+      //         //     deptid: well.deptid,
+      //         //     bfzt: well.bfzt,
+      //         //     icon: this.commonIcon,
+      //         //     visible: true,
+      //         //     wellStatus: 'normal'
+      //         //   })
+      //         //   centerxs.push(parseFloat(well.coordinateX))
+      //         //   centerys.push(parseFloat(well.coordinateY))
+      //         // }
+      //         // centerxs.sort()
+      //         // centerys.sort()
+      //         // const index = Math.floor(centerxs.length / 2)
+      //         // this.center = [centerxs[index], centerys[index]]
+      //       }
+      //     }
+      //   }
+      // })
     }
   }
 }
diff --git a/static/images/map_images/normal-well.png b/static/images/map_images/normal-well.png
new file mode 100644
index 0000000..950edf2
--- /dev/null
+++ b/static/images/map_images/normal-well.png
Binary files differ

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/src/main.js b/src/main.js
index 5b3d3ac..44228ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
+// import 'leaflet-canvas-marker'
 /**
  * This project originally used easy-mock to simulate data,
  * but its official service is very unstable,
diff --git a/src/utils/index.js b/src/utils/index.js
index f607910..375dd2b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -296,3 +296,34 @@
 export function uniqueArr(arr) {
   return Array.from(new Set(arr))
 }
+
+const isType = function(type) {
+  return function(arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`
+  }
+}
+
+export const isFunction = isType('Function')
+
+export const isObject = isType('Object')
+
+export const isString = isType('String')
+
+export const isArray = isType('Array')
+
+export const isDate = isType('Date')
+
+// 深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item))
+  } else if (isObject(data)) {
+    let ret = {}
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key])
+    })
+    return ret
+  }
+}
diff --git a/src/views/overview/overview_cmap.vue b/src/views/overview/overview_cmap.vue
index c30bcaf..dadc1c0 100644
--- a/src/views/overview/overview_cmap.vue
+++ b/src/views/overview/overview_cmap.vue
@@ -66,23 +66,62 @@
     </div>
     <div v-loading="loading" class="overview-map-container">
       <!--地图-->
-      <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/>
+      <!-- <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/> -->
+      <leaflet-map
+        id="map"
+        ref="map"
+        :show-all="showAll"
+        :show-larm="showAlarm"
+        :alarm-markers="alarmWells"
+        :normal-markers="normalWells"
+        :center="leftLetForm.center"
+        :zooms="leftLetForm.zooms"
+        :zoom="leftLetForm.zoom"
+        :basemaps="leftLetForm.basemaps"
+        @onload="readyMap"
+        @popupCenter="popupCenter"
+      >
+        <!-- <graphic-layer id="lamp" :data="lampList"> -->
+        <!-- <simple-popup slot="popup"/> -->
+        <!-- </graphic-layer> -->
+        <!--      <polyline-layer :routes="routes" color="#5EA279" weight="3"/>-->
+        <!-- <animate-routes-layer ref="routeLayer" :routes="routes" :weight="3" :icon="truckIcon" :icon-size="truckSize" :popup-anchor="truckPopupAnchor" :icon-anchor="truckAnchor" color="#5EA279"/> -->
+      </leaflet-map>
     </div>
   </div>
 </template>
 
 <script>
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getWellType } from '@/api/well'
+import { getWellType, getWellList } from '@/api/well'
+// import { getWellList } from '@/api/overview'
 import { getAlarmsNow } from '@/api/overview'
 import DeptSelect from '../../components/DeptSelect/index'
 import Cmap from '../../components/CMap/components/cmap'
 import CmapMarker from '../../components/CMap/components/cmapMarker'
+import LeafletMap from '../../components/leaftletMap/leafletMap.vue'
+import { deepCopy } from '../../utils/index'
+
 export default {
   name: 'Overview',
-  components: { CmapMarker, Cmap, DeptSelect, SelectTree },
+  components: { CmapMarker, Cmap, DeptSelect, SelectTree, LeafletMap },
   data() {
     return {
+      leftLetForm: {
+        center: [39.9, 116.4], // 地图中心-北京
+        zooms: [8, 18], // 缩放范围
+        zoom: 12, // 缩放
+        basemaps: [
+          // ------------------------------亦庄----------------------------
+          // { name: 'tdtMap', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=map&x={x}&y={y}&z={z}&srs=EPSG%3A3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] },
+          // { name: 'tdtLabel', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=maplabel&x={x}&y={y}&z={z}&srs=EPSG:3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] }
+          // -----------------------------天地图---------------------------
+          { name: 'tdtMap', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          { name: 'tdtLabel', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satellite', group: '影像地图', show: false, url: 'http://t0.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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satelliteLabel', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/cia_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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
+        ]
+      },
       refreshType: 'clock', // 刷新数据方式：clock或websocket
       listQuery: {
         keywords: '', // 关键字
@@ -136,6 +175,8 @@
       alarmList: [], // 报警列表
       alarmListOri: [], // 报警列表
       alarmWells: [], // 显示报警井列表
+      normalWells: [], // 正常井列表
+      normalAllWells: [], // 全部正常井
       alarmWellsOri: [], // 原始报警井列表
       offset: [-10, -10], // 偏移量
       alarmOffset: [-15, -30], // 偏移量
@@ -167,6 +208,7 @@
       showAlarm: true, // 是否显示报警
       hasAlarm: false, // 是否有报警,
       showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      // showAll: true, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: false, // 加载图标是否显示
       massMarks: null, // 海量点
@@ -175,19 +217,24 @@
   },
   watch: {
     showAll(val) {
-      if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+      if (val) { // 显示全部井（包含报警和不报警，为false时只显示报警）
+        this.listQuery.isAlarm = '0' // 是否报警
         // 先清空查询条件
-        this.listQuery.deptid = ''
-        this.listQuery.keywords = ''
-        this.listQuery.wellType = ''
+        this.listQuery.deptid = '' // 组织机构
+        this.listQuery.keywords = '' // 关键字
+        this.listQuery.wellType = '' // 井类型
         // 加载海量点
-        this.$refs.map.renderPoi()
+        // this.$refs.map.renderPoi()
+        if (this.normalAllWells && this.normalAllWells.length) {
+          this.normalWells = deepCopy(this.normalAllWells)
+        } else {
+          this.fetchWellList() // 获取井信息
+        }
         // }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         // 清除海量点
-        this.$refs.map.cleanPoi()
+        // this.$refs.map.cleanPoi()
       }
     },
     showAlarm(val) {
@@ -208,14 +255,17 @@
     this.refreshAlarm()
   },
   methods: {
+    popupCenter(val) {
+      this.leftLetForm.center = val
+    },
     // 地图准备好后的操作
     readyMap() {
       console.log('readyMap')
       const that = this
-      // that.getWellList() // 获取报警的井信息
+      that.fetchWellList() // 获取井信息
       that.refreshAlarm() // 刷新报警内容
       if (this.showAll) {
-        this.$refs.map.renderPoi()
+        this.$refs.map.renderPoi() // 加载海量点
       }
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
         setTimeout(function() {
@@ -239,7 +289,7 @@
         }
       })
     },
-    // 数据查询
+    // 点击查询-数据查询
     search(showMessage = true) {
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
@@ -248,7 +298,9 @@
         this.$message.warning('查询条件不能为空')
       } else {
         this.showClearBtn = true
-        this.filterIcon(showMessage)
+        // this.filterIcon(showMessage)
+        this.fetchWellList() // 获取井列表
+        this.refreshAlarm() // 刷新报警列表
       }
     },
     // 清除查询
@@ -256,71 +308,11 @@
       this.listQuery.wellType = ''
       this.listQuery.deptid = ''
       this.listQuery.keywords = ''
-      this.filterIcon()
+      // this.fetchWellList() // 获取井列表
+      this.normalWells = deepCopy(this.normalAllWells) // 全部正常井信息
+      this.refreshAlarm() // 刷新报警列表
       this.showClearBtn = false
     },
-    // 过滤条件
-    filterIcon(showMessage = false) {
-      this.currentWindow.visible = false // 弹窗隐藏
-      const keywords = this.listQuery.keywords
-      const deptid = this.listQuery.deptid
-      const wellType = this.listQuery.wellType
-      console.log('markers length:', this.markers.length)
-      const showWellCodes = []
-      let center = null
-      if (this.showAll) {
-        this.resetMassMarker()
-      }
-      // 对报警标记进行过滤：
-      // 如果地图上需要显示报警
-      if (this.showAlarm) {
-        this.alarmWells = []
-        // 查询报警的井，是否匹配
-        for (const marker of this.alarmWellsOri) {
-          let show = true
-          // 关键字不为空，且没有匹配成功，不显示
-          if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
-            show = false
-          }
-          // 部门不为空， 且没有匹配成功
-          if (deptid && deptid !== '' && marker.deptid !== deptid) {
-            show = false
-          }
-          // 井类型不为空，且没有匹配成功
-          if (wellType && wellType !== '' && marker.wellType !== wellType) {
-            show = false
-          }
-          // 需要显示，加到alarmWells数组中
-          if (show) {
-            this.alarmWells.push(marker)
-            center = marker.position
-            showWellCodes.push(marker.wellCode)
-          }
-        }
-        // 过滤alarmList列表
-        this.alarmList = []
-        if (showWellCodes.length > 0) {
-          for (const alarm of this.alarmListOri) {
-            const findFlag = showWellCodes.findIndex(code => code === alarm.wellCode)
-            if (findFlag !== -1) {
-              this.alarmList.push(alarm)
-            }
-          }
-        }
-      } else { // 如果地图上不显示报警
-        this.alarmWells = []
-        this.alarmList = []
-      }
-      // 如果没有找到符合要求的井，将全部查询结果隐藏
-      if (center !== null) {
-        this.center = center
-      }
-    },
-    // 过滤海量点
-    resetMassMarker() {
-      // 调用子组件，过滤海量点
-      this.$refs.map.filterPoi(this.listQuery)
-    },
     // 刷新报警列表
     refreshAlarm() {
       console.log('refresh Alarm')
@@ -376,6 +368,74 @@
           }
         }, 1000)
       }
+    },
+    // 获取井列表
+    fetchWellList() {
+      console.log('获取正常井的列表')
+      // this.loading = true
+      // const listQuery = {
+      //   keywords: '', // 关键字
+      //   wellType: '', // 井类型
+      //   deptid: '', // 组织机构
+      //   isAlarm: '0' // 没报警
+      // }
+      const listQuery = {
+        keywords: '',
+        wellType: '',
+        deptid: '',
+        offset: 1,
+        limit: 20
+      }
+      // ------------------------------------------------------------------------------
+      // 先调窨井列表，之后没报警的井接口出来之后再调
+      getWellList(listQuery).then(response => {
+        this.normalWells = response.data.rows
+        const keywords = this.listQuery.keywords
+        const deptid = this.listQuery.deptid
+        const wellType = this.listQuery.wellType
+        if (keywords === '' && deptid === '' && wellType === '') {
+          this.normalAllWells = response.data.rows // 全部正常井
+        }
+        // this.total = parseInt(response.data.total)
+        // this.listLoading = false
+      })
+      // getWellList(listQuery).then(response => {
+      //   this.loading = false
+      //   if (response.code === 200) {
+      //     const wells = response.data
+      //     if (wells.length > 0) {
+      //       // 查询没有报警的井
+      //       if (listQuery.isAlarm === '0') { // 查询状态正常的井
+      //         // this.firstAmount = false
+      //         // const centerxs = []
+      //         // const centerys = []
+      //         // for (const well of wells) {
+      //         //   this.markers.push({
+      //         //     wellId: well.id,
+      //         //     wellCode: well.wellCode,
+      //         //     id: well.id,
+      //         //     name: well.wellCode,
+      //         //     lnglat: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     position: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     positionInfo: well.position,
+      //         //     wellType: well.wellType,
+      //         //     deptid: well.deptid,
+      //         //     bfzt: well.bfzt,
+      //         //     icon: this.commonIcon,
+      //         //     visible: true,
+      //         //     wellStatus: 'normal'
+      //         //   })
+      //         //   centerxs.push(parseFloat(well.coordinateX))
+      //         //   centerys.push(parseFloat(well.coordinateY))
+      //         // }
+      //         // centerxs.sort()
+      //         // centerys.sort()
+      //         // const index = Math.floor(centerxs.length / 2)
+      //         // this.center = [centerxs[index], centerys[index]]
+      //       }
+      //     }
+      //   }
+      // })
     }
   }
 }
diff --git a/static/images/map_images/normal-well.png b/static/images/map_images/normal-well.png
new file mode 100644
index 0000000..950edf2
--- /dev/null
+++ b/static/images/map_images/normal-well.png
Binary files differ
diff --git a/static/images/map_images/normal-well1.png b/static/images/map_images/normal-well1.png
new file mode 100644
index 0000000..88f9e50
--- /dev/null
+++ b/static/images/map_images/normal-well1.png
Binary files differ

diff --git a/config/index.js b/config/index.js
index cef61d9..4b3fb14 100644
--- a/config/index.js
+++ b/config/index.js
@@ -14,7 +14,7 @@
     proxyTable: {},
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     //是否自动打开浏览器
     autoOpenBrowser: true,
diff --git a/package.json b/package.json
index d56b435..c8730cd 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,14 @@
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "leaflet": "^1.9.3",
+    "leaflet-canvas-marker": "^0.2.0",
+    "leaflet-canvas-marker-xrr2021": "^1.0.2",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "npm": "^6.11.3",
     "nprogress": "0.2.0",
+    "proj4leaflet": "^1.0.2",
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
diff --git a/src/components/CMap/components/cmap.vue b/src/components/CMap/components/cmap.vue
index 808ada3..9be1788 100644
--- a/src/components/CMap/components/cmap.vue
+++ b/src/components/CMap/components/cmap.vue
@@ -326,6 +326,7 @@
       }
       // 有layerid
       if (layerInfoManager[layerId].layerid) {
+
         opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
       } else {
         const tableinfo = {
@@ -342,6 +343,7 @@
           attrfds: layerInfoManager[layerId].attrfds }
         const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
         opts.params.tableinfo = tableinfostr
+
       }
       opts.params.morecon = this.queryString
       this.overlay = new CCustomOverlay(opts)
@@ -363,7 +365,7 @@
       const { mapLayers, layerId, overlayManager } = this
       // 有图层，先移除
       if (overlayManager[layerId]) {
-        mapLayers.removeLayer(overlayManager[layerId])
+        mapLayers.removeLayer(overlayManager[layerId]) // 移除一次标记
         delete overlayManager[layerId]
       }
       mapLayers.closePopup()
@@ -422,6 +424,7 @@
         if (callback) callback(id, data, bounds)
       })
     },
+    // 无用
     drawFeature(id, list, bounds) {
       console.log('drawFeature')
       const { mapLayers, featureLayerManager, layerId } = this
@@ -481,6 +484,7 @@
         if (callback) callback(id, data)
       })
     },
+    // 无用
     addMarker(id, data, icons) {
       const { layerInfoManager, featureLayerManager } = this
       var style = ''
diff --git a/src/components/leaftletMap/base/crsUtils.js b/src/components/leaftletMap/base/crsUtils.js
new file mode 100644
index 0000000..ce18b37
--- /dev/null
+++ b/src/components/leaftletMap/base/crsUtils.js
@@ -0,0 +1,36 @@
+import L from 'leaflet'
+/*eslint-disable*/
+import proj4leaflet from 'proj4leaflet'
+/*eslint -enable*/
+// 定义2000坐标系CRS
+const CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
+  resolutions: [
+    1.40625,
+    0.703125,
+    0.3515625,
+    0.17578125,
+    0.087890625,
+    0.0439453125,
+    0.02197265625,
+    0.010986328125,
+    0.0054931640625,
+    0.00274658203125,
+    0.001373291015625,
+    6.866455078125E-4,
+    3.4332275390625E-4,
+    1.71661376953125E-4,
+    8.58306884765625E-5,
+    4.291534423828125E-5,
+    2.1457672119140625E-5,
+    1.0728836059570312E-5,
+    5.364418029785156E-6,
+    2.682209064925356E-6,
+    1.3411045324626732E-6
+  ],
+  origin: [-180, 90]
+})
+export const crsDict = {
+  '4326': L.CRS.EPSG4326, // WGS84坐标系
+  '3857': L.CRS.EPSG3857, // web墨卡托投影
+  '4490': CRS_4490 // CGCS2000坐标系
+}
diff --git a/src/components/leaftletMap/leafletMap.vue b/src/components/leaftletMap/leafletMap.vue
new file mode 100644
index 0000000..1df7067
--- /dev/null
+++ b/src/components/leaftletMap/leafletMap.vue
@@ -0,0 +1,424 @@
+<template>
+  <div ref="map" :id="id" class="base-map">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { crsDict } from './base/crsUtils'
+// import 'leaflet-canvas-marker'
+import 'leaflet-canvas-marker-xrr2021'
+import { getWellInfo, getWellAlarms, getWellList } from '@/api/overview'
+// import { getLatLng } from './base/commonTools'
+
+export default {
+  name: 'LeafletMap',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }, // id
+    basemaps: {
+      type: Array,
+      required: true
+    }, // 图层地址列表
+    zoom: { // 缩放层级
+      type: Number,
+      default: 12
+    },
+    zooms: {
+      type: Array,
+      default: () => {
+        return [15, 21]
+      }
+    }, // 缩放范围
+    autoResize: { // 自动重绘
+      type: Boolean,
+      default: true
+    },
+    size: { // marker大小
+      type: Array,
+      default: function() {
+        return [30, 30]
+      }
+    },
+    center: {
+      type: Array,
+      default: () => {
+        return [116.4, 39.9]
+      }
+    }, // 地图中心
+    crs: {
+      type: String,
+      default: '3857'
+    }, // 支持坐标系
+    alarmMarkers: { // 报警Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    normalMarkers: { // 正常Marker，原数据
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    anchor: { // 位移
+      type: Array,
+      default: () => [15, 30]
+    },
+    popupTemplate: { // 弹窗html内容
+      type: String,
+      default: '<div>hello</div>'
+    },
+    popupAnchor: { // 弹窗位移
+      type: Array,
+      default: function() {
+        return [0, -24]
+      }
+    },
+    // 是否显示全部井
+    showAll: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示报警
+    showAlarm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      map: null, // 底图
+      basebasemaps: [], // 地图图层的地址
+      overlays: [], // 地图上的标注，报警的
+      ciLayer: null, // 告警图层
+      queryString: '', // 地图筛选条件
+      normalCoverage: null // 正常井图层
+    }
+  },
+  watch: {
+    basemaps: {
+      handler(val) {
+        console.log(val)
+        this.clearBaseMaps()
+        this.addBaseMaps()
+      },
+      deep: true
+    },
+    zoom(val) {
+      this.map.setZoom(val)
+    },
+    center(val, oldVal) {
+      console.log('中点', val)
+    },
+    // 报警的井列表
+    alarmMarkers(val) {
+      console.log('报警的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    },
+    // 正常井列表
+    normalMarkers() {
+      console.log('正常的井列表')
+      if (this.showAll) {
+        this.renderNormalMarkers()
+      }
+    },
+    // 是否展示全部井
+    showAll(val) {
+      if (!val) { // 不显示全部井
+        if (this.ciLayer) {
+          this.map.removeLayer(this.ciLayer)
+          this.renderMarkers()
+        }
+      }
+    },
+    // 是否显示报警
+    showAlarm(val) {
+      if (this.showAll) {
+        this.renderNormalMarkers() // 画正常井
+      } else {
+        this.renderMarkers()
+      }
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const { zooms, zoom, center, crs } = this
+      const map = L.map(this.$refs.map, {
+        minZoom: zooms[0],
+        maxZoom: zooms[1],
+        center: center,
+        zoom: zoom,
+        zoomControl: false,
+        doubleClickZoom: false, // 禁用双击放大
+        attributionControl: true, // 默认情况下，是否将 attribution 版权控件添加到地图中。
+        crs: crsDict[crs]
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      this.$emit('onload', map)
+      this.clearBaseMaps() // 清除所有图层
+      // 加载图层
+      this.addBaseMaps()
+    },
+    // 添加图层
+    addBaseMaps() {
+      console.log('添加底图')
+      const { map, basemaps } = this
+      basemaps.forEach(layerInfo => {
+        if (layerInfo.show) {
+          const options = {}
+          if (layerInfo.zooms) {
+            options.minZoom = layerInfo.zooms[0]
+            options.maxZoom = layerInfo.zooms[1]
+          }// 缩放情况
+          const layer = L.tileLayer(layerInfo.url, options)
+          this.basebasemaps.push({ name: layerInfo.name, layer: layer.addTo(map) })
+        }
+      })
+    },
+    // 清除所有图层
+    clearBaseMaps() {
+      const { map } = this
+      this.basebasemaps.forEach(layer => {
+        map.removeLayer(layer)
+      })
+      this.basebasemaps = []
+    },
+    // 加载报警markers
+    renderMarkers() {
+      console.log('render.markers')
+      const { map, alarmMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      if (this.ciLayer) {
+        console.log('清理图层')
+        map.removeLayer(this.ciLayer)
+      }
+      // 告警图层
+      this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of alarmMarkers) {
+        console.log('画图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well1.png',
+          iconSize: size,
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.wellId
+        }
+        // console.log(item)
+        // console.log('坐标', [item.position.lat, item.position.lng])
+        const marker = L.marker([item.position.lat, item.position.lng], opts)
+        this.ciLayer.addLayer(marker)
+        map.setView(map.getCenter())
+        this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击告警信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        // 某井报警信息
+        getWellAlarms(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+            for (const alarm of alarmInfo.alarms) {
+              dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+            }
+            dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 加载正常井markers
+    renderNormalMarkers() {
+      console.log('渲染正常井图层')
+      const { map, normalMarkers, size, anchor, popupAnchor } = this
+      if (!map) {
+        return
+      }
+      // if (this.ciLayer) {
+      //   console.log('清理图层')
+      //   map.removeLayer(this.ciLayer)
+      // }
+      this.renderMarkers()
+      // 正常图层
+      // this.ciLayer = L.canvasIconLayer({}).addTo(map)
+      // this.overlays = []
+      // 遍历所有报警井信息
+      for (const item of normalMarkers) {
+        console.log('画正常井图层')
+        const icon = L.icon({
+          iconUrl: './static/images/map_images/alarm-well.png',
+          iconSize: [25, 25],
+          iconAnchor: anchor,
+          popupAnchor: popupAnchor
+        })
+        const opts = {
+          icon: icon,
+          title: item.wellCode,
+          wellId: item.id // 井id
+        }
+        const marker = L.marker([item.coordinateY, item.coordinateX], opts)
+        this.ciLayer.addLayer(marker)
+        // map.setView(map.getCenter())
+        // this.overlays.push(marker)
+      }
+      const that = this
+      // 监听点击marker
+      this.ciLayer.addOnClickListener(function(e, data) {
+        console.log('监听到点击正常井信息')
+        console.log(e)
+        console.log(data[0].data.options)
+        getWellInfo(data[0].data.options.wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            const normalInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            let dom = "<div class='alarm-window'>" +
+                "<div style='line-height: 20px;font-weight: bold;'>" + normalInfo.wellCode + '</div>' +
+                "<div style='line-height: 23px;font-size: 14px;'>"
+            dom += "<div class='divider'></div>" +
+                '<div>井类型： ' + normalInfo.wellTypeName + '</div>' +
+                '<div>权属单位：' + normalInfo.deptName + '</div>' +
+                '<div>详细地址：' + normalInfo.position + '</div>' +
+                '</div>' +
+                '</div>'
+            console.log('setPopupContent_inrender')
+            that.$emit('popupCenter', [e.latlng.lat, e.latlng.lng])
+            // 显示popup
+            L.popup()
+              .setLatLng([e.latlng.lat, e.latlng.lng])
+              .setContent(dom)
+              .openOn(map)
+          }
+        })
+      })
+    },
+    // 打开弹窗
+    openAlarmInfoWindow(wellId) {
+      const { map } = this
+      for (const overlay of this.overlays) {
+        if (overlay.options.wellId === wellId) {
+          getWellAlarms(wellId).then(response => {
+            if (response.code === 200) {
+              const wellInfo = response.data
+              const alarmInfo = {
+                wellCode: wellInfo.wellCode,
+                position: wellInfo.position,
+                deptName: wellInfo.deptName,
+                wellTypeName: wellInfo.wellTypeName,
+                alarms: wellInfo.alarmList,
+                deep: wellInfo.deep
+              }
+              let dom = "<div class='alarm-window'>" +
+              "<div style='line-height: 20px;color: red;font-weight: bold;'>" + alarmInfo.wellCode + '</div>' +
+              "<div style='line-height: 23px;font-size: 14px;'>"
+              for (const alarm of alarmInfo.alarms) {
+                dom += "<div>告警原因：<span style='color:red'>" + alarm.alarmContent + '</span></div>' +
+                '<div>设备编号：<span style="font-weight: bold;">' + alarm.devcode + '</span></div>'
+              }
+              dom += "<div class='divider'></div>" +
+              '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
+              '<div>权属单位：' + alarmInfo.deptName + '</div>' +
+              '<div>详细地址：' + alarmInfo.position + '</div>' +
+              '</div>' +
+              '</div>'
+              map.setZoom(17)
+              console.log('ppp')
+              console.log([overlay.getLatLng().lat, overlay.getLatLng().lng])
+              this.$emit('popupCenter', [overlay.getLatLng().lat, overlay.getLatLng().lng])
+              setTimeout(() => {
+                map.flyTo([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                // 显示popup
+                L.popup()
+                  .setLatLng([overlay.getLatLng().lat, overlay.getLatLng().lng])
+                  .setContent(dom)
+                  .openOn(map)
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .base-map {
+    width:100%;
+    height: calc(100vh - 84px);
+  }
+  .alarm-window{
+    max-width: 250px;
+    background-color: #ffeaf1;
+    .alarm-header {
+      padding: 10px 10px 5px 10px;
+      line-height: 30px;
+      color: red;
+      font-weight: bold;
+      background-color: #ffecec;
+    }
+    .alarm-body{
+      padding: 5px 10px 10px 10px;
+      line-height: 23px;
+      font-size: 14px;
+      .alarm-red{
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/src/main.js b/src/main.js
index 5b3d3ac..44228ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
+// import 'leaflet-canvas-marker'
 /**
  * This project originally used easy-mock to simulate data,
  * but its official service is very unstable,
diff --git a/src/utils/index.js b/src/utils/index.js
index f607910..375dd2b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -296,3 +296,34 @@
 export function uniqueArr(arr) {
   return Array.from(new Set(arr))
 }
+
+const isType = function(type) {
+  return function(arg) {
+    return Object.prototype.toString.call(arg) === `[object ${type}]`
+  }
+}
+
+export const isFunction = isType('Function')
+
+export const isObject = isType('Object')
+
+export const isString = isType('String')
+
+export const isArray = isType('Array')
+
+export const isDate = isType('Date')
+
+// 深拷贝
+export function deepCopy(data) {
+  if (!Array.isArray(data) && !isObject(data)) {
+    return data
+  } else if (Array.isArray(data)) {
+    return data.map(item => deepCopy(item))
+  } else if (isObject(data)) {
+    let ret = {}
+    Object.keys(data).forEach(key => {
+      ret[key] = deepCopy(data[key])
+    })
+    return ret
+  }
+}
diff --git a/src/views/overview/overview_cmap.vue b/src/views/overview/overview_cmap.vue
index c30bcaf..dadc1c0 100644
--- a/src/views/overview/overview_cmap.vue
+++ b/src/views/overview/overview_cmap.vue
@@ -66,23 +66,62 @@
     </div>
     <div v-loading="loading" class="overview-map-container">
       <!--地图-->
-      <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/>
+      <!-- <cmap ref="map" :center="center" :zoom="zoom" :alarm-markers="alarmWells" class="map-demo" @ready="readyMap"/> -->
+      <leaflet-map
+        id="map"
+        ref="map"
+        :show-all="showAll"
+        :show-larm="showAlarm"
+        :alarm-markers="alarmWells"
+        :normal-markers="normalWells"
+        :center="leftLetForm.center"
+        :zooms="leftLetForm.zooms"
+        :zoom="leftLetForm.zoom"
+        :basemaps="leftLetForm.basemaps"
+        @onload="readyMap"
+        @popupCenter="popupCenter"
+      >
+        <!-- <graphic-layer id="lamp" :data="lampList"> -->
+        <!-- <simple-popup slot="popup"/> -->
+        <!-- </graphic-layer> -->
+        <!--      <polyline-layer :routes="routes" color="#5EA279" weight="3"/>-->
+        <!-- <animate-routes-layer ref="routeLayer" :routes="routes" :weight="3" :icon="truckIcon" :icon-size="truckSize" :popup-anchor="truckPopupAnchor" :icon-anchor="truckAnchor" color="#5EA279"/> -->
+      </leaflet-map>
     </div>
   </div>
 </template>
 
 <script>
 import SelectTree from '@/components/SelectTree/singleSelect'
-import { getWellType } from '@/api/well'
+import { getWellType, getWellList } from '@/api/well'
+// import { getWellList } from '@/api/overview'
 import { getAlarmsNow } from '@/api/overview'
 import DeptSelect from '../../components/DeptSelect/index'
 import Cmap from '../../components/CMap/components/cmap'
 import CmapMarker from '../../components/CMap/components/cmapMarker'
+import LeafletMap from '../../components/leaftletMap/leafletMap.vue'
+import { deepCopy } from '../../utils/index'
+
 export default {
   name: 'Overview',
-  components: { CmapMarker, Cmap, DeptSelect, SelectTree },
+  components: { CmapMarker, Cmap, DeptSelect, SelectTree, LeafletMap },
   data() {
     return {
+      leftLetForm: {
+        center: [39.9, 116.4], // 地图中心-北京
+        zooms: [8, 18], // 缩放范围
+        zoom: 12, // 缩放
+        basemaps: [
+          // ------------------------------亦庄----------------------------
+          // { name: 'tdtMap', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=map&x={x}&y={y}&z={z}&srs=EPSG%3A3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] },
+          // { name: 'tdtLabel', group: '矢量地图', show: true, url: 'http://10.10.4.116:8080/yzAdapter/ds?serviceproviderid=map.cachedtms&serviceid=gettile&tilename=maplabel&x={x}&y={y}&z={z}&srs=EPSG:3857&resolution=0.000244140625&wrap=true', zooms: [1, 18] }
+          // -----------------------------天地图---------------------------
+          { name: 'tdtMap', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          { name: 'tdtLabel', group: '矢量地图', show: true, url: '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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satellite', group: '影像地图', show: false, url: 'http://t0.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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] },
+          // { name: 'satelliteLabel', group: '影像地图', show: false, url: 'http://t0.tianditu.gov.cn/cia_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=adbdd8e08c292f6cb4e3f0289f7d0447', zooms: [1, 18] }
+        ]
+      },
       refreshType: 'clock', // 刷新数据方式：clock或websocket
       listQuery: {
         keywords: '', // 关键字
@@ -136,6 +175,8 @@
       alarmList: [], // 报警列表
       alarmListOri: [], // 报警列表
       alarmWells: [], // 显示报警井列表
+      normalWells: [], // 正常井列表
+      normalAllWells: [], // 全部正常井
       alarmWellsOri: [], // 原始报警井列表
       offset: [-10, -10], // 偏移量
       alarmOffset: [-15, -30], // 偏移量
@@ -167,6 +208,7 @@
       showAlarm: true, // 是否显示报警
       hasAlarm: false, // 是否有报警,
       showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      // showAll: true, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: false, // 加载图标是否显示
       massMarks: null, // 海量点
@@ -175,19 +217,24 @@
   },
   watch: {
     showAll(val) {
-      if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+      if (val) { // 显示全部井（包含报警和不报警，为false时只显示报警）
+        this.listQuery.isAlarm = '0' // 是否报警
         // 先清空查询条件
-        this.listQuery.deptid = ''
-        this.listQuery.keywords = ''
-        this.listQuery.wellType = ''
+        this.listQuery.deptid = '' // 组织机构
+        this.listQuery.keywords = '' // 关键字
+        this.listQuery.wellType = '' // 井类型
         // 加载海量点
-        this.$refs.map.renderPoi()
+        // this.$refs.map.renderPoi()
+        if (this.normalAllWells && this.normalAllWells.length) {
+          this.normalWells = deepCopy(this.normalAllWells)
+        } else {
+          this.fetchWellList() // 获取井信息
+        }
         // }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         // 清除海量点
-        this.$refs.map.cleanPoi()
+        // this.$refs.map.cleanPoi()
       }
     },
     showAlarm(val) {
@@ -208,14 +255,17 @@
     this.refreshAlarm()
   },
   methods: {
+    popupCenter(val) {
+      this.leftLetForm.center = val
+    },
     // 地图准备好后的操作
     readyMap() {
       console.log('readyMap')
       const that = this
-      // that.getWellList() // 获取报警的井信息
+      that.fetchWellList() // 获取井信息
       that.refreshAlarm() // 刷新报警内容
       if (this.showAll) {
-        this.$refs.map.renderPoi()
+        this.$refs.map.renderPoi() // 加载海量点
       }
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
         setTimeout(function() {
@@ -239,7 +289,7 @@
         }
       })
     },
-    // 数据查询
+    // 点击查询-数据查询
     search(showMessage = true) {
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
@@ -248,7 +298,9 @@
         this.$message.warning('查询条件不能为空')
       } else {
         this.showClearBtn = true
-        this.filterIcon(showMessage)
+        // this.filterIcon(showMessage)
+        this.fetchWellList() // 获取井列表
+        this.refreshAlarm() // 刷新报警列表
       }
     },
     // 清除查询
@@ -256,71 +308,11 @@
       this.listQuery.wellType = ''
       this.listQuery.deptid = ''
       this.listQuery.keywords = ''
-      this.filterIcon()
+      // this.fetchWellList() // 获取井列表
+      this.normalWells = deepCopy(this.normalAllWells) // 全部正常井信息
+      this.refreshAlarm() // 刷新报警列表
       this.showClearBtn = false
     },
-    // 过滤条件
-    filterIcon(showMessage = false) {
-      this.currentWindow.visible = false // 弹窗隐藏
-      const keywords = this.listQuery.keywords
-      const deptid = this.listQuery.deptid
-      const wellType = this.listQuery.wellType
-      console.log('markers length:', this.markers.length)
-      const showWellCodes = []
-      let center = null
-      if (this.showAll) {
-        this.resetMassMarker()
-      }
-      // 对报警标记进行过滤：
-      // 如果地图上需要显示报警
-      if (this.showAlarm) {
-        this.alarmWells = []
-        // 查询报警的井，是否匹配
-        for (const marker of this.alarmWellsOri) {
-          let show = true
-          // 关键字不为空，且没有匹配成功，不显示
-          if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
-            show = false
-          }
-          // 部门不为空， 且没有匹配成功
-          if (deptid && deptid !== '' && marker.deptid !== deptid) {
-            show = false
-          }
-          // 井类型不为空，且没有匹配成功
-          if (wellType && wellType !== '' && marker.wellType !== wellType) {
-            show = false
-          }
-          // 需要显示，加到alarmWells数组中
-          if (show) {
-            this.alarmWells.push(marker)
-            center = marker.position
-            showWellCodes.push(marker.wellCode)
-          }
-        }
-        // 过滤alarmList列表
-        this.alarmList = []
-        if (showWellCodes.length > 0) {
-          for (const alarm of this.alarmListOri) {
-            const findFlag = showWellCodes.findIndex(code => code === alarm.wellCode)
-            if (findFlag !== -1) {
-              this.alarmList.push(alarm)
-            }
-          }
-        }
-      } else { // 如果地图上不显示报警
-        this.alarmWells = []
-        this.alarmList = []
-      }
-      // 如果没有找到符合要求的井，将全部查询结果隐藏
-      if (center !== null) {
-        this.center = center
-      }
-    },
-    // 过滤海量点
-    resetMassMarker() {
-      // 调用子组件，过滤海量点
-      this.$refs.map.filterPoi(this.listQuery)
-    },
     // 刷新报警列表
     refreshAlarm() {
       console.log('refresh Alarm')
@@ -376,6 +368,74 @@
           }
         }, 1000)
       }
+    },
+    // 获取井列表
+    fetchWellList() {
+      console.log('获取正常井的列表')
+      // this.loading = true
+      // const listQuery = {
+      //   keywords: '', // 关键字
+      //   wellType: '', // 井类型
+      //   deptid: '', // 组织机构
+      //   isAlarm: '0' // 没报警
+      // }
+      const listQuery = {
+        keywords: '',
+        wellType: '',
+        deptid: '',
+        offset: 1,
+        limit: 20
+      }
+      // ------------------------------------------------------------------------------
+      // 先调窨井列表，之后没报警的井接口出来之后再调
+      getWellList(listQuery).then(response => {
+        this.normalWells = response.data.rows
+        const keywords = this.listQuery.keywords
+        const deptid = this.listQuery.deptid
+        const wellType = this.listQuery.wellType
+        if (keywords === '' && deptid === '' && wellType === '') {
+          this.normalAllWells = response.data.rows // 全部正常井
+        }
+        // this.total = parseInt(response.data.total)
+        // this.listLoading = false
+      })
+      // getWellList(listQuery).then(response => {
+      //   this.loading = false
+      //   if (response.code === 200) {
+      //     const wells = response.data
+      //     if (wells.length > 0) {
+      //       // 查询没有报警的井
+      //       if (listQuery.isAlarm === '0') { // 查询状态正常的井
+      //         // this.firstAmount = false
+      //         // const centerxs = []
+      //         // const centerys = []
+      //         // for (const well of wells) {
+      //         //   this.markers.push({
+      //         //     wellId: well.id,
+      //         //     wellCode: well.wellCode,
+      //         //     id: well.id,
+      //         //     name: well.wellCode,
+      //         //     lnglat: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     position: [parseFloat(well.coordinateX), parseFloat(well.coordinateY)],
+      //         //     positionInfo: well.position,
+      //         //     wellType: well.wellType,
+      //         //     deptid: well.deptid,
+      //         //     bfzt: well.bfzt,
+      //         //     icon: this.commonIcon,
+      //         //     visible: true,
+      //         //     wellStatus: 'normal'
+      //         //   })
+      //         //   centerxs.push(parseFloat(well.coordinateX))
+      //         //   centerys.push(parseFloat(well.coordinateY))
+      //         // }
+      //         // centerxs.sort()
+      //         // centerys.sort()
+      //         // const index = Math.floor(centerxs.length / 2)
+      //         // this.center = [centerxs[index], centerys[index]]
+      //       }
+      //     }
+      //   }
+      // })
     }
   }
 }
diff --git a/static/images/map_images/normal-well.png b/static/images/map_images/normal-well.png
new file mode 100644
index 0000000..950edf2
--- /dev/null
+++ b/static/images/map_images/normal-well.png
Binary files differ
diff --git a/static/images/map_images/normal-well1.png b/static/images/map_images/normal-well1.png
new file mode 100644
index 0000000..88f9e50
--- /dev/null
+++ b/static/images/map_images/normal-well1.png
Binary files differ
diff --git a/static/images/map_images/pothole.png b/static/images/map_images/pothole.png
new file mode 100644
index 0000000..68d6af5
--- /dev/null
+++ b/static/images/map_images/pothole.png
Binary files differ