diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/Map/tiandiMapRead.vue b/src/components/Map/tiandiMapRead.vue
new file mode 100644
index 0000000..a8bb137
--- /dev/null
+++ b/src/components/Map/tiandiMapRead.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="mapWapper" style="margin-top:-30px">
+    <div ref="map" class="baseMap" />
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null // 事件/部件的marker
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    addCasePointOnMap: function(lng, lat) {
+      if (lng > 0 && lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker([lat, lng]).addTo(this.map)
+        this.map.setView([lat, lng], 16)
+      } else {
+        this.map.setView([27.75962, 116.06021], 12)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/Map/tiandiMapRead.vue b/src/components/Map/tiandiMapRead.vue
new file mode 100644
index 0000000..a8bb137
--- /dev/null
+++ b/src/components/Map/tiandiMapRead.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="mapWapper" style="margin-top:-30px">
+    <div ref="map" class="baseMap" />
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null // 事件/部件的marker
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    addCasePointOnMap: function(lng, lat) {
+      if (lng > 0 && lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker([lat, lng]).addTo(this.map)
+        this.map.setView([lat, lng], 16)
+      } else {
+        this.map.setView([27.75962, 116.06021], 12)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/baseSource/baseSource.vue b/src/views/baseSource/baseSource.vue
index d41c8ee..cd941b9 100644
--- a/src/views/baseSource/baseSource.vue
+++ b/src/views/baseSource/baseSource.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div v-loading="loading" class="overview-map-container">
-      <div id="map"/>
+      <div ref="map" class="baseMap"/>
     </div>
   </div>
 </template>
 
 <script>
-import * as L from 'leaflet'
+import L from 'leaflet'
 export default {
   name: 'BaseSource',
   data() {
@@ -24,7 +24,7 @@
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
+      const map = L.map(this.$refs.map, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
@@ -49,7 +49,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  #map {
+  .baseMap {
     width: 100%;
     height: calc(100vh);
   }

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/Map/tiandiMapRead.vue b/src/components/Map/tiandiMapRead.vue
new file mode 100644
index 0000000..a8bb137
--- /dev/null
+++ b/src/components/Map/tiandiMapRead.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="mapWapper" style="margin-top:-30px">
+    <div ref="map" class="baseMap" />
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null // 事件/部件的marker
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    addCasePointOnMap: function(lng, lat) {
+      if (lng > 0 && lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker([lat, lng]).addTo(this.map)
+        this.map.setView([lat, lng], 16)
+      } else {
+        this.map.setView([27.75962, 116.06021], 12)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/baseSource/baseSource.vue b/src/views/baseSource/baseSource.vue
index d41c8ee..cd941b9 100644
--- a/src/views/baseSource/baseSource.vue
+++ b/src/views/baseSource/baseSource.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div v-loading="loading" class="overview-map-container">
-      <div id="map"/>
+      <div ref="map" class="baseMap"/>
     </div>
   </div>
 </template>
 
 <script>
-import * as L from 'leaflet'
+import L from 'leaflet'
 export default {
   name: 'BaseSource',
   data() {
@@ -24,7 +24,7 @@
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
+      const map = L.map(this.$refs.map, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
@@ -49,7 +49,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  #map {
+  .baseMap {
     width: 100%;
     height: calc(100vh);
   }
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 87b1034..c94cbf1 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -221,10 +221,7 @@
       width="80%"
       append-to-body>
 
-      <arcgis-map-comp
-        ref="mapComp"
-        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
-        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
     </el-dialog>
 
@@ -234,12 +231,12 @@
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
 import { Uploadimg } from '@/api/common'
-import ArcgisMapComp from '@/components/Map/arcGISMap'
+import TianDiTuMap from '@/components/Map/tiandiMap'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
-    ArcgisMapComp: ArcgisMapComp
+    TianDiTuMap: TianDiTuMap
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -532,8 +529,8 @@
       this.caseForm.lng = longitude
       this.caseForm.lat = latitude
 
-      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
-      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseForm.areaCode = gridId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = gridId.substring(0, 9) // 街道代码
     },
     // 关闭地图查询对话框
     closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/Map/tiandiMapRead.vue b/src/components/Map/tiandiMapRead.vue
new file mode 100644
index 0000000..a8bb137
--- /dev/null
+++ b/src/components/Map/tiandiMapRead.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="mapWapper" style="margin-top:-30px">
+    <div ref="map" class="baseMap" />
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null // 事件/部件的marker
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    addCasePointOnMap: function(lng, lat) {
+      if (lng > 0 && lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker([lat, lng]).addTo(this.map)
+        this.map.setView([lat, lng], 16)
+      } else {
+        this.map.setView([27.75962, 116.06021], 12)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/baseSource/baseSource.vue b/src/views/baseSource/baseSource.vue
index d41c8ee..cd941b9 100644
--- a/src/views/baseSource/baseSource.vue
+++ b/src/views/baseSource/baseSource.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div v-loading="loading" class="overview-map-container">
-      <div id="map"/>
+      <div ref="map" class="baseMap"/>
     </div>
   </div>
 </template>
 
 <script>
-import * as L from 'leaflet'
+import L from 'leaflet'
 export default {
   name: 'BaseSource',
   data() {
@@ -24,7 +24,7 @@
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
+      const map = L.map(this.$refs.map, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
@@ -49,7 +49,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  #map {
+  .baseMap {
     width: 100%;
     height: calc(100vh);
   }
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 87b1034..c94cbf1 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -221,10 +221,7 @@
       width="80%"
       append-to-body>
 
-      <arcgis-map-comp
-        ref="mapComp"
-        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
-        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
     </el-dialog>
 
@@ -234,12 +231,12 @@
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
 import { Uploadimg } from '@/api/common'
-import ArcgisMapComp from '@/components/Map/arcGISMap'
+import TianDiTuMap from '@/components/Map/tiandiMap'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
-    ArcgisMapComp: ArcgisMapComp
+    TianDiTuMap: TianDiTuMap
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -532,8 +529,8 @@
       this.caseForm.lng = longitude
       this.caseForm.lat = latitude
 
-      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
-      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseForm.areaCode = gridId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = gridId.substring(0, 9) // 街道代码
     },
     // 关闭地图查询对话框
     closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 54cb279..0cb2ec2 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -163,7 +163,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
   </div>
 </template>
@@ -172,11 +172,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import { historicalRecords } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
     return {
       id: '',

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/Map/tiandiMapRead.vue b/src/components/Map/tiandiMapRead.vue
new file mode 100644
index 0000000..a8bb137
--- /dev/null
+++ b/src/components/Map/tiandiMapRead.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="mapWapper" style="margin-top:-30px">
+    <div ref="map" class="baseMap" />
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null // 事件/部件的marker
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    addCasePointOnMap: function(lng, lat) {
+      if (lng > 0 && lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker([lat, lng]).addTo(this.map)
+        this.map.setView([lat, lng], 16)
+      } else {
+        this.map.setView([27.75962, 116.06021], 12)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/baseSource/baseSource.vue b/src/views/baseSource/baseSource.vue
index d41c8ee..cd941b9 100644
--- a/src/views/baseSource/baseSource.vue
+++ b/src/views/baseSource/baseSource.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div v-loading="loading" class="overview-map-container">
-      <div id="map"/>
+      <div ref="map" class="baseMap"/>
     </div>
   </div>
 </template>
 
 <script>
-import * as L from 'leaflet'
+import L from 'leaflet'
 export default {
   name: 'BaseSource',
   data() {
@@ -24,7 +24,7 @@
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
+      const map = L.map(this.$refs.map, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
@@ -49,7 +49,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  #map {
+  .baseMap {
     width: 100%;
     height: calc(100vh);
   }
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 87b1034..c94cbf1 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -221,10 +221,7 @@
       width="80%"
       append-to-body>
 
-      <arcgis-map-comp
-        ref="mapComp"
-        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
-        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
     </el-dialog>
 
@@ -234,12 +231,12 @@
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
 import { Uploadimg } from '@/api/common'
-import ArcgisMapComp from '@/components/Map/arcGISMap'
+import TianDiTuMap from '@/components/Map/tiandiMap'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
-    ArcgisMapComp: ArcgisMapComp
+    TianDiTuMap: TianDiTuMap
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -532,8 +529,8 @@
       this.caseForm.lng = longitude
       this.caseForm.lat = latitude
 
-      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
-      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseForm.areaCode = gridId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = gridId.substring(0, 9) // 街道代码
     },
     // 关闭地图查询对话框
     closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 54cb279..0cb2ec2 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -163,7 +163,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
   </div>
 </template>
@@ -172,11 +172,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import { historicalRecords } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/caseCommon/caseDetailSupervise.vue b/src/views/caseCommon/caseDetailSupervise.vue
index 879a58a..cd3421f 100644
--- a/src/views/caseCommon/caseDetailSupervise.vue
+++ b/src/views/caseCommon/caseDetailSupervise.vue
@@ -197,7 +197,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -208,11 +208,11 @@
 import { getCommonLanguage } from '@/api/coorBusiness/dict'
 import { historicalRecords } from '@/api/coorBusiness/process'
 import { superviseCaseTask } from '@/api/supervise/supervise'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
     return {
       id: '',
@@ -305,7 +305,6 @@
       }).then(() => {
         console.log('doing submit')
         // 点击“确定”后的操作
-        debugger
         superviseCaseTask(superviseForm).then(response => {
           if (response.code === 200) {
             this.$message.success('提交成功')

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index cfd14e6..ff2621b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -319,7 +319,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -330,14 +330,14 @@
 import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
 import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import { radioMap } from './radioMap'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
-    var validateEmptyString = (rule, value, callback) => {
+    const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
         callback(new Error('处置意见不能为空'))
       } else {
diff --git a/src/components/Map/tiandiMap.vue b/src/components/Map/tiandiMap.vue
new file mode 100644
index 0000000..2c72a58
--- /dev/null
+++ b/src/components/Map/tiandiMap.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="8" style="text-align: center;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div ref="map" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMap',
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null, // 事件/部件的marker
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [], // 部件选择下拉框option
+      // 主页面返回值
+      longitude: '', // 定位点经度
+      latitude: '', // 定位点纬度
+      communityId: '', // 社区ID
+      communityName: '', // 社区名称
+      gridId: '', // 单元网格ID
+      componentId: '', // 部件ID
+      componentName: '' // 部件名称
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      const that = this
+      this.map.on('click', function(e) {
+        that.longitude = e.latlng.lng
+        that.latitude = e.latlng.lat
+        that.communityId = 1
+        that.communityName = '社区'
+        that.gridId = '361024100001'
+
+        if (typeof this.markerPoi !== 'undefined') {
+          this.markerPoi.remove()
+        }
+
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker(e.latlng).addTo(map)
+        that.map.setView(e.latlng)
+      })
+    },
+    // 切换
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.longitude,
+        this.latitude,
+        this.communityId,
+        this.communityName,
+        this.gridId)
+
+      this.clearMap()
+    },
+    // 清除图层上的查询结果
+    clearMap: function() {
+      // 清除地图上绘制的graphic图层
+
+      // 清除弹出框
+
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.longitude = '' // 定位点经度
+      this.latitude = '' // 定位点纬度
+      this.communityId = '' // 社区ID
+      this.communityName = '' // 社区名称
+      this.gridId = '' // 单元网格ID
+      this.componentId = '' // 部件ID
+      this.componentName = '' // 部件名称
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/Map/tiandiMapRead.vue b/src/components/Map/tiandiMapRead.vue
new file mode 100644
index 0000000..a8bb137
--- /dev/null
+++ b/src/components/Map/tiandiMapRead.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="mapWapper" style="margin-top:-30px">
+    <div ref="map" class="baseMap" />
+  </div>
+</template>
+
+<script>
+
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import L from 'leaflet'
+
+export default {
+  name: 'TianDiTuMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baselayer: [],
+      markerPoi: null // 事件/部件的marker
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const map = L.map(this.$refs.map, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+
+      this.addCasePointOnMap(this.longitude, this.latitude)
+    },
+    addCasePointOnMap: function(lng, lat) {
+      if (lng > 0 && lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        this.markerPoi = L.marker([lat, lng]).addTo(this.map)
+        this.map.setView([lat, lng], 16)
+      } else {
+        this.map.setView([27.75962, 116.06021], 12)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/views/baseSource/baseSource.vue b/src/views/baseSource/baseSource.vue
index d41c8ee..cd941b9 100644
--- a/src/views/baseSource/baseSource.vue
+++ b/src/views/baseSource/baseSource.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div v-loading="loading" class="overview-map-container">
-      <div id="map"/>
+      <div ref="map" class="baseMap"/>
     </div>
   </div>
 </template>
 
 <script>
-import * as L from 'leaflet'
+import L from 'leaflet'
 export default {
   name: 'BaseSource',
   data() {
@@ -24,7 +24,7 @@
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
+      const map = L.map(this.$refs.map, {
         minZoom: 3,
         maxZoom: 18,
         center: [27.75962, 116.06021],
@@ -49,7 +49,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  #map {
+  .baseMap {
     width: 100%;
     height: calc(100vh);
   }
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index 87b1034..c94cbf1 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -221,10 +221,7 @@
       width="80%"
       append-to-body>
 
-      <arcgis-map-comp
-        ref="mapComp"
-        @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
-        @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
+      <tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />
 
     </el-dialog>
 
@@ -234,12 +231,12 @@
 <script>
 import { getCaseSource, getCaseLevel, getCaseEorC, getCaseType, getCaseDetailType, getCaseTypesTime, getVerifyPerson, addCase } from '@/api/callCase/callCase'
 import { Uploadimg } from '@/api/common'
-import ArcgisMapComp from '@/components/Map/arcGISMap'
+import TianDiTuMap from '@/components/Map/tiandiMap'
 
 export default {
   name: 'CallCase',
   components: {// 注册组件
-    ArcgisMapComp: ArcgisMapComp
+    TianDiTuMap: TianDiTuMap
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -532,8 +529,8 @@
       this.caseForm.lng = longitude
       this.caseForm.lat = latitude
 
-      this.caseForm.areaCode = communityId.substring(0, 6) // 区县代码
-      this.caseForm.streetCode = communityId.substring(0, 9) // 街道代码
+      this.caseForm.areaCode = gridId.substring(0, 6) // 区县代码
+      this.caseForm.streetCode = gridId.substring(0, 9) // 街道代码
     },
     // 关闭地图查询对话框
     closeMapQueryDialogByComp: function(longitude, latitude, communityId, communityName, gridId, componentId, componentName) {
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 54cb279..0cb2ec2 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -163,7 +163,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)" />
     </el-dialog>
   </div>
 </template>
@@ -172,11 +172,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import { historicalRecords } from '@/api/coorBusiness/process'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
     return {
       id: '',
diff --git a/src/views/caseCommon/caseDetailSupervise.vue b/src/views/caseCommon/caseDetailSupervise.vue
index 879a58a..cd3421f 100644
--- a/src/views/caseCommon/caseDetailSupervise.vue
+++ b/src/views/caseCommon/caseDetailSupervise.vue
@@ -197,7 +197,7 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
   </div>
 </template>
@@ -208,11 +208,11 @@
 import { getCommonLanguage } from '@/api/coorBusiness/dict'
 import { historicalRecords } from '@/api/coorBusiness/process'
 import { superviseCaseTask } from '@/api/supervise/supervise'
-import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { TianDiTuMapRead },
   data() {
     return {
       id: '',
@@ -305,7 +305,6 @@
       }).then(() => {
         console.log('doing submit')
         // 点击“确定”后的操作
-        debugger
         superviseCaseTask(superviseForm).then(response => {
           if (response.code === 200) {
             this.$message.success('提交成功')
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index c4f1d9a..b4a00ad 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -11,8 +11,8 @@
             <el-col :span="6" style="text-align: left;">
               <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
                 <el-radio-button label="0">案卷</el-radio-button>
-                <el-radio-button label="1">人员</el-radio-button>
-                <el-radio-button label="2">部件</el-radio-button>
+<!--                <el-radio-button label="1">人员</el-radio-button>-->
+<!--                <el-radio-button label="2">部件</el-radio-button>-->
               </el-radio-group>
             </el-col>
           </el-row>
@@ -86,25 +86,12 @@
 
 <script>
 import request from '@/utils/request'
-import { loadModules } from 'esri-loader'
 import SupStatisPanel from '@/views/supControl/SupStatisPanel'
 import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
-import { mapConfig, serverConfig } from '@/components/Map/ArcGISConfig'
-import { getUserOnLine } from '@/api/user'
-const option = {
-  url: mapConfig.apiUrl
-}
-
-// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
-const partsResultLayerId = 'partsResultLayer' // 部件查询结果点集的图层id
-const personResultLayerId = 'personResultLayer' // 人员查询结果点集的图层id
-const graphicLayerIds = [
-  'partsResultLayer', 'personResultLayer',
-  'toVerifyCaseNot', 'toVerifyCaseOt',
-  'toCheckCaseNot', 'toCheckCaseOt',
-  'toHandleCaseNot', 'toHandleCaseOt',
-  'toDistributeCaseNot', 'toDistributeCaseOt'
-]
+import L from 'leaflet'
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 
 const caseIcon = [
   '/static/images/case/status_dealing.png', '/static/images/case/status_done.png'
@@ -126,33 +113,7 @@
   data() {
     return {
       map: '',
-      view: '',
-      layers: {
-        dxbjPoint: '', // 部件点图层
-        dxbjLine: '', // 部件线图层
-        dxbjXqd: '', // 兴趣点图层
-        dxbjMph: '', // 门牌好图层
-        dx2wGrid: '', // 单元网格图层
-        personPoint: ''
-      },
-      esriObj: {
-        Map: '',
-        BaseMap: '',
-        Graphic: '',
-        PopupTemplate: '',
-        Circle: '',
-        Point: '',
-        FeatureLayer: '',
-        GraphicsLayer: '',
-        TileLayer: '',
-        SimpleMarkerSymbol: '',
-        PictureMarkerSymbol: '',
-        Query: '',
-        QueryTask: '',
-        IdentifyTask: '',
-        IdentifyParameters: '',
-        MapView: ''
-      },
+      baselayer: [],
       parts: {
         eorc: '2', // 类别
         casetypeCode: '', // 部件大类编码,
@@ -218,7 +179,8 @@
     }
   },
   mounted() {
-    this.importEsri()
+    this.initMap()
+    this.switchContent()
   },
   methods: {
     switchContent: function() {
@@ -284,10 +246,8 @@
               } else { // 未超时
                 that.toVerifyListNot.push(item)
               }
+              that.addCasePointOnMap(item)
             })
-
-            this.addPictureMarkerOnMap(this.toVerifyListNot, caseIcon[0], graphicLayerIds[2])
-            this.addPictureMarkerOnMap(this.toVerifyListOt, caseIcon[1], graphicLayerIds[3])
           }
         }
       })
@@ -310,10 +270,8 @@
               } else { // 未超时
                 that.toCheckListNot.push(item)
               }
+              that.addCasePointOnMap(item)
             })
-
-            this.addPictureMarkerOnMap(this.toCheckListNot, caseIcon[0], graphicLayerIds[4])
-            this.addPictureMarkerOnMap(this.toCheckListOt, caseIcon[1], graphicLayerIds[5])
           }
         }
       })
@@ -336,10 +294,8 @@
               } else { // 未超时
                 that.toHandleListNot.push(item)
               }
+              that.addCasePointOnMap(item)
             })
-
-            this.addPictureMarkerOnMap(this.toHandleListNot, caseIcon[0], graphicLayerIds[6])
-            this.addPictureMarkerOnMap(this.toHandleListOt, caseIcon[1], graphicLayerIds[7])
           }
         }
       })
@@ -362,10 +318,8 @@
               } else { // 未超时
                 that.toDistributeListNot.push(item)
               }
+              that.addCasePointOnMap(item)
             })
-
-            this.addPictureMarkerOnMap(this.toDistributeListNot, caseIcon[0], graphicLayerIds[8])
-            this.addPictureMarkerOnMap(this.toDistributeListOt, caseIcon[1], graphicLayerIds[9])
           }
         }
       })
@@ -425,13 +379,7 @@
       }
     },
     clearPoint: function() {
-      this.map.layers.forEach(layer => {
-        if (layer.type === 'graphics') {
-          layer.graphics.removeAll()
-        }
-      })
-      // 清除弹出框
-      this.view.popup.close()
+
     },
     addPictureMarkerOnMap: function(points, icon, layerId) {
       const that = this
@@ -449,361 +397,72 @@
         }
       })
     },
-    addPersonPoints: function() {
-      const that = this
-      getUserOnLine(this.personQuery).then(res => {
-        this.showGraphicLayer(personResultLayerId, true)
-        const gLayer = this.selectGraphicLayerById(personResultLayerId) // 添加自定义绘制点的图层
-        res.data.forEach((item, index) => {
-          const point = new that.esriObj.Point(116.60769581599995, 28.24919796600002 + index * 0.001) // 创建geometry对象
-          let marker
-          if (item.onLine) {
-            marker = new that.esriObj.PictureMarkerSymbol('/Images/online.png', 20, 20) // 创建marker标识
-          } else {
-            marker = new that.esriObj.PictureMarkerSymbol('/Images/offline.png', 20, 20) // 创建marker标识
-          }
-          const graphic = new that.esriObj.Graphic({
-            geometry: point,
-            symbol: marker,
-            attributes: item
-          })
-          gLayer.items[0].add(graphic) // 图层上添加对象
-        })
-        that.layers.personPoint = gLayer
-      })
-    },
-    addPartsPoints: function(typeCode) {
-      // 部件定位
-      const queryDev = this.layers.dxbjPoint.createQuery()
-      queryDev.returnGeometry = true
-      queryDev.outFields = ['PICTURE']
-      queryDev.where = "OBJNAME = '" + typeCode + "'"
-      const that = this
-      this.layers.dxbjPoint.queryFeatures(queryDev).then(function(response) {
-        if (response.features.length > 0) {
-          const results = response.features
-          that.showGraphicLayer(partsResultLayerId, true)
-          const gLayer = that.selectGraphicLayerById(partsResultLayerId)
-          results.forEach((item, index) => {
-            const point = new that.esriObj.Point(item.geometry.x, item.geometry.y) // 创建geometry对象
-            const marker = new that.esriObj.PictureMarkerSymbol() // 创建marker标识
-            // marker属性
-            marker.width = '20px'
-            marker.height = '20px'
-            marker.url = '/Images/circle.png'
-            // 创建graphic对象
-            const graphic = new that.esriObj.Graphic({
-              geometry: point,
-              symbol: marker
-            })
-            gLayer.items[0].add(graphic) // 图层上添加对象
-          })
-        } else {
-          that.$message({
-            message: '查询无该类部件',
-            type: 'warning'
-          })
-        }
-      })
-    },
-    showGraphicLayer: function(layerId, show) {
-      const gLayer = this.selectGraphicLayerById(layerId)
-      if (gLayer !== null) {
-        gLayer.items[0].visible = show
-      }
-    },
-    showCaseDetail: function(caseId) {
-      console.log(caseId)
-    },
-    // 初始化ArcGIS API对象
-    importEsri: function() {
-      this.mapLoading = true
-      loadModules([
-        'esri/Map',
-        'esri/Basemap',
-        'esri/Graphic',
-        'esri/PopupTemplate',
-        'esri/geometry/Circle',
-        'esri/geometry/Point',
-        'esri/layers/FeatureLayer',
-        'esri/layers/GraphicsLayer',
-        'esri/layers/TileLayer',
-        'esri/symbols/SimpleMarkerSymbol',
-        'esri/symbols/PictureMarkerSymbol',
-        'esri/tasks/support/Query',
-        'esri/tasks/QueryTask',
-        'esri/tasks/IdentifyTask',
-        'esri/tasks/support/IdentifyParameters',
-        'esri/views/MapView',
-        'dojo/domReady!'
-      ], option)
-        .then(([
-          Map,
-          BaseMap,
-          Graphic,
-          PopupTemplate,
-          Circle,
-          Point,
-          FeatureLayer,
-          GraphicsLayer,
-          TileLayer,
-          SimpleMarkerSymbol,
-          PictureMarkerSymbol,
-          Query,
-          QueryTask,
-          IdentifyTask,
-          IdentifyParameters,
-          MapView
-        ]) => {
-          this.esriObj.Map = Map
-          this.esriObj.BaseMap = BaseMap
-          this.esriObj.Graphic = Graphic
-          this.esriObj.PopupTemplate = PopupTemplate
-          this.esriObj.Circle = Circle
-          this.esriObj.Point = Point
-          this.esriObj.FeatureLayer = FeatureLayer
-          this.esriObj.GraphicsLayer = GraphicsLayer
-          this.esriObj.TileLayer = TileLayer
-          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
-          this.esriObj.PictureMarkerSymbol = PictureMarkerSymbol
-          this.esriObj.Query = Query
-          this.esriObj.QueryTask = QueryTask
-          this.esriObj.IdentifyTask = IdentifyTask
-          this.esriObj.IdentifyParameters = IdentifyParameters
-          this.esriObj.MapView = MapView
+    addCasePointOnMap: function(caseDetail) {
+      let popupStr = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">案卷概要信息</div>' +
+        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷状态</label>' + caseDetail.caseStateName + '</div>' +
+        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷类型</label>' + caseDetail.casetypeName + ' / ' + caseDetail.casetypeDetailName + '</div>' +
+        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">发生地点</label>' + caseDetail.fieldintro + '</div>' +
+        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷描述</label>' + caseDetail.description + '</div>' +
+        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">登记时间</label>' + caseDetail.reportTime + '</div>'
 
-          // 初始化地图
-          this.initMap()
-          this.mapLoading = false
-        }).catch(err => {
-          console.log(err)
-          this.mapLoading = false
+      if (caseDetail.fileIdVerify !== '') {
+        const verifyImgs = caseDetail.fileIdVerify.split(',')
+        const imgUrl1 = process.env.BASE_API + '/static/' + verifyImgs[0]
+        popupStr += '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷图片</label></div>'
+        popupStr += '<div style="padding-bottom: 6px;"><img src="' + imgUrl1 + '" width="100" />'
+        if (verifyImgs.length > 1) {
+          const imgUrl2 = process.env.BASE_API + '/static/' + verifyImgs[1]
+          popupStr += '<img src="' + imgUrl2 + '" width="100" style="margin-left: 10px;" />'
+        }
+        popupStr += '</div>'
+      }
+
+      const popup = L.popup().setContent(popupStr)
+
+      if (caseDetail.lng > 0 && caseDetail.lat > 0) {
+        // 添加marker
+        const DefaultIcon = L.icon({
+          iconUrl: markerIcon,
+          iconRetinaUrl: markerIcon2x,
+          shadowUrl: markerShadow,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
         })
+        L.Marker.prototype.options.icon = DefaultIcon
+        L.marker([caseDetail.lat, caseDetail.lng]).addTo(this.map).bindPopup(popup)
+      }
     },
     // 初始化地图
     initMap: function() {
-      const base = new this.esriObj.BaseMap({
-        baseLayers: [
-          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
-            id: '2w',
-            url: serverConfig.mapUrlBase
-          })
-        ],
-        title: 'dx2w',
-        id: 'dx2w'
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
       })
+      this.map = map // data上需要挂载
+      window.map = map
 
-      this.map = new this.esriObj.Map({
-        basemap: base // 底图类型，详见BaseMap类
-      })
-
-      this.view = new this.esriObj.MapView({
-        container: this.$refs.mapDiv, // 视图的容器
-        map: this.map, // Map的实例放入视图中
-        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
-        zoom: 3 // 当前地图缩放等级
-      })
-      this.view.ui._removeComponents(['zoom'])
-
-      this.addBjLayers()
-      this.addGraphicLayers()
-      this.queryCaseList()
-      const that = this
-      this.view.on('click', function(event) {
-        const lon = event.mapPoint.longitude
-        const lat = event.mapPoint.latitude
-        if (that.queryEventSwitch === '2') {
-          // 部件定位
-          const queryDev = that.layers.dxbjPoint.createQuery()
-          // 定义查询的圆形范围，半径1米
-          const circle = new that.esriObj.Circle({
-            center: event.mapPoint,
-            radius: 1,
-            radiusUnit: 'meters'
-          })
-          queryDev.geometry = circle
-          queryDev.returnGeometry = true
-          queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS', 'DEPTNAME1', 'DEPTNAME2', 'DEPTNAME3']
-          that.layers.dxbjPoint.queryFeatures(queryDev)
-            .then(function(response) {
-              if (response.features.length > 0) {
-                const results = response.features
-
-                const content = '部件编号：' + results[0].attributes.OBJID +
-                  '<p>万米网格：' + results[0].attributes.BGID +
-                  '<p>部件类型：' + results[0].attributes.OBJNAME +
-                  '<p>权属部门：' + results[0].attributes.DEPTNAME1 +
-                  '<p>责任部门：' + results[0].attributes.DEPTNAME2 +
-                  '<p>养护部门：' + results[0].attributes.DEPTNAME3
-
-                // 2弹出气泡
-                that.view.popup.open({
-                  title: results[0].attributes.OBJNAME,
-                  content: content,
-                  location: results[0].geometry
-                })
-
-                // 查询所在社区和单元网格
-                const queryPos = that.layers.dx2wGrid.createQuery()
-                queryPos.geometry = that.view.toMap(event)
-                queryPos.returnGeometry = true
-                queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
-                that.layers.dx2wGrid.queryFeatures(queryPos)
-                  .then(function(response) {
-                    const result = response.features[0].attributes
-
-                    // 赋值
-                    that.longitude = lon
-                    that.latitude = lat
-                    that.gridId = result.BGID
-                    that.communityId = result.COMMUID
-                    that.communityName = result.COMMUNAME
-                  })
-              } else {
-                that.$message({
-                  message: '没有查询到部件，请重新定位',
-                  type: 'warning'
-                })
-              }
-            })
-        } else if (that.queryEventSwitch === '1') {
-          // 人员定位
-          that.view.hitTest(event).then(function(response) {
-            const feature = response.results[0].graphic
-            let content = ''
-            if (that.personQuery.roleTips === 'supervisor') {
-              content = '监督员编号：' + feature.attributes.userId +
-                '<p>监督员姓名：' + feature.attributes.name +
-                '<p>手机号码：' + feature.attributes.phone +
-                '<p>部门名称：' + feature.attributes.deptName +
-                '<p>轨迹时间点：' + feature.attributes.lastTimeFmt
-            } else if (that.personQuery.roleTips === 'process') {
-              content = '处置员编号：' + feature.attributes.userId +
-                '<p>处置员姓名：' + feature.attributes.name +
-                '<p>手机号码：' + feature.attributes.phone +
-                '<p>部门名称：' + feature.attributes.deptName +
-                '<p>轨迹时间点：' + feature.attributes.lastTimeFmt
-            }
-            // 2弹出气泡
-            that.view.popup.open({
-              title: feature.attributes.name,
-              content: content,
-              location: feature.geometry
-            })
-          })
-        } else if (that.queryEventSwitch === '0') {
-          // 案卷定位
-          that.view.hitTest(event).then(function(response) {
-            const feature = response.results[0].graphic
-
-            const imgUrl = process.env.BASE_API + '/static/'
-
-            // 如果点中的是案卷的图标，向后台再查询一次
-            if (feature.layer.id.indexOf('Case') > 0) {
-              const id = feature.attributes.id
-              if (id !== null || id !== '' || id !== 'undefined') {
-                request({
-                  url: 'case/detail/' + id,
-                  method: 'get'
-                }).then(response => {
-                  if (response.code === 200) {
-                    const caseDetail = response.data[0]
-
-                    let detailTableHtml = '<table>'
-                    detailTableHtml += '<tr><td colspan="2" width="370px">' + '案卷状态：' + caseDetail.caseStateName + '</td></tr>'
-                    detailTableHtml += '<tr><td colspan="2">' + '案卷类别：' + caseDetail.eorcName + '/' + caseDetail.casetypeName + '/' + caseDetail.casetypeDetailName + '</td></tr>'
-                    detailTableHtml += '<tr><td colspan="2">' + '上报时间：' + caseDetail.createTime + '</td></tr>'
-                    detailTableHtml += '<tr><td colspan="2">' + '案卷地点：' + caseDetail.fieldintro + '</td></tr>'
-                    detailTableHtml += '<tr><td colspan="2">' + '案卷情况：' + caseDetail.description + '</td></tr>'
-                    if (caseDetail.fileIdVerify !== '') {
-                      const verify = caseDetail.fileIdVerify.split(',')
-                      detailTableHtml += '<tr><td colspan="2">上报图片</td></tr>'
-                      detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + verify[0] + '"></td>'
-                      if (verify[1] !== '') {
-                        detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + verify[1] + '"></td></tr>'
-                      } else {
-                        detailTableHtml += '<td></td></tr>'
-                      }
-                    }
-                    if (caseDetail.fileIdProcess !== '') {
-                      const process = caseDetail.fileIdProcess.split(',')
-                      detailTableHtml += '<tr><td colspan="2">处置图片</td></tr>'
-                      detailTableHtml += '<tr><td width="180px"><img width="180px" height="200px" src="' + imgUrl + process[0] + '"></td>'
-                      if (process[1] !== '') {
-                        detailTableHtml += '<td><img width="180px" height="200px" src="' + imgUrl + process[1] + '"></td></tr>'
-                      } else {
-                        detailTableHtml += '<td></td></tr>'
-                      }
-                    }
-                    detailTableHtml += '</table>'
-
-                    // 2弹出气泡
-                    that.view.popup.open({
-                      title: caseDetail.caseid,
-                      content: detailTableHtml,
-                      location: feature.geometry
-                    })
-                  }
-                })
-              }
-            }
-          })
-        }
-      })
-    },
-    // 加载部件服务的各图层
-    addBjLayers: function() {
-      // 此处可以优化
-      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
-        url: serverConfig.mapUrlBj + '/0',
-        id: 'dxbjPoint'
-      })
-      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
-        url: serverConfig.mapUrlBj + '/1',
-        id: 'dxbjLine'
-      })
-      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
-        url: serverConfig.mapUrlBj + '/2',
-        id: 'dxbjXqd'
-      })
-      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
-        url: serverConfig.mapUrlBj + '/3',
-        id: 'dxbjMph'
-      })
-      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
-        url: serverConfig.mapUrlBase + '/1',
-        id: 'gridLayer'
-      })
-      // 加载各图层
-      this.map.add(this.layers.dxbjPoint)
-      this.map.add(this.layers.dxbjLine)
-      this.map.add(this.layers.dxbjXqd)
-      this.map.add(this.layers.dxbjMph)
-      this.map.add(this.layers.dx2wGrid)
-    },
-    // 预先添加绘制的Graphic图层
-    addGraphicLayers: function() {
-      graphicLayerIds.forEach(item => {
-        const gLayer = new this.esriObj.GraphicsLayer()
-        gLayer.id = item
-        this.map.add(gLayer)
-      })
-    },
-    // 从graphic图层中找到指定的图层
-    selectGraphicLayerById: function(layerId) {
-      return this.map.layers.filter(layer => {
-        if (layer.id === layerId) {
-          return layer
-        }
-      })
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
     }
   }
 }
 </script>
 
 <style scoped>
-/*@import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css';*/
-@import 'https://js.arcgis.com/4.13/esri/css/main.css';
 
 .staticPanel {
   height: calc(100vh - 80px);