diff --git a/src/assets/icons/icon-position.png b/src/assets/icons/icon-position.png
new file mode 100644
index 0000000..7444038
--- /dev/null
+++ b/src/assets/icons/icon-position.png
Binary files differ

diff --git a/src/assets/icons/icon-position.png b/src/assets/icons/icon-position.png
new file mode 100644
index 0000000..7444038
--- /dev/null
+++ b/src/assets/icons/icon-position.png
Binary files differ
diff --git a/src/router/modules/map.js b/src/router/modules/map.js
index 3c5b429..5c026bd 100644
--- a/src/router/modules/map.js
+++ b/src/router/modules/map.js
@@ -34,7 +34,7 @@
     {
       path: '/partsEdit',
       name: 'PartsEdit',
-      component: () => import('@/views/example/tableExample'),
+      component: () => import('@/views/overview/compEdit'),
       meta: { title: '部件编辑', icon: '', permission: ['/partsEdit'], keepAlive: true }
     }, {
       path: '/shopEdit',

diff --git a/src/assets/icons/icon-position.png b/src/assets/icons/icon-position.png
new file mode 100644
index 0000000..7444038
--- /dev/null
+++ b/src/assets/icons/icon-position.png
Binary files differ
diff --git a/src/router/modules/map.js b/src/router/modules/map.js
index 3c5b429..5c026bd 100644
--- a/src/router/modules/map.js
+++ b/src/router/modules/map.js
@@ -34,7 +34,7 @@
     {
       path: '/partsEdit',
       name: 'PartsEdit',
-      component: () => import('@/views/example/tableExample'),
+      component: () => import('@/views/overview/compEdit'),
       meta: { title: '部件编辑', icon: '', permission: ['/partsEdit'], keepAlive: true }
     }, {
       path: '/shopEdit',
diff --git a/src/store/getters.js b/src/store/getters.js
index 526de90..33b9d3f 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -26,6 +26,7 @@
   urls: state => state.map.urls, // 地图服务地址列表
   baseUrl: state => state.map.baseUrl, // 地图服务地址
   partsUrl: state => state.map.partsUrl, // 部件分层地址
+  partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
   editUrl: state => state.map.editUrl // 编辑地图地址

diff --git a/src/assets/icons/icon-position.png b/src/assets/icons/icon-position.png
new file mode 100644
index 0000000..7444038
--- /dev/null
+++ b/src/assets/icons/icon-position.png
Binary files differ
diff --git a/src/router/modules/map.js b/src/router/modules/map.js
index 3c5b429..5c026bd 100644
--- a/src/router/modules/map.js
+++ b/src/router/modules/map.js
@@ -34,7 +34,7 @@
     {
       path: '/partsEdit',
       name: 'PartsEdit',
-      component: () => import('@/views/example/tableExample'),
+      component: () => import('@/views/overview/compEdit'),
       meta: { title: '部件编辑', icon: '', permission: ['/partsEdit'], keepAlive: true }
     }, {
       path: '/shopEdit',
diff --git a/src/store/getters.js b/src/store/getters.js
index 526de90..33b9d3f 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -26,6 +26,7 @@
   urls: state => state.map.urls, // 地图服务地址列表
   baseUrl: state => state.map.baseUrl, // 地图服务地址
   partsUrl: state => state.map.partsUrl, // 部件分层地址
+  partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
   editUrl: state => state.map.editUrl // 编辑地图地址
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 49e6167..855cca8 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -18,6 +18,9 @@
   SET_PARTS_URL: (state, url) => {
     state.partsUrl = url
   },
+  SET_PARTS_EDIT_URL: (state, url) => {
+    state.partsEditUrl = url
+  },
   SET_PARTS_ALL_URL: (state, url) => {
     state.partsAllUrl = url
   },
@@ -45,6 +48,8 @@
               commit('SET_BASE_URL', item.url)
             } else if (item.name === '部件分层URL') {
               commit('SET_PARTS_URL', item.url)
+              const editUrl = item.url.replace(/MapServer/, 'FeatureServer')
+              commit('SET_PARTS_EDIT_URL', editUrl)
             } else if (item.name === '部件地图URL') {
               commit('SET_PARTS_ALL_URL', item.url)
             } else if (item.name === '二维地图URL') {

diff --git a/src/assets/icons/icon-position.png b/src/assets/icons/icon-position.png
new file mode 100644
index 0000000..7444038
--- /dev/null
+++ b/src/assets/icons/icon-position.png
Binary files differ
diff --git a/src/router/modules/map.js b/src/router/modules/map.js
index 3c5b429..5c026bd 100644
--- a/src/router/modules/map.js
+++ b/src/router/modules/map.js
@@ -34,7 +34,7 @@
     {
       path: '/partsEdit',
       name: 'PartsEdit',
-      component: () => import('@/views/example/tableExample'),
+      component: () => import('@/views/overview/compEdit'),
       meta: { title: '部件编辑', icon: '', permission: ['/partsEdit'], keepAlive: true }
     }, {
       path: '/shopEdit',
diff --git a/src/store/getters.js b/src/store/getters.js
index 526de90..33b9d3f 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -26,6 +26,7 @@
   urls: state => state.map.urls, // 地图服务地址列表
   baseUrl: state => state.map.baseUrl, // 地图服务地址
   partsUrl: state => state.map.partsUrl, // 部件分层地址
+  partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
   editUrl: state => state.map.editUrl // 编辑地图地址
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 49e6167..855cca8 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -18,6 +18,9 @@
   SET_PARTS_URL: (state, url) => {
     state.partsUrl = url
   },
+  SET_PARTS_EDIT_URL: (state, url) => {
+    state.partsEditUrl = url
+  },
   SET_PARTS_ALL_URL: (state, url) => {
     state.partsAllUrl = url
   },
@@ -45,6 +48,8 @@
               commit('SET_BASE_URL', item.url)
             } else if (item.name === '部件分层URL') {
               commit('SET_PARTS_URL', item.url)
+              const editUrl = item.url.replace(/MapServer/, 'FeatureServer')
+              commit('SET_PARTS_EDIT_URL', editUrl)
             } else if (item.name === '部件地图URL') {
               commit('SET_PARTS_ALL_URL', item.url)
             } else if (item.name === '二维地图URL') {
diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
new file mode 100644
index 0000000..c4acb21
--- /dev/null
+++ b/src/views/overview/compEdit.vue
@@ -0,0 +1,391 @@
+<!--
+ * @Description: 部件编辑
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 09:46:39
+ -->
+<template>
+  <app-container>
+    <div id="map" class="leaflet_container"/>
+    <!--查询显示组件-->
+    <search-list ref="searchList"/>
+    <div class="points-add-div">
+      <el-button icon="el-icon-plus" @click="openAddMode">
+        添加部件
+      </el-button>
+    </div>
+    <!--图层选择组件-->
+    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    <!--编辑部件弹窗-->
+    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+  </app-container>
+</template>
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import AppContainer from '@/components/layout/AppContainer'
+import LayerChoose from './components/layerChoose'
+import SearchList from './components/searchList'
+import { mapGetters } from 'vuex'
+import EditPartsDialog from './components/editPartsDialog'
+var esri = require('esri-leaflet')
+export default {
+  name: 'ComponentEdit',
+  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  data() {
+    return {
+      loading: false, // 加载动画
+      addMode: false, // 添加元素状态
+      map: null, // 地图对象
+      drawLayer: null, // 绘制图层（框选）
+      layers: [
+        { id: 0, name: '底图', type: 'map', domain: [] },
+        { id: 1, name: '网格', type: 'layer', domain: [] },
+        { id: 2, name: '商户', type: 'layer', domain: [] },
+        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
+        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
+        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
+        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
+        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
+        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
+        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
+      ],
+      selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      maps: [], // 地图图层
+      parts: [], // 部件图层
+      curretLayer: null, // 当前选中featureLayer
+      currentItem: null // 当前选中部件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'partsAllUrl',
+      'mapUrl',
+      'partsEditUrl'
+    ])
+  },
+  // 销毁时移除监听
+  destroyed() {
+    window.removeEventListener('click', this.handleKeyup, true)
+    this.socket.close()
+  },
+  // 加载完添加点击事件的监听
+  mounted() {
+    this.init()
+    window.addEventListener('click', this.handleKeyup, true)
+  },
+  methods: {
+    // 地图上点击之后，搜索列表隐藏
+    handleKeyup(val) {
+      if (this.$refs.searchList && val.target.id === 'map') {
+        this.$refs.searchList.hideSearch()
+      }
+    },
+    // 移除绘制图层
+    drawDelete() {
+      if (this.drawLayer) {
+        this.drawLayer.layer.remove()
+      }
+    },
+    // 绘制矩形
+    drawSquare() {
+      if (this.drawLayer) {
+        this.drawLayer.layer.remove()
+      }
+      this.$nextTick(() => {
+        this.map.pm.enableDraw('Rectangle', {
+          snappable: false
+        })
+      })
+    },
+    // 绘制多边形
+    drawPolygon() {
+      if (this.drawLayer) {
+        this.drawLayer.layer.remove()
+      }
+      this.$nextTick(() => {
+        this.map.pm.enableDraw('Polygon', {
+          snappable: false
+        })
+      })
+    },
+    // 地图切换
+    mapChange(val) {
+      if (!val) { // 隐藏底图
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.removeLayer(this.maps[i])
+        }
+      } else {
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.addLayer(this.maps[i])
+        }
+      }
+    },
+    // 部件图层切换
+    layerChange(node, checked) {
+      const selectItem = this.layers.filter(item => item.name === node.name)[0]
+      // 如果选中底图,选中添加，没选中移除
+      if (selectItem.type === 'map') {
+        if (!checked) {
+          for (const item of this.maps) {
+            this.map.removeLayer(item)
+          }
+        } else {
+          for (const item of this.maps) {
+            this.map.addLayer(item)
+          }
+        }
+      } else if (node.type === 'layer') { // 其他图层
+        if (!checked) {
+          for (let i = 0; i < selectItem.domain.length; i++) {
+            this.map.removeLayer(this.parts[selectItem.domain[i] - 1])
+          }
+        } else {
+          for (let i = 0; i < selectItem.domain.length; i++) {
+            this.map.addLayer(this.parts[selectItem.domain[i] - 1])
+          }
+        }
+      }
+    },
+    // 移除点
+    removemarkers() {
+      for (var i = 0; i < this.iconlist.length; i++) {
+        this.map.removeLayer(this.iconlist[i])
+      }
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+    },
+    // 初始化地图
+    init() {
+      this.loading = false
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 21,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable() // 禁止双击
+      this.map = map // data挂载map
+      window.map = map
+      const that = this
+      this.map.on('pm:create', e => {
+        if (that.drawLayer) {
+          that.drawLayer.layer.remove()
+        }
+        that.drawLayer = e
+      })
+      this.map.on('popupopen', e => {
+        // 给按钮添加点击事件
+        document.getElementById('btnEdit').onclick = that.editInfo
+        document.getElementById('btnDelete').onclick = that.delete
+      })
+      // 添加底图
+      for (let i = 0; i <= 21; i++) {
+        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
+        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        this.maps.push(esri.featureLayer(item).addTo(map))
+      }
+      // 添加部件
+      for (let i = 1; i <= 40; i++) {
+        let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
+        console.log(item)
+        if (i === 15) {
+          item = {
+            url: `${this.baseUrl}${this.partsEditUrl}/${i}`,
+            minZoom: 18,
+            style: function(feature) {
+              return { color: '#ff0000', opacity: 0.75, weight: 5 }
+            }
+          }
+        }
+        var layer = esri.featureLayer(item).addTo(map)
+        // 点击部件事件
+        layer.on('click', function(e) {
+          // 获取要素的属性
+          const properties = e.layer.feature.properties
+          that.currentItem = e.layer.feature
+          that.searchLayerByUrl(e.layer.options.url)
+          // 弹窗样式
+          var str = `<div class="pop-window">
+                        <div class="pop-title">
+                          ${properties['小类名称']}
+                        </div>
+                        <div class="pop-line"><col>大类：</col>${properties['大类名称']}</div>
+                        <div class="pop-line"><col>小类：</col>${properties['小类名称']}</div>
+                        <div class="pop-line"><col>部件编码：</col>${properties['编码']}</div>
+                        <div class="pop-line"><col>权属单位：</col>${properties['权属单位'] ? properties.权属单位 : '未知'}</div>
+                        <div class="pop-line"><col>详细地址：</col>${properties['详细地址'] ? properties.详细地址 : '未知'}</div>
+                        <div class="pop-btns">
+                          <button id="btnEdit" class="mini-btn">编辑</button>
+                          <button id="btnDelete" class="mini-btn">删除</button>
+                        </div>
+                      <div>`
+          var popup = L.popup().setContent(str)
+          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
+        })
+        this.parts.push(layer)
+      }
+      // this.map.setZoom(this.baseConfig.zoom)
+    },
+    // 点击新增部件
+    openAddMode() {
+      this.addMode = true
+      var icon = L.icon({
+        iconUrl: require('../../assets/icons/icon-position.png'),
+        iconSize: [35, 35],
+        iconAnchor: [17.5, 35]
+      })
+      this.map.on('click', e => {
+        // convert to GeoJSON
+        const feat = L.marker(e.latlng, { icon: icon })
+        feat.addTo(this.map)
+        console.log(feat)
+        this.$refs.editPartsDialog.initDialog(feat, 'create')
+      })
+    },
+    // 点击编辑
+    editInfo(ev) {
+      // 打开弹窗
+      console.log(this.currentItem)
+      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击删除
+    delete(code) {
+      if (this.currentLayer) {
+        debugger
+        this.currentLayer.deleteFeature(this.currentItem)
+        this.$messsage.success('删除成功')
+      }
+    },
+    onCreateFeature(feature) {
+
+    },
+    // 放弃操作，dialogStatus弹窗类型
+    onAbort(dialogStatus) {
+      if (dialogStatus === 'create') {
+        // 清除地图上的锚点
+        this.map.removeLayer(this.currentItem)
+      }
+    },
+    // 编辑保存操作
+    onUpdateFeature(feature) {
+      if (this.currentLayer) {
+        debugger
+        this.currentLayer.updateFeature(feature, () => {
+          this.$messsage.success('编辑成功')
+        })
+      }
+    },
+    // 根据url找到layer
+    searchLayerByUrl(url) {
+      const layer = this.parts.filter(item => item.options.url === url)[0]
+      if (layer) {
+        this.currentLayer = layer
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:35px;
+  .leaflet_container{
+    width: 100%;
+    height: 85vh;
+    background-color: white;
+  }
+  .draw-icon{
+    background-color: white;
+    width: 100px;height: 40px;
+    border: 1px solid #DCDFE6;
+    border-radius:4px;
+  }
+  .list{
+    text-align:center;
+    width: 500px;
+    height: 40px;
+    z-index: 10000;
+    position: absolute;
+    right:20px;
+    top:20px;
+  }
+  .btn_bottom{
+    text-align:center;
+    width: 100%;
+    height:70px;
+    z-index: 1000;
+    position: fixed; bottom: 0; left: 0;right:0;
+  }
+  .points-add-div{
+    position: absolute;
+    right:250px;
+    top:20px;
+    background-color: white;
+    border-radius: 3px;
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  .pop-window{
+    font-size: 14px;width:200px;
+    padding-right:5px;
+    .pop-title{
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    .pop-line{
+      line-height:20px;
+    }
+    .pop-btns{
+      margin:10px 0px;
+      .mini-btn{
+        display: inline-block;
+        line-height: 1;
+        white-space: nowrap;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid #dcdfe6;
+        color: #606266;
+        -webkit-appearance: none;
+        text-align: center;
+        box-sizing: border-box;
+        outline: none;
+        margin: 0;
+        transition: .1s;
+        font-weight: 500;
+        padding: 7px 15px;
+        font-size: 12px;
+        border-radius: 3px;
+      }
+      .mini-btn+.mini-btn{
+        margin-left:10px;
+      }
+      #btnEdit{
+        color: #409eff;
+        background: #ecf5ff;
+        border-color: #b3d8ff;
+      }
+      #btnEdit:hover{
+        background: #409eff;
+        border-color: #409eff;
+        color: #fff;
+      }
+      #btnDelete{
+        color: #f56c6c;
+        background: #fef0f0;
+        border-color: #fbc4c4;
+      }
+      #btnDelete:hover{
+        background: #f56c6c;
+        border-color: #f56c6c;
+        color: #fff;
+      }
+    }
+  }
+</style>

diff --git a/src/assets/icons/icon-position.png b/src/assets/icons/icon-position.png
new file mode 100644
index 0000000..7444038
--- /dev/null
+++ b/src/assets/icons/icon-position.png
Binary files differ
diff --git a/src/router/modules/map.js b/src/router/modules/map.js
index 3c5b429..5c026bd 100644
--- a/src/router/modules/map.js
+++ b/src/router/modules/map.js
@@ -34,7 +34,7 @@
     {
       path: '/partsEdit',
       name: 'PartsEdit',
-      component: () => import('@/views/example/tableExample'),
+      component: () => import('@/views/overview/compEdit'),
       meta: { title: '部件编辑', icon: '', permission: ['/partsEdit'], keepAlive: true }
     }, {
       path: '/shopEdit',
diff --git a/src/store/getters.js b/src/store/getters.js
index 526de90..33b9d3f 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -26,6 +26,7 @@
   urls: state => state.map.urls, // 地图服务地址列表
   baseUrl: state => state.map.baseUrl, // 地图服务地址
   partsUrl: state => state.map.partsUrl, // 部件分层地址
+  partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
   editUrl: state => state.map.editUrl // 编辑地图地址
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 49e6167..855cca8 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -18,6 +18,9 @@
   SET_PARTS_URL: (state, url) => {
     state.partsUrl = url
   },
+  SET_PARTS_EDIT_URL: (state, url) => {
+    state.partsEditUrl = url
+  },
   SET_PARTS_ALL_URL: (state, url) => {
     state.partsAllUrl = url
   },
@@ -45,6 +48,8 @@
               commit('SET_BASE_URL', item.url)
             } else if (item.name === '部件分层URL') {
               commit('SET_PARTS_URL', item.url)
+              const editUrl = item.url.replace(/MapServer/, 'FeatureServer')
+              commit('SET_PARTS_EDIT_URL', editUrl)
             } else if (item.name === '部件地图URL') {
               commit('SET_PARTS_ALL_URL', item.url)
             } else if (item.name === '二维地图URL') {
diff --git a/src/views/overview/compEdit.vue b/src/views/overview/compEdit.vue
new file mode 100644
index 0000000..c4acb21
--- /dev/null
+++ b/src/views/overview/compEdit.vue
@@ -0,0 +1,391 @@
+<!--
+ * @Description: 部件编辑
+ * @Author: 王晓颖
+ * @Date: 2021-03-08 09:46:39
+ -->
+<template>
+  <app-container>
+    <div id="map" class="leaflet_container"/>
+    <!--查询显示组件-->
+    <search-list ref="searchList"/>
+    <div class="points-add-div">
+      <el-button icon="el-icon-plus" @click="openAddMode">
+        添加部件
+      </el-button>
+    </div>
+    <!--图层选择组件-->
+    <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
+    <!--编辑部件弹窗-->
+    <edit-parts-dialog ref="editPartsDialog" @update="onUpdateFeature"/>
+  </app-container>
+</template>
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import AppContainer from '@/components/layout/AppContainer'
+import LayerChoose from './components/layerChoose'
+import SearchList from './components/searchList'
+import { mapGetters } from 'vuex'
+import EditPartsDialog from './components/editPartsDialog'
+var esri = require('esri-leaflet')
+export default {
+  name: 'ComponentEdit',
+  components: { EditPartsDialog, LayerChoose, AppContainer, SearchList },
+  data() {
+    return {
+      loading: false, // 加载动画
+      addMode: false, // 添加元素状态
+      map: null, // 地图对象
+      drawLayer: null, // 绘制图层（框选）
+      layers: [
+        { id: 0, name: '底图', type: 'map', domain: [] },
+        { id: 1, name: '网格', type: 'layer', domain: [] },
+        { id: 2, name: '商户', type: 'layer', domain: [] },
+        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
+        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
+        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
+        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
+        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
+        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
+        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
+      ],
+      selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      maps: [], // 地图图层
+      parts: [], // 部件图层
+      curretLayer: null, // 当前选中featureLayer
+      currentItem: null // 当前选中部件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'partsAllUrl',
+      'mapUrl',
+      'partsEditUrl'
+    ])
+  },
+  // 销毁时移除监听
+  destroyed() {
+    window.removeEventListener('click', this.handleKeyup, true)
+    this.socket.close()
+  },
+  // 加载完添加点击事件的监听
+  mounted() {
+    this.init()
+    window.addEventListener('click', this.handleKeyup, true)
+  },
+  methods: {
+    // 地图上点击之后，搜索列表隐藏
+    handleKeyup(val) {
+      if (this.$refs.searchList && val.target.id === 'map') {
+        this.$refs.searchList.hideSearch()
+      }
+    },
+    // 移除绘制图层
+    drawDelete() {
+      if (this.drawLayer) {
+        this.drawLayer.layer.remove()
+      }
+    },
+    // 绘制矩形
+    drawSquare() {
+      if (this.drawLayer) {
+        this.drawLayer.layer.remove()
+      }
+      this.$nextTick(() => {
+        this.map.pm.enableDraw('Rectangle', {
+          snappable: false
+        })
+      })
+    },
+    // 绘制多边形
+    drawPolygon() {
+      if (this.drawLayer) {
+        this.drawLayer.layer.remove()
+      }
+      this.$nextTick(() => {
+        this.map.pm.enableDraw('Polygon', {
+          snappable: false
+        })
+      })
+    },
+    // 地图切换
+    mapChange(val) {
+      if (!val) { // 隐藏底图
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.removeLayer(this.maps[i])
+        }
+      } else {
+        for (let i = 0; i < this.maps.length; i++) {
+          this.map.addLayer(this.maps[i])
+        }
+      }
+    },
+    // 部件图层切换
+    layerChange(node, checked) {
+      const selectItem = this.layers.filter(item => item.name === node.name)[0]
+      // 如果选中底图,选中添加，没选中移除
+      if (selectItem.type === 'map') {
+        if (!checked) {
+          for (const item of this.maps) {
+            this.map.removeLayer(item)
+          }
+        } else {
+          for (const item of this.maps) {
+            this.map.addLayer(item)
+          }
+        }
+      } else if (node.type === 'layer') { // 其他图层
+        if (!checked) {
+          for (let i = 0; i < selectItem.domain.length; i++) {
+            this.map.removeLayer(this.parts[selectItem.domain[i] - 1])
+          }
+        } else {
+          for (let i = 0; i < selectItem.domain.length; i++) {
+            this.map.addLayer(this.parts[selectItem.domain[i] - 1])
+          }
+        }
+      }
+    },
+    // 移除点
+    removemarkers() {
+      for (var i = 0; i < this.iconlist.length; i++) {
+        this.map.removeLayer(this.iconlist[i])
+      }
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+    },
+    // 初始化地图
+    init() {
+      this.loading = false
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 21,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable() // 禁止双击
+      this.map = map // data挂载map
+      window.map = map
+      const that = this
+      this.map.on('pm:create', e => {
+        if (that.drawLayer) {
+          that.drawLayer.layer.remove()
+        }
+        that.drawLayer = e
+      })
+      this.map.on('popupopen', e => {
+        // 给按钮添加点击事件
+        document.getElementById('btnEdit').onclick = that.editInfo
+        document.getElementById('btnDelete').onclick = that.delete
+      })
+      // 添加底图
+      for (let i = 0; i <= 21; i++) {
+        // const layer = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
+        var item = { url: this.baseUrl + this.mapUrl + '/' + i.toString() }
+        this.maps.push(esri.featureLayer(item).addTo(map))
+      }
+      // 添加部件
+      for (let i = 1; i <= 40; i++) {
+        let item = { url: `${this.baseUrl}${this.partsEditUrl}/${i}`, minZoom: 18 }
+        console.log(item)
+        if (i === 15) {
+          item = {
+            url: `${this.baseUrl}${this.partsEditUrl}/${i}`,
+            minZoom: 18,
+            style: function(feature) {
+              return { color: '#ff0000', opacity: 0.75, weight: 5 }
+            }
+          }
+        }
+        var layer = esri.featureLayer(item).addTo(map)
+        // 点击部件事件
+        layer.on('click', function(e) {
+          // 获取要素的属性
+          const properties = e.layer.feature.properties
+          that.currentItem = e.layer.feature
+          that.searchLayerByUrl(e.layer.options.url)
+          // 弹窗样式
+          var str = `<div class="pop-window">
+                        <div class="pop-title">
+                          ${properties['小类名称']}
+                        </div>
+                        <div class="pop-line"><col>大类：</col>${properties['大类名称']}</div>
+                        <div class="pop-line"><col>小类：</col>${properties['小类名称']}</div>
+                        <div class="pop-line"><col>部件编码：</col>${properties['编码']}</div>
+                        <div class="pop-line"><col>权属单位：</col>${properties['权属单位'] ? properties.权属单位 : '未知'}</div>
+                        <div class="pop-line"><col>详细地址：</col>${properties['详细地址'] ? properties.详细地址 : '未知'}</div>
+                        <div class="pop-btns">
+                          <button id="btnEdit" class="mini-btn">编辑</button>
+                          <button id="btnDelete" class="mini-btn">删除</button>
+                        </div>
+                      <div>`
+          var popup = L.popup().setContent(str)
+          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
+        })
+        this.parts.push(layer)
+      }
+      // this.map.setZoom(this.baseConfig.zoom)
+    },
+    // 点击新增部件
+    openAddMode() {
+      this.addMode = true
+      var icon = L.icon({
+        iconUrl: require('../../assets/icons/icon-position.png'),
+        iconSize: [35, 35],
+        iconAnchor: [17.5, 35]
+      })
+      this.map.on('click', e => {
+        // convert to GeoJSON
+        const feat = L.marker(e.latlng, { icon: icon })
+        feat.addTo(this.map)
+        console.log(feat)
+        this.$refs.editPartsDialog.initDialog(feat, 'create')
+      })
+    },
+    // 点击编辑
+    editInfo(ev) {
+      // 打开弹窗
+      console.log(this.currentItem)
+      this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
+    },
+    // 点击删除
+    delete(code) {
+      if (this.currentLayer) {
+        debugger
+        this.currentLayer.deleteFeature(this.currentItem)
+        this.$messsage.success('删除成功')
+      }
+    },
+    onCreateFeature(feature) {
+
+    },
+    // 放弃操作，dialogStatus弹窗类型
+    onAbort(dialogStatus) {
+      if (dialogStatus === 'create') {
+        // 清除地图上的锚点
+        this.map.removeLayer(this.currentItem)
+      }
+    },
+    // 编辑保存操作
+    onUpdateFeature(feature) {
+      if (this.currentLayer) {
+        debugger
+        this.currentLayer.updateFeature(feature, () => {
+          this.$messsage.success('编辑成功')
+        })
+      }
+    },
+    // 根据url找到layer
+    searchLayerByUrl(url) {
+      const layer = this.parts.filter(item => item.options.url === url)[0]
+      if (layer) {
+        this.currentLayer = layer
+      }
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:35px;
+  .leaflet_container{
+    width: 100%;
+    height: 85vh;
+    background-color: white;
+  }
+  .draw-icon{
+    background-color: white;
+    width: 100px;height: 40px;
+    border: 1px solid #DCDFE6;
+    border-radius:4px;
+  }
+  .list{
+    text-align:center;
+    width: 500px;
+    height: 40px;
+    z-index: 10000;
+    position: absolute;
+    right:20px;
+    top:20px;
+  }
+  .btn_bottom{
+    text-align:center;
+    width: 100%;
+    height:70px;
+    z-index: 1000;
+    position: fixed; bottom: 0; left: 0;right:0;
+  }
+  .points-add-div{
+    position: absolute;
+    right:250px;
+    top:20px;
+    background-color: white;
+    border-radius: 3px;
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  .pop-window{
+    font-size: 14px;width:200px;
+    padding-right:5px;
+    .pop-title{
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    .pop-line{
+      line-height:20px;
+    }
+    .pop-btns{
+      margin:10px 0px;
+      .mini-btn{
+        display: inline-block;
+        line-height: 1;
+        white-space: nowrap;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid #dcdfe6;
+        color: #606266;
+        -webkit-appearance: none;
+        text-align: center;
+        box-sizing: border-box;
+        outline: none;
+        margin: 0;
+        transition: .1s;
+        font-weight: 500;
+        padding: 7px 15px;
+        font-size: 12px;
+        border-radius: 3px;
+      }
+      .mini-btn+.mini-btn{
+        margin-left:10px;
+      }
+      #btnEdit{
+        color: #409eff;
+        background: #ecf5ff;
+        border-color: #b3d8ff;
+      }
+      #btnEdit:hover{
+        background: #409eff;
+        border-color: #409eff;
+        color: #fff;
+      }
+      #btnDelete{
+        color: #f56c6c;
+        background: #fef0f0;
+        border-color: #fbc4c4;
+      }
+      #btnDelete:hover{
+        background: #f56c6c;
+        border-color: #f56c6c;
+        color: #fff;
+      }
+    }
+  }
+</style>
diff --git a/src/views/overview/components/editPartsDialog.vue b/src/views/overview/components/editPartsDialog.vue
new file mode 100644
index 0000000..1e2ebe8
--- /dev/null
+++ b/src/views/overview/components/editPartsDialog.vue
@@ -0,0 +1,124 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
+      <!--<el-row :gutter="20">-->
+      <!--<el-col :span="12">-->
+      <el-form-item label="大类" prop="class">
+        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+      </el-form-item>
+      <!--</el-col>-->
+      <!--<el-col :span="12">-->
+      <el-form-item label="小类" prop="subClass">
+        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+      </el-form-item>
+      <!--</el-col>-->
+      <!--<el-col :span="12">-->
+      <el-form-item label="部件编码" prop="code">
+        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
+      </el-form-item>
+      <!--</el-col>-->
+      <!--<el-col :span="12">-->
+      <el-form-item label="权属单位" prop="dept">
+        <el-input v-model.trim="dataForm.dept" type="text" placeholder="必填"/>
+      </el-form-item>
+      <!--</el-col>-->
+      <!--<el-col :span="12">-->
+      <el-form-item label="详细地址" prop="address">
+        <el-input v-model.trim="dataForm.address" type="textarea" placeholder="必填"/>
+      </el-form-item>
+      <!--</el-col>-->
+      <!--</el-row>-->
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'EditPartsDialog',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: 'update', // 对话框类型：create,update
+      feature: null,
+      textMap: {
+        update: '编辑部件',
+        create: '新增部件'
+      }, // 标题
+      dataForm: {
+        class: '', // 大类
+        subClass: '', // 小类
+        code: '', // 部件编码
+        dept: '', // 权属单位
+        address: '', // 详细地址
+        x: '',
+        y: ''
+      }, // 数据表单
+      rules: {
+        class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
+        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog(feature, dialogStatus = 'create') {
+      debugger
+      this.dialogFormVisible = true
+      this.dialogStatus = dialogStatus
+      // properties示例：大类代码: 1, 大类名称: "公共设施",小类代码: 3,小类名称: "雨水井盖",编码: 340103
+      const properties = feature.properties
+      this.feature = feature
+      if (dialogStatus === 'update') {
+        this.dataForm = {
+          class: properties['大类名称'], // 大类
+          subClass: properties['小类名称'], // 小类
+          code: properties['编码'], // 部件编码
+          dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
+          address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
+        }
+      } else if (dialogStatus === 'create') {
+      }
+    },
+    // 保存
+    save() {
+      if (this.dialogStatus === 'update') {
+        this.feature.properties['权属单位'] = this.dataForm.dept
+        this.feature.properties['详细地址'] = this.dataForm.address
+      }
+      this.dialogFormVisible = false
+      this.$emit('update', this.feature)
+    },
+    resetForm() {
+      this.dataForm = {
+        class: '', // 大类
+        subClass: '', // 小类
+        code: '', // 部件编码
+        dept: '', // 权属单位
+        address: '', // 详细地址
+        x: '',
+        y: ''
+      }
+    },
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('abort', this.dialogStatus)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>