diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index 617dd05..5a2d34b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -352,7 +352,8 @@
       title="位置详情"
     >
       <!--<tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <!--<arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
+      <leaflet-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
 
     </el-dialog>
   </app-container>
@@ -366,12 +367,13 @@
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
 import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 import { radioMap } from './radioMap'
 import CaseFile from '@/components/caseCommon/caseFile'
 
 export default {
   name: 'CaseDetail',
-  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile },
+  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead },
   data() {
     const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index 617dd05..5a2d34b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -352,7 +352,8 @@
       title="位置详情"
     >
       <!--<tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <!--<arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
+      <leaflet-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
 
     </el-dialog>
   </app-container>
@@ -366,12 +367,13 @@
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
 import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 import { radioMap } from './radioMap'
 import CaseFile from '@/components/caseCommon/caseFile'
 
 export default {
   name: 'CaseDetail',
-  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile },
+  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead },
   data() {
     const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 6f163ce..f8440a7 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -163,7 +163,8 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
+      <!--<arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>-->
+      <leaflet-map-read :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
   </app-container>
 </template>
@@ -172,10 +173,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { ArcGisMapRead, LeafletMapRead },
   props: {
     id: {
       type: String,

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index 617dd05..5a2d34b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -352,7 +352,8 @@
       title="位置详情"
     >
       <!--<tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <!--<arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
+      <leaflet-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
 
     </el-dialog>
   </app-container>
@@ -366,12 +367,13 @@
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
 import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 import { radioMap } from './radioMap'
 import CaseFile from '@/components/caseCommon/caseFile'
 
 export default {
   name: 'CaseDetail',
-  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile },
+  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead },
   data() {
     const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 6f163ce..f8440a7 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -163,7 +163,8 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
+      <!--<arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>-->
+      <leaflet-map-read :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
   </app-container>
 </template>
@@ -172,10 +173,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { ArcGisMapRead, LeafletMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
new file mode 100644
index 0000000..c8b0b6f
--- /dev/null
+++ b/src/components/Map/leafletMap.vue
@@ -0,0 +1,329 @@
+<template>
+  <div style="margin-top: -10px">
+    <el-row :gutter="20">
+      <div v-show="showpoi">
+        <el-col :span="3">
+          <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+        </el-col>
+        <el-col :span="5">
+          <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+          <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+        </el-col>
+      </div>
+
+      <el-col :span="6" :offset="8" style="text-align: right;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="showpoi" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+        <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="10" :offset="0" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div id="map" ref="mapDiv" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+const esri = require('esri-leaflet')
+
+export default {
+  name: 'LeafletMap',
+  data() {
+    return {
+      map: null,
+      markers: [],
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '' // 单元网格图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: false,
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+
+      esri.dynamicMapLayer({
+        url: serverConfig.mapUrlBase
+      }).addTo(map)
+
+      this.addLayers()
+
+      const that = this
+      map.on('click', function(e) {
+
+        console.log('e', e)
+        console.log('e.latlng', e.latlng)
+        console.log('queryEventSwitch', that.queryEventSwitch)
+        that.clearPoints()
+
+        // 加载定位点
+        if (that.showEventPointPopup) {
+          const icon = L.icon({
+            iconUrl: require('../../assets/icons/icon-position.png'),
+            iconSize: [35, 35]
+          })
+          const pos = L.marker(e.latlng, {
+            icon: icon
+          })
+          that.markers.push(pos)
+          that.map.addLayer(pos)
+
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.grid.query()
+            query.nearby(e.latlng, 10)
+            query.run(function(error, featureCollection, response) {
+              if (error) {
+                console.log(error)
+                return
+              }
+              const result = featureCollection.features[0].properties
+              // 赋值
+              that.form.longitude = e.latlng.lng
+              that.form.latitude = e.latlng.lat
+              that.form.gridId = result.CommuId
+              that.form.communityId = result.CommuId
+              that.form.communityName = result.CommuName
+
+              pos.bindPopup('坐标：[' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + ']' + '<p>' + '所在社区：' + result.CommuName).openPopup()
+            })
+          } else if (that.queryEventSwitch === '0') {
+            var latlngs = []
+            var p1 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 0, 2.5)
+            latlngs.push([p1.lat, p1.lon])
+            var p2 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 90, 2.5)
+            latlngs.push([p2.lat, p2.lon])
+            var p3 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 180, 2.5)
+            latlngs.push([p3.lat, p3.lon])
+            var p4 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 270, 2.5)
+            latlngs.push([p4.lat, p4.lon])
+
+            var polyline = L.polygon(latlngs)
+            const bjQuery = that.layers.bjPoint.query()
+            bjQuery.within(polyline)
+            bjQuery.run(function(error, featureCollection, response) {
+              if (error) {
+                console.log(error)
+                return
+              }
+              if (featureCollection.features.length > 0) {
+                const result = featureCollection.features
+                console.log(result)
+                // 赋值
+                that.compListOpts = []
+                let content = ''
+                result.forEach((item, index) => {
+                  content += '<p>部件' + (index + 1) + '：' + item.properties.大类名称 + '-' + item.properties.小类名称 + '-' + item.properties.编码
+                  const comp = {}
+                  comp.name = '部件' + (index + 1) + '：' + item.properties.大类名称 + '-' + item.properties.小类名称 + '-' + item.properties.编码
+                  comp.value = item.properties.编码
+                  that.compListOpts.push(comp)
+                })
+
+                pos.bindPopup('坐标：[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']，附近5米的部件有：' + content).openPopup()
+
+                const query = that.layers.grid.query()
+                query.nearby(e.latlng, 10)
+                query.run(function(error, featureCollection, response) {
+                  if (error) {
+                    console.log(error)
+                    return
+                  }
+                  const result = featureCollection.features[0].properties
+                  // 赋值
+                  that.form.longitude = e.latlng.lng
+                  that.form.latitude = e.latlng.lat
+                  that.form.gridId = result.CommuId
+                  that.form.communityId = result.CommuId
+                  that.form.communityName = result.CommuName
+                })
+              } else {
+                that.$message({
+                  message: '没有查询到部件，请重新定位',
+                  type: 'warning'
+                })
+              }
+            }
+            )
+          }
+        }
+      })
+    },
+    addLayers() {
+      this.layers.bjPoint = esri.featureLayer({
+        url: serverConfig.mapUrlBj + '/0'
+      })
+      this.layers.grid = esri.featureLayer({
+        url: serverConfig.mapUrlBase + '/16'
+      })
+      this.map.addLayer(this.layers.bjPoint)
+      this.map.addLayer(this.layers.grid)
+    },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+      this.clearPoints()
+    },
+    clearPoints() {
+      const that = this
+      this.markers.forEach(marker => {
+        that.map.removeLayer(marker)
+      })
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.form.longitude,
+        this.form.latitude,
+        this.form.communityId,
+        this.form.communityName,
+        this.form.gridId)
+
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.form.longitude,
+        this.form.latitude,
+        this.form.communityId,
+        this.form.communityName,
+        this.form.gridId,
+        this.form.componentId)
+
+      this.clearMap()
+    },
+    clearMap() {
+      this.clearPoints()
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.form.longitude = '' // 定位点经度
+      this.form.latitude = '' // 定位点纬度
+      this.form.communityId = '' // 社区ID
+      this.form.communityName = '' // 社区名称
+      this.form.gridId = '' // 单元网格ID
+      this.form.componentId = '' // 部件ID
+      this.form.componentName = '' // 部件名称
+    },
+    numberToRadius(t) {
+      return (t * Math.PI) / 180
+    },
+    numberToDegree(t) {
+      return (180 * t) / Math.PI
+    },
+    /**
+     * 根据一个经纬度及距离角度，算出另外一个经纬度
+     * @param {*} lon 经度 113.3960698
+     * @param {*} lat 纬度 22.941386
+     * @param {*} brng 方位角 45 ---- 正北方：000°或360° 正东方：090° 正南方：180° 正西方：270°
+     * @param {*} dist 90000距离(米)
+     */
+    getLonAndLat(lon, lat, brng, dist) {
+      // 大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
+      var a = 6378137
+      var b = 6356752.3142
+      var f = 1 / 298.257223563
+      var lon1 = lon * 1
+      var lat1 = lat * 1
+      var s = dist
+      var alpha1 = this.numberToRadius(brng)
+      var sinAlpha1 = Math.sin(alpha1)
+      var cosAlpha1 = Math.cos(alpha1)
+      var tanU1 = (1 - f) * Math.tan(this.numberToRadius(lat1))
+      var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1
+      var sigma1 = Math.atan2(tanU1, cosAlpha1)
+      var sinAlpha = cosU1 * sinAlpha1
+      var cosSqAlpha = 1 - sinAlpha * sinAlpha
+      var uSq = cosSqAlpha * (a * a - b * b) / (b * b)
+      var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)))
+      var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)))
+      var sigma = s / (b * A), sigmaP = 2 * Math.PI
+      while (Math.abs(sigma - sigmaP) > 1e-12) {
+        var cos2SigmaM = Math.cos(2 * sigma1 + sigma)
+        var sinSigma = Math.sin(sigma)
+        var cosSigma = Math.cos(sigma)
+        var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
+          B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)))
+        sigmaP = sigma
+        sigma = s / (b * A) + deltaSigma
+      }
+      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1
+      var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp))
+      var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1)
+      var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha))
+      var L = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)))
+      var revAz = Math.atan2(sinAlpha, -tmp) // final bearing
+      var lonLatObj = { lon: lon1 + this.numberToDegree(L), lat: this.numberToDegree(lat2) }
+      return lonLatObj
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+  .leaflet-container {
+    background: #fff0;
+  }
+</style>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index 617dd05..5a2d34b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -352,7 +352,8 @@
       title="位置详情"
     >
       <!--<tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <!--<arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
+      <leaflet-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
 
     </el-dialog>
   </app-container>
@@ -366,12 +367,13 @@
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
 import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 import { radioMap } from './radioMap'
 import CaseFile from '@/components/caseCommon/caseFile'
 
 export default {
   name: 'CaseDetail',
-  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile },
+  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead },
   data() {
     const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 6f163ce..f8440a7 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -163,7 +163,8 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
+      <!--<arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>-->
+      <leaflet-map-read :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
   </app-container>
 </template>
@@ -172,10 +173,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { ArcGisMapRead, LeafletMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
new file mode 100644
index 0000000..c8b0b6f
--- /dev/null
+++ b/src/components/Map/leafletMap.vue
@@ -0,0 +1,329 @@
+<template>
+  <div style="margin-top: -10px">
+    <el-row :gutter="20">
+      <div v-show="showpoi">
+        <el-col :span="3">
+          <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+        </el-col>
+        <el-col :span="5">
+          <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+          <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+        </el-col>
+      </div>
+
+      <el-col :span="6" :offset="8" style="text-align: right;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="showpoi" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+        <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="10" :offset="0" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div id="map" ref="mapDiv" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+const esri = require('esri-leaflet')
+
+export default {
+  name: 'LeafletMap',
+  data() {
+    return {
+      map: null,
+      markers: [],
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '' // 单元网格图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: false,
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+
+      esri.dynamicMapLayer({
+        url: serverConfig.mapUrlBase
+      }).addTo(map)
+
+      this.addLayers()
+
+      const that = this
+      map.on('click', function(e) {
+
+        console.log('e', e)
+        console.log('e.latlng', e.latlng)
+        console.log('queryEventSwitch', that.queryEventSwitch)
+        that.clearPoints()
+
+        // 加载定位点
+        if (that.showEventPointPopup) {
+          const icon = L.icon({
+            iconUrl: require('../../assets/icons/icon-position.png'),
+            iconSize: [35, 35]
+          })
+          const pos = L.marker(e.latlng, {
+            icon: icon
+          })
+          that.markers.push(pos)
+          that.map.addLayer(pos)
+
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.grid.query()
+            query.nearby(e.latlng, 10)
+            query.run(function(error, featureCollection, response) {
+              if (error) {
+                console.log(error)
+                return
+              }
+              const result = featureCollection.features[0].properties
+              // 赋值
+              that.form.longitude = e.latlng.lng
+              that.form.latitude = e.latlng.lat
+              that.form.gridId = result.CommuId
+              that.form.communityId = result.CommuId
+              that.form.communityName = result.CommuName
+
+              pos.bindPopup('坐标：[' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + ']' + '<p>' + '所在社区：' + result.CommuName).openPopup()
+            })
+          } else if (that.queryEventSwitch === '0') {
+            var latlngs = []
+            var p1 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 0, 2.5)
+            latlngs.push([p1.lat, p1.lon])
+            var p2 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 90, 2.5)
+            latlngs.push([p2.lat, p2.lon])
+            var p3 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 180, 2.5)
+            latlngs.push([p3.lat, p3.lon])
+            var p4 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 270, 2.5)
+            latlngs.push([p4.lat, p4.lon])
+
+            var polyline = L.polygon(latlngs)
+            const bjQuery = that.layers.bjPoint.query()
+            bjQuery.within(polyline)
+            bjQuery.run(function(error, featureCollection, response) {
+              if (error) {
+                console.log(error)
+                return
+              }
+              if (featureCollection.features.length > 0) {
+                const result = featureCollection.features
+                console.log(result)
+                // 赋值
+                that.compListOpts = []
+                let content = ''
+                result.forEach((item, index) => {
+                  content += '<p>部件' + (index + 1) + '：' + item.properties.大类名称 + '-' + item.properties.小类名称 + '-' + item.properties.编码
+                  const comp = {}
+                  comp.name = '部件' + (index + 1) + '：' + item.properties.大类名称 + '-' + item.properties.小类名称 + '-' + item.properties.编码
+                  comp.value = item.properties.编码
+                  that.compListOpts.push(comp)
+                })
+
+                pos.bindPopup('坐标：[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']，附近5米的部件有：' + content).openPopup()
+
+                const query = that.layers.grid.query()
+                query.nearby(e.latlng, 10)
+                query.run(function(error, featureCollection, response) {
+                  if (error) {
+                    console.log(error)
+                    return
+                  }
+                  const result = featureCollection.features[0].properties
+                  // 赋值
+                  that.form.longitude = e.latlng.lng
+                  that.form.latitude = e.latlng.lat
+                  that.form.gridId = result.CommuId
+                  that.form.communityId = result.CommuId
+                  that.form.communityName = result.CommuName
+                })
+              } else {
+                that.$message({
+                  message: '没有查询到部件，请重新定位',
+                  type: 'warning'
+                })
+              }
+            }
+            )
+          }
+        }
+      })
+    },
+    addLayers() {
+      this.layers.bjPoint = esri.featureLayer({
+        url: serverConfig.mapUrlBj + '/0'
+      })
+      this.layers.grid = esri.featureLayer({
+        url: serverConfig.mapUrlBase + '/16'
+      })
+      this.map.addLayer(this.layers.bjPoint)
+      this.map.addLayer(this.layers.grid)
+    },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+      this.clearPoints()
+    },
+    clearPoints() {
+      const that = this
+      this.markers.forEach(marker => {
+        that.map.removeLayer(marker)
+      })
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.form.longitude,
+        this.form.latitude,
+        this.form.communityId,
+        this.form.communityName,
+        this.form.gridId)
+
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.form.longitude,
+        this.form.latitude,
+        this.form.communityId,
+        this.form.communityName,
+        this.form.gridId,
+        this.form.componentId)
+
+      this.clearMap()
+    },
+    clearMap() {
+      this.clearPoints()
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.form.longitude = '' // 定位点经度
+      this.form.latitude = '' // 定位点纬度
+      this.form.communityId = '' // 社区ID
+      this.form.communityName = '' // 社区名称
+      this.form.gridId = '' // 单元网格ID
+      this.form.componentId = '' // 部件ID
+      this.form.componentName = '' // 部件名称
+    },
+    numberToRadius(t) {
+      return (t * Math.PI) / 180
+    },
+    numberToDegree(t) {
+      return (180 * t) / Math.PI
+    },
+    /**
+     * 根据一个经纬度及距离角度，算出另外一个经纬度
+     * @param {*} lon 经度 113.3960698
+     * @param {*} lat 纬度 22.941386
+     * @param {*} brng 方位角 45 ---- 正北方：000°或360° 正东方：090° 正南方：180° 正西方：270°
+     * @param {*} dist 90000距离(米)
+     */
+    getLonAndLat(lon, lat, brng, dist) {
+      // 大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
+      var a = 6378137
+      var b = 6356752.3142
+      var f = 1 / 298.257223563
+      var lon1 = lon * 1
+      var lat1 = lat * 1
+      var s = dist
+      var alpha1 = this.numberToRadius(brng)
+      var sinAlpha1 = Math.sin(alpha1)
+      var cosAlpha1 = Math.cos(alpha1)
+      var tanU1 = (1 - f) * Math.tan(this.numberToRadius(lat1))
+      var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1
+      var sigma1 = Math.atan2(tanU1, cosAlpha1)
+      var sinAlpha = cosU1 * sinAlpha1
+      var cosSqAlpha = 1 - sinAlpha * sinAlpha
+      var uSq = cosSqAlpha * (a * a - b * b) / (b * b)
+      var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)))
+      var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)))
+      var sigma = s / (b * A), sigmaP = 2 * Math.PI
+      while (Math.abs(sigma - sigmaP) > 1e-12) {
+        var cos2SigmaM = Math.cos(2 * sigma1 + sigma)
+        var sinSigma = Math.sin(sigma)
+        var cosSigma = Math.cos(sigma)
+        var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
+          B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)))
+        sigmaP = sigma
+        sigma = s / (b * A) + deltaSigma
+      }
+      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1
+      var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp))
+      var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1)
+      var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha))
+      var L = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)))
+      var revAz = Math.atan2(sinAlpha, -tmp) // final bearing
+      var lonLatObj = { lon: lon1 + this.numberToDegree(L), lat: this.numberToDegree(lat2) }
+      return lonLatObj
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+  .leaflet-container {
+    background: #fff0;
+  }
+</style>
diff --git a/src/components/Map/leafletMapRead.vue b/src/components/Map/leafletMapRead.vue
new file mode 100644
index 0000000..dd22198
--- /dev/null
+++ b/src/components/Map/leafletMapRead.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div v-loading="mapLoading" id="map" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+const esri = require('esri-leaflet')
+export default {
+  name: 'LeafletMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      mapLoading: false,
+      map: null
+    }
+  },
+  mounted() {
+    this.initMap()
+    this.addMarker()
+  },
+  methods: {
+    initMap() {
+      this.mapLoading = true
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+
+      esri.dynamicMapLayer({
+        url: serverConfig.mapUrlBase,
+        opacity: 1,
+        f: 'image'
+      }).addTo(map)
+
+      // esri.tiledMapLayer({
+      //   url: serverConfig.mapUrlBase,
+      //   maxZoom: 15,
+      //   f: 'image'
+      // }).addTo(map)
+
+      // for (let i = 0; i < 24; i++) {
+      //   esri.featureLayer({
+      //     url: serverConfig.mapUrlBase + '/' + i
+      //     // minZoom: 4, // 最小缩放等级
+      //     // maxZoom: 21// 最大缩放等级
+      //   }).addTo(map)
+      // }
+
+      esri.featureLayer({
+        url: serverConfig.mapUrlBj + '/0'
+      }).addTo(map)
+      esri.featureLayer({
+        url: serverConfig.mapUrlBase + '/16'
+      }).addTo(map)
+      this.mapLoading = false
+    },
+
+    addMarker() {
+      const icon = L.icon({
+        iconUrl: require('../../assets/icons/icon-position.png'),
+        iconSize: [35, 35],
+        iconAnchor: [17.5, 35]
+      })
+      const latlng = L.latLng([this.latitude, this.longitude])
+      const feat = L.marker(latlng, { icon: icon })
+      feat.addTo(this.map)
+      this.map.setView({ lat: this.latitude, lng: this.longitude }, 16)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+    margin-top: -10px;
+  }
+  .leaflet-container {
+    background: #fff0;
+  }
+</style>

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index 617dd05..5a2d34b 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -352,7 +352,8 @@
       title="位置详情"
     >
       <!--<tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
-      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
+      <!--<arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
+      <leaflet-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
 
     </el-dialog>
   </app-container>
@@ -366,12 +367,13 @@
 import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
 import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 import { radioMap } from './radioMap'
 import CaseFile from '@/components/caseCommon/caseFile'
 
 export default {
   name: 'CaseDetail',
-  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile },
+  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile, LeafletMapRead },
   data() {
     const validateEmptyString = (rule, value, callback) => {
       if (!value.trim()) {
diff --git a/src/components/CaseCommon/caseDetailRead.vue b/src/components/CaseCommon/caseDetailRead.vue
index 6f163ce..f8440a7 100644
--- a/src/components/CaseCommon/caseDetailRead.vue
+++ b/src/components/CaseCommon/caseDetailRead.vue
@@ -163,7 +163,8 @@
       :append-to-body="true"
       title="位置详情"
     >
-      <arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
+      <!--<arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>-->
+      <leaflet-map-read :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
     </el-dialog>
   </app-container>
 </template>
@@ -172,10 +173,11 @@
 import 'element-ui/lib/theme-chalk/index.css'
 import { getCaseDetail } from '@/api/coorBusiness/case'
 import ArcGisMapRead from '@/components/Map/arcgisMapRead'
+import LeafletMapRead from '@/components/Map/leafletMapRead'
 
 export default {
   name: 'CaseDetail',
-  components: { ArcGisMapRead },
+  components: { ArcGisMapRead, LeafletMapRead },
   props: {
     id: {
       type: String,
diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
new file mode 100644
index 0000000..c8b0b6f
--- /dev/null
+++ b/src/components/Map/leafletMap.vue
@@ -0,0 +1,329 @@
+<template>
+  <div style="margin-top: -10px">
+    <el-row :gutter="20">
+      <div v-show="showpoi">
+        <el-col :span="3">
+          <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
+        </el-col>
+        <el-col :span="5">
+          <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+          <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+        </el-col>
+      </div>
+
+      <el-col :span="6" :offset="8" style="text-align: right;">
+        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
+          <el-radio-button label="1">事件定位</el-radio-button>
+          <el-radio-button label="0">部件定位</el-radio-button>
+          <el-radio-button v-show="showpoi" label="2">兴趣点属性</el-radio-button>
+        </el-radio-group>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+        <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
+          <el-option
+            v-for="item in compListOpts"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
+      </el-col>
+
+      <el-col v-if="queryEventSwitch === '1'" :span="10" :offset="0" style="text-align: right;">
+        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
+      </el-col>
+    </el-row>
+
+    <div id="map" ref="mapDiv" class="baseMap"/>
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+const esri = require('esri-leaflet')
+
+export default {
+  name: 'LeafletMap',
+  data() {
+    return {
+      map: null,
+      markers: [],
+      layers: {
+        bjPoint: '', // 部件点图层
+        grid: '' // 单元网格图层
+      },
+      form: {
+        longitude: '', // 定位点经度
+        latitude: '', // 定位点纬度
+        communityId: '', // 社区ID
+        communityName: '', // 社区名称
+        gridId: '', // 单元网格ID
+        componentId: '', // 部件ID
+        componentName: '' // 部件名称
+      }, // 主页面返回值
+      showpoi: false,
+      keywords: '', // 查询关键字
+      showEventPointPopup: true, // 是否显示事部件的popup
+      queryEventSwitch: '1', // 1==查询事件；0==查询部件
+      compListOpts: [] // 部件选择下拉框option
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+
+      esri.dynamicMapLayer({
+        url: serverConfig.mapUrlBase
+      }).addTo(map)
+
+      this.addLayers()
+
+      const that = this
+      map.on('click', function(e) {
+
+        console.log('e', e)
+        console.log('e.latlng', e.latlng)
+        console.log('queryEventSwitch', that.queryEventSwitch)
+        that.clearPoints()
+
+        // 加载定位点
+        if (that.showEventPointPopup) {
+          const icon = L.icon({
+            iconUrl: require('../../assets/icons/icon-position.png'),
+            iconSize: [35, 35]
+          })
+          const pos = L.marker(e.latlng, {
+            icon: icon
+          })
+          that.markers.push(pos)
+          that.map.addLayer(pos)
+
+          // 查询事件或者部件
+          if (that.queryEventSwitch === '1') {
+            // 事件定位
+            // 1查询底图得到所在网格与所在社区
+            const query = that.layers.grid.query()
+            query.nearby(e.latlng, 10)
+            query.run(function(error, featureCollection, response) {
+              if (error) {
+                console.log(error)
+                return
+              }
+              const result = featureCollection.features[0].properties
+              // 赋值
+              that.form.longitude = e.latlng.lng
+              that.form.latitude = e.latlng.lat
+              that.form.gridId = result.CommuId
+              that.form.communityId = result.CommuId
+              that.form.communityName = result.CommuName
+
+              pos.bindPopup('坐标：[' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + ']' + '<p>' + '所在社区：' + result.CommuName).openPopup()
+            })
+          } else if (that.queryEventSwitch === '0') {
+            var latlngs = []
+            var p1 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 0, 2.5)
+            latlngs.push([p1.lat, p1.lon])
+            var p2 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 90, 2.5)
+            latlngs.push([p2.lat, p2.lon])
+            var p3 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 180, 2.5)
+            latlngs.push([p3.lat, p3.lon])
+            var p4 = that.getLonAndLat(e.latlng.lng, e.latlng.lat, 270, 2.5)
+            latlngs.push([p4.lat, p4.lon])
+
+            var polyline = L.polygon(latlngs)
+            const bjQuery = that.layers.bjPoint.query()
+            bjQuery.within(polyline)
+            bjQuery.run(function(error, featureCollection, response) {
+              if (error) {
+                console.log(error)
+                return
+              }
+              if (featureCollection.features.length > 0) {
+                const result = featureCollection.features
+                console.log(result)
+                // 赋值
+                that.compListOpts = []
+                let content = ''
+                result.forEach((item, index) => {
+                  content += '<p>部件' + (index + 1) + '：' + item.properties.大类名称 + '-' + item.properties.小类名称 + '-' + item.properties.编码
+                  const comp = {}
+                  comp.name = '部件' + (index + 1) + '：' + item.properties.大类名称 + '-' + item.properties.小类名称 + '-' + item.properties.编码
+                  comp.value = item.properties.编码
+                  that.compListOpts.push(comp)
+                })
+
+                pos.bindPopup('坐标：[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']，附近5米的部件有：' + content).openPopup()
+
+                const query = that.layers.grid.query()
+                query.nearby(e.latlng, 10)
+                query.run(function(error, featureCollection, response) {
+                  if (error) {
+                    console.log(error)
+                    return
+                  }
+                  const result = featureCollection.features[0].properties
+                  // 赋值
+                  that.form.longitude = e.latlng.lng
+                  that.form.latitude = e.latlng.lat
+                  that.form.gridId = result.CommuId
+                  that.form.communityId = result.CommuId
+                  that.form.communityName = result.CommuName
+                })
+              } else {
+                that.$message({
+                  message: '没有查询到部件，请重新定位',
+                  type: 'warning'
+                })
+              }
+            }
+            )
+          }
+        }
+      })
+    },
+    addLayers() {
+      this.layers.bjPoint = esri.featureLayer({
+        url: serverConfig.mapUrlBj + '/0'
+      })
+      this.layers.grid = esri.featureLayer({
+        url: serverConfig.mapUrlBase + '/16'
+      })
+      this.map.addLayer(this.layers.bjPoint)
+      this.map.addLayer(this.layers.grid)
+    },
+    switchEventOrComponent: function() {
+      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
+      this.showEventPointPopup = this.queryEventSwitch < 2
+      this.clearPoints()
+    },
+    clearPoints() {
+      const that = this
+      this.markers.forEach(marker => {
+        that.map.removeLayer(marker)
+      })
+    },
+    // 返回事件定位的结果
+    checkEventPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByEvent',
+        this.form.longitude,
+        this.form.latitude,
+        this.form.communityId,
+        this.form.communityName,
+        this.form.gridId)
+
+      this.clearMap()
+    },
+    // 返回部件定位的结果
+    checkComponentPoint: function() {
+      this.$emit(
+        'closeMapQueryDialogByComp',
+        this.form.longitude,
+        this.form.latitude,
+        this.form.communityId,
+        this.form.communityName,
+        this.form.gridId,
+        this.form.componentId)
+
+      this.clearMap()
+    },
+    clearMap() {
+      this.clearPoints()
+      // 清除data属性值
+      this.keywords = ''
+      this.showEventPointPopup = true // 是否显示事部件的popup
+      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
+      this.compListOpts = [] // 部件选择下拉框option
+      this.form.longitude = '' // 定位点经度
+      this.form.latitude = '' // 定位点纬度
+      this.form.communityId = '' // 社区ID
+      this.form.communityName = '' // 社区名称
+      this.form.gridId = '' // 单元网格ID
+      this.form.componentId = '' // 部件ID
+      this.form.componentName = '' // 部件名称
+    },
+    numberToRadius(t) {
+      return (t * Math.PI) / 180
+    },
+    numberToDegree(t) {
+      return (180 * t) / Math.PI
+    },
+    /**
+     * 根据一个经纬度及距离角度，算出另外一个经纬度
+     * @param {*} lon 经度 113.3960698
+     * @param {*} lat 纬度 22.941386
+     * @param {*} brng 方位角 45 ---- 正北方：000°或360° 正东方：090° 正南方：180° 正西方：270°
+     * @param {*} dist 90000距离(米)
+     */
+    getLonAndLat(lon, lat, brng, dist) {
+      // 大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
+      var a = 6378137
+      var b = 6356752.3142
+      var f = 1 / 298.257223563
+      var lon1 = lon * 1
+      var lat1 = lat * 1
+      var s = dist
+      var alpha1 = this.numberToRadius(brng)
+      var sinAlpha1 = Math.sin(alpha1)
+      var cosAlpha1 = Math.cos(alpha1)
+      var tanU1 = (1 - f) * Math.tan(this.numberToRadius(lat1))
+      var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1
+      var sigma1 = Math.atan2(tanU1, cosAlpha1)
+      var sinAlpha = cosU1 * sinAlpha1
+      var cosSqAlpha = 1 - sinAlpha * sinAlpha
+      var uSq = cosSqAlpha * (a * a - b * b) / (b * b)
+      var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)))
+      var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)))
+      var sigma = s / (b * A), sigmaP = 2 * Math.PI
+      while (Math.abs(sigma - sigmaP) > 1e-12) {
+        var cos2SigmaM = Math.cos(2 * sigma1 + sigma)
+        var sinSigma = Math.sin(sigma)
+        var cosSigma = Math.cos(sigma)
+        var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
+          B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)))
+        sigmaP = sigma
+        sigma = s / (b * A) + deltaSigma
+      }
+      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1
+      var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp))
+      var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1)
+      var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha))
+      var L = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)))
+      var revAz = Math.atan2(sinAlpha, -tmp) // final bearing
+      var lonLatObj = { lon: lon1 + this.numberToDegree(L), lat: this.numberToDegree(lat2) }
+      return lonLatObj
+    }
+  }
+}
+</script>
+
+<style scoped>
+  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+  }
+  .leaflet-container {
+    background: #fff0;
+  }
+</style>
diff --git a/src/components/Map/leafletMapRead.vue b/src/components/Map/leafletMapRead.vue
new file mode 100644
index 0000000..dd22198
--- /dev/null
+++ b/src/components/Map/leafletMapRead.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div v-loading="mapLoading" id="map" ref="mapDiv" class="baseMap" />
+  </div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { mapConfig, serverConfig } from './ArcGISConfig'
+const esri = require('esri-leaflet')
+export default {
+  name: 'LeafletMapRead',
+  props: {
+    longitude: {
+      type: Number,
+      default: 116.5937
+    },
+    latitude: {
+      type: Number,
+      default: 28.249
+    }
+  },
+  data() {
+    return {
+      mapLoading: false,
+      map: null
+    }
+  },
+  mounted() {
+    this.initMap()
+    this.addMarker()
+  },
+  methods: {
+    initMap() {
+      this.mapLoading = true
+      const map = L.map('map', {
+        minZoom: 13,
+        // maxZoom: 18,
+        center: [27.755, 116.08],
+        zoom: 16,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      map.doubleClickZoom.disable()
+      this.map = map // data上需要挂载
+      window.map = map
+
+      esri.dynamicMapLayer({
+        url: serverConfig.mapUrlBase,
+        opacity: 1,
+        f: 'image'
+      }).addTo(map)
+
+      // esri.tiledMapLayer({
+      //   url: serverConfig.mapUrlBase,
+      //   maxZoom: 15,
+      //   f: 'image'
+      // }).addTo(map)
+
+      // for (let i = 0; i < 24; i++) {
+      //   esri.featureLayer({
+      //     url: serverConfig.mapUrlBase + '/' + i
+      //     // minZoom: 4, // 最小缩放等级
+      //     // maxZoom: 21// 最大缩放等级
+      //   }).addTo(map)
+      // }
+
+      esri.featureLayer({
+        url: serverConfig.mapUrlBj + '/0'
+      }).addTo(map)
+      esri.featureLayer({
+        url: serverConfig.mapUrlBase + '/16'
+      }).addTo(map)
+      this.mapLoading = false
+    },
+
+    addMarker() {
+      const icon = L.icon({
+        iconUrl: require('../../assets/icons/icon-position.png'),
+        iconSize: [35, 35],
+        iconAnchor: [17.5, 35]
+      })
+      const latlng = L.latLng([this.latitude, this.longitude])
+      const feat = L.marker(latlng, { icon: icon })
+      feat.addTo(this.map)
+      this.map.setView({ lat: this.latitude, lng: this.longitude }, 16)
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+  .baseMap {
+    height:60vh;
+    width: 100%;
+    margin-top: 25px;
+    border: 1px solid #DCDCDC;
+    border-radius: 4px;
+    margin-top: -10px;
+  }
+  .leaflet-container {
+    background: #fff0;
+  }
+</style>
diff --git a/src/views/callCase/callCase.vue b/src/views/callCase/callCase.vue
index e9b31d4..6f471f5 100644
--- a/src/views/callCase/callCase.vue
+++ b/src/views/callCase/callCase.vue
@@ -237,7 +237,11 @@
         append-to-body>
 
         <!--<tian-di-tu-map ref="map" @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent" />-->
-        <arcgis-map-comp
+        <!--<arcgis-map-comp-->
+        <!--ref="mapComp"-->
+        <!--@closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"-->
+        <!--@closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>-->
+        <leaflet-map
           ref="mapComp"
           @closeMapQueryDialogByEvent="closeMapQueryDialogByEvent"
           @closeMapQueryDialogByComp="closeMapQueryDialogByComp"/>
@@ -254,6 +258,7 @@
 import { Uploadimg } from '@/api/common'
 import TianDiTuMap from '@/components/Map/tiandiMap'
 import ArcgisMapComp from '@/components/Map/arcGISMap'
+import LeafletMap from '@/components/Map/leafletMap'
 import VideoUpload from './components/videoUpload'
 import AudioUpload from './components/audioUpload'
 
@@ -263,7 +268,8 @@
     TianDiTuMap: TianDiTuMap,
     ArcgisMapComp: ArcgisMapComp,
     VideoUpload: VideoUpload,
-    AudioUpload: AudioUpload
+    AudioUpload: AudioUpload,
+    LeafletMap: LeafletMap
   },
   data() {
     const phoneValidator = (rule, value, callback) => {
@@ -587,7 +593,7 @@
     // 关闭地图查询对话框
     closeMapQueryDialogByEvent: function(longitude, latitude, communityId, communityName, gridId) {
       this.mapDialogVisible = false
-      debugger
+      // debugger
       // 赋值
       this.caseForm.eorc = '1' // 事件点返回时案卷类别自动选择为事件
       this.caseForm.communityCode = communityId
@@ -839,7 +845,6 @@
     display: flex;
   }
 
-
   /deep/ .el-input__count-inner, .el-input__count{
     line-height: initial !important
   }