diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
index c8b0b6f..9eabad8 100644
--- a/src/components/Map/leafletMap.vue
+++ b/src/components/Map/leafletMap.vue
@@ -1,17 +1,13 @@
 <template>
-  <div style="margin-top: -10px">
+  <div style="margin-top: -30px; margin-bottom: -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 v-show="showpoi" :span="8">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable style="width: 50%" />
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
 
-      <el-col :span="6" :offset="8" style="text-align: right;">
+      <el-col :span="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>
@@ -19,7 +15,7 @@
         </el-radio-group>
       </el-col>
 
-      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
         <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
           <el-option
             v-for="item in compListOpts"
@@ -30,7 +26,7 @@
         <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-col v-if="queryEventSwitch === '1'" :span="8" :offset="0" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
     </el-row>
@@ -42,18 +38,30 @@
 <script>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { mapConfig, serverConfig } from './ArcGISConfig'
+import { mapGetters } from 'vuex'
 const esri = require('esri-leaflet')
 
+const icon = L.icon({
+  iconUrl: require('@/assets/icons/icon-position.png'),
+  iconSize: [32, 32],
+  iconAnchor: [16, 32],
+  popupAnchor: [0, -32]
+})
+
+const deltaLng10 = 0.00002536 // 10米范围经度值偏移量（大约）
+const deltaLat10 = 0.00002256 // 10米范围纬度值偏移量（大约）
+
 export default {
   name: 'LeafletMap',
   data() {
     return {
       map: null,
+      baseLayer: [],
       markers: [],
       layers: {
         bjPoint: '', // 部件点图层
-        grid: '' // 单元网格图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
       },
       form: {
         longitude: '', // 定位点经度
@@ -64,23 +72,32 @@
         componentId: '', // 部件ID
         componentName: '' // 部件名称
       }, // 主页面返回值
-      showpoi: false,
+      showpoi: true,
       keywords: '', // 查询关键字
       showEventPointPopup: true, // 是否显示事部件的popup
       queryEventSwitch: '1', // 1==查询事件；0==查询部件
       compListOpts: [] // 部件选择下拉框option
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
   mounted() {
     this.initMap()
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
-        minZoom: 13,
-        // maxZoom: 18,
-        center: [27.755, 116.08],
-        zoom: 16,
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
         zoomControl: false,
         attributionControl: false,
         crs: L.CRS.EPSG3857
@@ -89,129 +106,140 @@
       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'
-                })
-              }
+          // 查询所点的网格
+          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.GBID
+            that.form.communityId = result.GBID.substring(0, 12)
+            that.form.communityName = result.Note
+
+            if (that.queryEventSwitch === '1') {
+              // 事件定位
+              // 弹出事件点位信息
+              const popupStr = '<div class="popup-div">' +
+                '<div class="popup-title">事件点</div>' +
+                '<div class="dashed-line"></div>' +
+                '<div class="popup-item"><label>坐标</label>' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + '</div>' +
+                '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>' +
+                '</div>'
+
+              pos.bindPopup(popupStr).openPopup()
+            } else if (that.queryEventSwitch === '0') {
+              // 部件定位
+              // 1构建部件查询多边形，上下左右四个点
+              const latlngs = []
+              const p1 = [e.latlng.lat + deltaLat10, e.latlng.lng] // 上方点
+              const p2 = [e.latlng.lat, e.latlng.lng + deltaLng10] // 右侧点
+              const p3 = [e.latlng.lat - deltaLat10, e.latlng.lng] // 下方点
+              const p4 = [e.latlng.lat, e.latlng.lng - deltaLng10] // 左侧点
+              latlngs.push(p1)
+              latlngs.push(p2)
+              latlngs.push(p3)
+              latlngs.push(p4)
+
+              const 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
+                  // 赋值
+                  that.compListOpts = []
+
+                  // 构建弹出窗口信息
+                  let popupStr = '<div class="popup-div">' +
+                    '<div class="popup-title">部件</div>' +
+                    '<div class="dashed-line"></div>' +
+                    '<div class="popup-item">坐标[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']附近的部件有</div>' +
+                    '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                    '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>'
+
+                  result.forEach((item, index) => {
+                    popupStr += '<div class="popup-subitem"><label style="padding-right: 5px;">部件' + (index + 1) + '</label>' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']</div>'
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']'
+                    comp.value = item.properties.objid
+                    that.compListOpts.push(comp)
+                  })
+
+                  popupStr += '</div>'
+                  pos.bindPopup(popupStr).openPopup()
+                } else {
+                  that.$message({ message: '没有查询到部件，请重新定位', type: 'warning' })
+                }
+              })
+            }
+          })
         }
       })
     },
     addLayers() {
+      // 加载天地图底图和标注
+      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(this.map))
+      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(this.map))
+
+      // 加载底图
+      esri.dynamicMapLayer({
+        url: `${this.baseUrl}${this.mapUrl}`,
+        zIndex: 1
+      }).addTo(this.map)
+
+      // 初始化部件图层（不分层），待切换到部件定位时加载
       this.layers.bjPoint = esri.featureLayer({
-        url: serverConfig.mapUrlBj + '/0'
+        url: `${this.baseUrl}${this.partsAllUrl}`,
+        minZoom: 19
       })
+
+      // 加载网格图层
       this.layers.grid = esri.featureLayer({
-        url: serverConfig.mapUrlBase + '/16'
+        url: `${this.baseUrl}${this.gridUrl}`
       })
-      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()
+
+      if (this.queryEventSwitch === '0') {
+        // 加载和显示部件图层
+        this.map.addLayer(this.layers.bjPoint)
+        // 清空部件选择的列表
+        this.compListOpts = []
+      } else {
+        this.map.removeLayer(this.layers.bjPoint)
+      }
     },
     clearPoints() {
       const that = this
@@ -219,6 +247,9 @@
         that.map.removeLayer(marker)
       })
     },
+    queryOnMap: function() {
+
+    },
     // 返回事件定位的结果
     checkEventPoint: function() {
       this.$emit(
@@ -258,72 +289,52 @@
       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;
+    height: 65vh;
     width: 100%;
-    margin-top: 25px;
+    margin-top: 10px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
-  .leaflet-container {
-    background: #fff0;
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
   }
 </style>

diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
index c8b0b6f..9eabad8 100644
--- a/src/components/Map/leafletMap.vue
+++ b/src/components/Map/leafletMap.vue
@@ -1,17 +1,13 @@
 <template>
-  <div style="margin-top: -10px">
+  <div style="margin-top: -30px; margin-bottom: -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 v-show="showpoi" :span="8">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable style="width: 50%" />
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
 
-      <el-col :span="6" :offset="8" style="text-align: right;">
+      <el-col :span="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>
@@ -19,7 +15,7 @@
         </el-radio-group>
       </el-col>
 
-      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
         <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
           <el-option
             v-for="item in compListOpts"
@@ -30,7 +26,7 @@
         <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-col v-if="queryEventSwitch === '1'" :span="8" :offset="0" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
     </el-row>
@@ -42,18 +38,30 @@
 <script>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { mapConfig, serverConfig } from './ArcGISConfig'
+import { mapGetters } from 'vuex'
 const esri = require('esri-leaflet')
 
+const icon = L.icon({
+  iconUrl: require('@/assets/icons/icon-position.png'),
+  iconSize: [32, 32],
+  iconAnchor: [16, 32],
+  popupAnchor: [0, -32]
+})
+
+const deltaLng10 = 0.00002536 // 10米范围经度值偏移量（大约）
+const deltaLat10 = 0.00002256 // 10米范围纬度值偏移量（大约）
+
 export default {
   name: 'LeafletMap',
   data() {
     return {
       map: null,
+      baseLayer: [],
       markers: [],
       layers: {
         bjPoint: '', // 部件点图层
-        grid: '' // 单元网格图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
       },
       form: {
         longitude: '', // 定位点经度
@@ -64,23 +72,32 @@
         componentId: '', // 部件ID
         componentName: '' // 部件名称
       }, // 主页面返回值
-      showpoi: false,
+      showpoi: true,
       keywords: '', // 查询关键字
       showEventPointPopup: true, // 是否显示事部件的popup
       queryEventSwitch: '1', // 1==查询事件；0==查询部件
       compListOpts: [] // 部件选择下拉框option
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
   mounted() {
     this.initMap()
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
-        minZoom: 13,
-        // maxZoom: 18,
-        center: [27.755, 116.08],
-        zoom: 16,
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
         zoomControl: false,
         attributionControl: false,
         crs: L.CRS.EPSG3857
@@ -89,129 +106,140 @@
       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'
-                })
-              }
+          // 查询所点的网格
+          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.GBID
+            that.form.communityId = result.GBID.substring(0, 12)
+            that.form.communityName = result.Note
+
+            if (that.queryEventSwitch === '1') {
+              // 事件定位
+              // 弹出事件点位信息
+              const popupStr = '<div class="popup-div">' +
+                '<div class="popup-title">事件点</div>' +
+                '<div class="dashed-line"></div>' +
+                '<div class="popup-item"><label>坐标</label>' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + '</div>' +
+                '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>' +
+                '</div>'
+
+              pos.bindPopup(popupStr).openPopup()
+            } else if (that.queryEventSwitch === '0') {
+              // 部件定位
+              // 1构建部件查询多边形，上下左右四个点
+              const latlngs = []
+              const p1 = [e.latlng.lat + deltaLat10, e.latlng.lng] // 上方点
+              const p2 = [e.latlng.lat, e.latlng.lng + deltaLng10] // 右侧点
+              const p3 = [e.latlng.lat - deltaLat10, e.latlng.lng] // 下方点
+              const p4 = [e.latlng.lat, e.latlng.lng - deltaLng10] // 左侧点
+              latlngs.push(p1)
+              latlngs.push(p2)
+              latlngs.push(p3)
+              latlngs.push(p4)
+
+              const 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
+                  // 赋值
+                  that.compListOpts = []
+
+                  // 构建弹出窗口信息
+                  let popupStr = '<div class="popup-div">' +
+                    '<div class="popup-title">部件</div>' +
+                    '<div class="dashed-line"></div>' +
+                    '<div class="popup-item">坐标[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']附近的部件有</div>' +
+                    '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                    '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>'
+
+                  result.forEach((item, index) => {
+                    popupStr += '<div class="popup-subitem"><label style="padding-right: 5px;">部件' + (index + 1) + '</label>' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']</div>'
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']'
+                    comp.value = item.properties.objid
+                    that.compListOpts.push(comp)
+                  })
+
+                  popupStr += '</div>'
+                  pos.bindPopup(popupStr).openPopup()
+                } else {
+                  that.$message({ message: '没有查询到部件，请重新定位', type: 'warning' })
+                }
+              })
+            }
+          })
         }
       })
     },
     addLayers() {
+      // 加载天地图底图和标注
+      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(this.map))
+      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(this.map))
+
+      // 加载底图
+      esri.dynamicMapLayer({
+        url: `${this.baseUrl}${this.mapUrl}`,
+        zIndex: 1
+      }).addTo(this.map)
+
+      // 初始化部件图层（不分层），待切换到部件定位时加载
       this.layers.bjPoint = esri.featureLayer({
-        url: serverConfig.mapUrlBj + '/0'
+        url: `${this.baseUrl}${this.partsAllUrl}`,
+        minZoom: 19
       })
+
+      // 加载网格图层
       this.layers.grid = esri.featureLayer({
-        url: serverConfig.mapUrlBase + '/16'
+        url: `${this.baseUrl}${this.gridUrl}`
       })
-      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()
+
+      if (this.queryEventSwitch === '0') {
+        // 加载和显示部件图层
+        this.map.addLayer(this.layers.bjPoint)
+        // 清空部件选择的列表
+        this.compListOpts = []
+      } else {
+        this.map.removeLayer(this.layers.bjPoint)
+      }
     },
     clearPoints() {
       const that = this
@@ -219,6 +247,9 @@
         that.map.removeLayer(marker)
       })
     },
+    queryOnMap: function() {
+
+    },
     // 返回事件定位的结果
     checkEventPoint: function() {
       this.$emit(
@@ -258,72 +289,52 @@
       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;
+    height: 65vh;
     width: 100%;
-    margin-top: 25px;
+    margin-top: 10px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
-  .leaflet-container {
-    background: #fff0;
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
   }
 </style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 57e8aac..826e570 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -31,6 +31,7 @@
   partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
+  gridUrl: state => state.map.gridUrl, // 网格图层
   editUrl: state => state.map.editUrl // 编辑地图地址
 }
 export default getters

diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
index c8b0b6f..9eabad8 100644
--- a/src/components/Map/leafletMap.vue
+++ b/src/components/Map/leafletMap.vue
@@ -1,17 +1,13 @@
 <template>
-  <div style="margin-top: -10px">
+  <div style="margin-top: -30px; margin-bottom: -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 v-show="showpoi" :span="8">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable style="width: 50%" />
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
 
-      <el-col :span="6" :offset="8" style="text-align: right;">
+      <el-col :span="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>
@@ -19,7 +15,7 @@
         </el-radio-group>
       </el-col>
 
-      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
         <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
           <el-option
             v-for="item in compListOpts"
@@ -30,7 +26,7 @@
         <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-col v-if="queryEventSwitch === '1'" :span="8" :offset="0" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
     </el-row>
@@ -42,18 +38,30 @@
 <script>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { mapConfig, serverConfig } from './ArcGISConfig'
+import { mapGetters } from 'vuex'
 const esri = require('esri-leaflet')
 
+const icon = L.icon({
+  iconUrl: require('@/assets/icons/icon-position.png'),
+  iconSize: [32, 32],
+  iconAnchor: [16, 32],
+  popupAnchor: [0, -32]
+})
+
+const deltaLng10 = 0.00002536 // 10米范围经度值偏移量（大约）
+const deltaLat10 = 0.00002256 // 10米范围纬度值偏移量（大约）
+
 export default {
   name: 'LeafletMap',
   data() {
     return {
       map: null,
+      baseLayer: [],
       markers: [],
       layers: {
         bjPoint: '', // 部件点图层
-        grid: '' // 单元网格图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
       },
       form: {
         longitude: '', // 定位点经度
@@ -64,23 +72,32 @@
         componentId: '', // 部件ID
         componentName: '' // 部件名称
       }, // 主页面返回值
-      showpoi: false,
+      showpoi: true,
       keywords: '', // 查询关键字
       showEventPointPopup: true, // 是否显示事部件的popup
       queryEventSwitch: '1', // 1==查询事件；0==查询部件
       compListOpts: [] // 部件选择下拉框option
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
   mounted() {
     this.initMap()
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
-        minZoom: 13,
-        // maxZoom: 18,
-        center: [27.755, 116.08],
-        zoom: 16,
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
         zoomControl: false,
         attributionControl: false,
         crs: L.CRS.EPSG3857
@@ -89,129 +106,140 @@
       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'
-                })
-              }
+          // 查询所点的网格
+          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.GBID
+            that.form.communityId = result.GBID.substring(0, 12)
+            that.form.communityName = result.Note
+
+            if (that.queryEventSwitch === '1') {
+              // 事件定位
+              // 弹出事件点位信息
+              const popupStr = '<div class="popup-div">' +
+                '<div class="popup-title">事件点</div>' +
+                '<div class="dashed-line"></div>' +
+                '<div class="popup-item"><label>坐标</label>' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + '</div>' +
+                '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>' +
+                '</div>'
+
+              pos.bindPopup(popupStr).openPopup()
+            } else if (that.queryEventSwitch === '0') {
+              // 部件定位
+              // 1构建部件查询多边形，上下左右四个点
+              const latlngs = []
+              const p1 = [e.latlng.lat + deltaLat10, e.latlng.lng] // 上方点
+              const p2 = [e.latlng.lat, e.latlng.lng + deltaLng10] // 右侧点
+              const p3 = [e.latlng.lat - deltaLat10, e.latlng.lng] // 下方点
+              const p4 = [e.latlng.lat, e.latlng.lng - deltaLng10] // 左侧点
+              latlngs.push(p1)
+              latlngs.push(p2)
+              latlngs.push(p3)
+              latlngs.push(p4)
+
+              const 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
+                  // 赋值
+                  that.compListOpts = []
+
+                  // 构建弹出窗口信息
+                  let popupStr = '<div class="popup-div">' +
+                    '<div class="popup-title">部件</div>' +
+                    '<div class="dashed-line"></div>' +
+                    '<div class="popup-item">坐标[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']附近的部件有</div>' +
+                    '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                    '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>'
+
+                  result.forEach((item, index) => {
+                    popupStr += '<div class="popup-subitem"><label style="padding-right: 5px;">部件' + (index + 1) + '</label>' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']</div>'
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']'
+                    comp.value = item.properties.objid
+                    that.compListOpts.push(comp)
+                  })
+
+                  popupStr += '</div>'
+                  pos.bindPopup(popupStr).openPopup()
+                } else {
+                  that.$message({ message: '没有查询到部件，请重新定位', type: 'warning' })
+                }
+              })
+            }
+          })
         }
       })
     },
     addLayers() {
+      // 加载天地图底图和标注
+      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(this.map))
+      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(this.map))
+
+      // 加载底图
+      esri.dynamicMapLayer({
+        url: `${this.baseUrl}${this.mapUrl}`,
+        zIndex: 1
+      }).addTo(this.map)
+
+      // 初始化部件图层（不分层），待切换到部件定位时加载
       this.layers.bjPoint = esri.featureLayer({
-        url: serverConfig.mapUrlBj + '/0'
+        url: `${this.baseUrl}${this.partsAllUrl}`,
+        minZoom: 19
       })
+
+      // 加载网格图层
       this.layers.grid = esri.featureLayer({
-        url: serverConfig.mapUrlBase + '/16'
+        url: `${this.baseUrl}${this.gridUrl}`
       })
-      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()
+
+      if (this.queryEventSwitch === '0') {
+        // 加载和显示部件图层
+        this.map.addLayer(this.layers.bjPoint)
+        // 清空部件选择的列表
+        this.compListOpts = []
+      } else {
+        this.map.removeLayer(this.layers.bjPoint)
+      }
     },
     clearPoints() {
       const that = this
@@ -219,6 +247,9 @@
         that.map.removeLayer(marker)
       })
     },
+    queryOnMap: function() {
+
+    },
     // 返回事件定位的结果
     checkEventPoint: function() {
       this.$emit(
@@ -258,72 +289,52 @@
       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;
+    height: 65vh;
     width: 100%;
-    margin-top: 25px;
+    margin-top: 10px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
-  .leaflet-container {
-    background: #fff0;
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
   }
 </style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 57e8aac..826e570 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -31,6 +31,7 @@
   partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
+  gridUrl: state => state.map.gridUrl, // 网格图层
   editUrl: state => state.map.editUrl // 编辑地图地址
 }
 export default getters
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index aa2c6f8..a4424cc 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -6,6 +6,7 @@
   partsUrl: '', // 部件分层地址
   partsAllUrl: '', // 部件不分层地址
   mapUrl: '', // 二维底图地址
+  gridUrl: '', // 网格图层
   editUrl: '' // 编辑地图URL
 }
 const mutations = {
@@ -27,6 +28,9 @@
   SET_MAP_URL: (state, url) => {
     state.mapUrl = url
   },
+  SET_GRID_URL: (state, url) => {
+    state.gridUrl = url
+  },
   SET_EDIT_URL: (state, url) => {
     state.editUrl = url
   }
@@ -54,6 +58,8 @@
               commit('SET_PARTS_ALL_URL', item.url)
             } else if (item.name === '二维地图URL') {
               commit('SET_MAP_URL', item.url)
+            } else if (item.name === '网格图层URL') {
+              commit('SET_GRID_URL', item.url)
             } else if (item.name === '编辑地图URL') {
               commit('SET_EDIT_URL', item.url)
             }

diff --git a/src/components/Map/leafletMap.vue b/src/components/Map/leafletMap.vue
index c8b0b6f..9eabad8 100644
--- a/src/components/Map/leafletMap.vue
+++ b/src/components/Map/leafletMap.vue
@@ -1,17 +1,13 @@
 <template>
-  <div style="margin-top: -10px">
+  <div style="margin-top: -30px; margin-bottom: -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 v-show="showpoi" :span="8">
+        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable style="width: 50%" />
+        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
+        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
+      </el-col>
 
-      <el-col :span="6" :offset="8" style="text-align: right;">
+      <el-col :span="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>
@@ -19,7 +15,7 @@
         </el-radio-group>
       </el-col>
 
-      <el-col v-if="queryEventSwitch === '0'" :span="10" :offset="0" style="text-align: right;">
+      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
         <el-select v-model="form.componentId" placeholder="选择部件" clearable value="" size="small">
           <el-option
             v-for="item in compListOpts"
@@ -30,7 +26,7 @@
         <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-col v-if="queryEventSwitch === '1'" :span="8" :offset="0" style="text-align: right;">
         <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
       </el-col>
     </el-row>
@@ -42,18 +38,30 @@
 <script>
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { mapConfig, serverConfig } from './ArcGISConfig'
+import { mapGetters } from 'vuex'
 const esri = require('esri-leaflet')
 
+const icon = L.icon({
+  iconUrl: require('@/assets/icons/icon-position.png'),
+  iconSize: [32, 32],
+  iconAnchor: [16, 32],
+  popupAnchor: [0, -32]
+})
+
+const deltaLng10 = 0.00002536 // 10米范围经度值偏移量（大约）
+const deltaLat10 = 0.00002256 // 10米范围纬度值偏移量（大约）
+
 export default {
   name: 'LeafletMap',
   data() {
     return {
       map: null,
+      baseLayer: [],
       markers: [],
       layers: {
         bjPoint: '', // 部件点图层
-        grid: '' // 单元网格图层
+        grid: '', // 单元网格图层
+        shopPoint: '' // 商铺图层
       },
       form: {
         longitude: '', // 定位点经度
@@ -64,23 +72,32 @@
         componentId: '', // 部件ID
         componentName: '' // 部件名称
       }, // 主页面返回值
-      showpoi: false,
+      showpoi: true,
       keywords: '', // 查询关键字
       showEventPointPopup: true, // 是否显示事部件的popup
       queryEventSwitch: '1', // 1==查询事件；0==查询部件
       compListOpts: [] // 部件选择下拉框option
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseUrl',
+      'partsUrl',
+      'mapUrl',
+      'gridUrl',
+      'partsAllUrl'
+    ])
+  },
   mounted() {
     this.initMap()
   },
   methods: {
     initMap() {
-      const map = L.map('map', {
-        minZoom: 13,
-        // maxZoom: 18,
-        center: [27.755, 116.08],
-        zoom: 16,
+      const map = L.map(this.$refs.mapDiv, {
+        minZoom: 14,
+        maxZoom: 25,
+        center: this.baseConfig.center,
+        zoom: this.baseConfig.zoom,
         zoomControl: false,
         attributionControl: false,
         crs: L.CRS.EPSG3857
@@ -89,129 +106,140 @@
       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'
-                })
-              }
+          // 查询所点的网格
+          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.GBID
+            that.form.communityId = result.GBID.substring(0, 12)
+            that.form.communityName = result.Note
+
+            if (that.queryEventSwitch === '1') {
+              // 事件定位
+              // 弹出事件点位信息
+              const popupStr = '<div class="popup-div">' +
+                '<div class="popup-title">事件点</div>' +
+                '<div class="dashed-line"></div>' +
+                '<div class="popup-item"><label>坐标</label>' + that.form.longitude.toFixed(4) + ', ' + that.form.latitude.toFixed(4) + '</div>' +
+                '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>' +
+                '</div>'
+
+              pos.bindPopup(popupStr).openPopup()
+            } else if (that.queryEventSwitch === '0') {
+              // 部件定位
+              // 1构建部件查询多边形，上下左右四个点
+              const latlngs = []
+              const p1 = [e.latlng.lat + deltaLat10, e.latlng.lng] // 上方点
+              const p2 = [e.latlng.lat, e.latlng.lng + deltaLng10] // 右侧点
+              const p3 = [e.latlng.lat - deltaLat10, e.latlng.lng] // 下方点
+              const p4 = [e.latlng.lat, e.latlng.lng - deltaLng10] // 左侧点
+              latlngs.push(p1)
+              latlngs.push(p2)
+              latlngs.push(p3)
+              latlngs.push(p4)
+
+              const 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
+                  // 赋值
+                  that.compListOpts = []
+
+                  // 构建弹出窗口信息
+                  let popupStr = '<div class="popup-div">' +
+                    '<div class="popup-title">部件</div>' +
+                    '<div class="dashed-line"></div>' +
+                    '<div class="popup-item">坐标[' + e.latlng.lng.toFixed(4) + ', ' + e.latlng.lat.toFixed(4) + ']附近的部件有</div>' +
+                    '<div class="popup-item"><label>所在社区</label>' + that.form.communityName + '</div>' +
+                    '<div class="popup-item"><label>网格编号</label>' + that.form.gridId + '</div>'
+
+                  result.forEach((item, index) => {
+                    popupStr += '<div class="popup-subitem"><label style="padding-right: 5px;">部件' + (index + 1) + '</label>' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']</div>'
+                    const comp = {}
+                    comp.name = '部件' + (index + 1) + '：' + item.properties.dl + '/' + item.properties.xl + '[' + item.properties.objid + ']'
+                    comp.value = item.properties.objid
+                    that.compListOpts.push(comp)
+                  })
+
+                  popupStr += '</div>'
+                  pos.bindPopup(popupStr).openPopup()
+                } else {
+                  that.$message({ message: '没有查询到部件，请重新定位', type: 'warning' })
+                }
+              })
+            }
+          })
         }
       })
     },
     addLayers() {
+      // 加载天地图底图和标注
+      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(this.map))
+      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(this.map))
+
+      // 加载底图
+      esri.dynamicMapLayer({
+        url: `${this.baseUrl}${this.mapUrl}`,
+        zIndex: 1
+      }).addTo(this.map)
+
+      // 初始化部件图层（不分层），待切换到部件定位时加载
       this.layers.bjPoint = esri.featureLayer({
-        url: serverConfig.mapUrlBj + '/0'
+        url: `${this.baseUrl}${this.partsAllUrl}`,
+        minZoom: 19
       })
+
+      // 加载网格图层
       this.layers.grid = esri.featureLayer({
-        url: serverConfig.mapUrlBase + '/16'
+        url: `${this.baseUrl}${this.gridUrl}`
       })
-      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()
+
+      if (this.queryEventSwitch === '0') {
+        // 加载和显示部件图层
+        this.map.addLayer(this.layers.bjPoint)
+        // 清空部件选择的列表
+        this.compListOpts = []
+      } else {
+        this.map.removeLayer(this.layers.bjPoint)
+      }
     },
     clearPoints() {
       const that = this
@@ -219,6 +247,9 @@
         that.map.removeLayer(marker)
       })
     },
+    queryOnMap: function() {
+
+    },
     // 返回事件定位的结果
     checkEventPoint: function() {
       this.$emit(
@@ -258,72 +289,52 @@
       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;
+    height: 65vh;
     width: 100%;
-    margin-top: 25px;
+    margin-top: 10px;
     border: 1px solid #DCDCDC;
     border-radius: 4px;
   }
-  .leaflet-container {
-    background: #fff0;
+</style>
+
+<style>
+  .leaflet-container a.leaflet-popup-close-button {
+    top: 5px; /* 修改弹窗关闭按钮样式 */
+    right: 10px; /* 修改弹窗关闭按钮样式 */
+  }
+
+  .leaflet-popup-content .popup-div {
+    font-size: 15px;
+    padding: 6px;
+  }
+
+  .leaflet-popup-content .popup-title {
+    font-weight: bold;
+  }
+
+  .leaflet-popup-content .dashed-line {
+    border-bottom: 1px dashed #dddddd;
+    margin: 10px -10px;
+  }
+
+  .leaflet-popup-content .popup-item {
+    padding-bottom: 6px;
+  }
+
+  .leaflet-popup-content .popup-item label {
+    font-weight: bold;
+    padding-right: 15px;
+  }
+
+  .leaflet-popup-content .popup-subitem {
+    padding-bottom: 6px;
+    font-size: 12px;
   }
 </style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 57e8aac..826e570 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -31,6 +31,7 @@
   partsEditUrl: state => state.map.partsEditUrl, // 部件分层地址
   partsAllUrl: state => state.map.partsAllUrl, // 部件不分层地址
   mapUrl: state => state.map.mapUrl, // 底图地址
+  gridUrl: state => state.map.gridUrl, // 网格图层
   editUrl: state => state.map.editUrl // 编辑地图地址
 }
 export default getters
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index aa2c6f8..a4424cc 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -6,6 +6,7 @@
   partsUrl: '', // 部件分层地址
   partsAllUrl: '', // 部件不分层地址
   mapUrl: '', // 二维底图地址
+  gridUrl: '', // 网格图层
   editUrl: '' // 编辑地图URL
 }
 const mutations = {
@@ -27,6 +28,9 @@
   SET_MAP_URL: (state, url) => {
     state.mapUrl = url
   },
+  SET_GRID_URL: (state, url) => {
+    state.gridUrl = url
+  },
   SET_EDIT_URL: (state, url) => {
     state.editUrl = url
   }
@@ -54,6 +58,8 @@
               commit('SET_PARTS_ALL_URL', item.url)
             } else if (item.name === '二维地图URL') {
               commit('SET_MAP_URL', item.url)
+            } else if (item.name === '网格图层URL') {
+              commit('SET_GRID_URL', item.url)
             } else if (item.name === '编辑地图URL') {
               commit('SET_EDIT_URL', item.url)
             }
diff --git a/src/views/supControl/supControl.vue b/src/views/supControl/supControl.vue
index 490ec1c..cb56703 100644
--- a/src/views/supControl/supControl.vue
+++ b/src/views/supControl/supControl.vue
@@ -607,7 +607,7 @@
     // 初始化地图
     initMap: function() {
       const map = Leaflet.map(this.$refs.mapDiv, {
-        minZoom: 4,
+        minZoom: 14,
         maxZoom: 25,
         center: this.baseConfig.center,
         zoom: this.baseConfig.zoom,
@@ -619,14 +619,8 @@
       window.map = map
 
       // 加载天地图底图和标注
-      this.baseLayer.push(Leaflet.tileLayer(
-        this.baseConfig.mapUrl,
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
-      this.baseLayer.push(Leaflet.tileLayer(
-        this.baseConfig.labelUrl,
-        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-      ).addTo(map))
+      this.baseLayer.push(Leaflet.tileLayer( this.baseConfig.mapUrl ).addTo(map))
+      this.baseLayer.push(Leaflet.tileLayer( this.baseConfig.labelUrl ).addTo(map))
 
       // 加载部件分层的图层
       const bjfcLayer = esri.dynamicMapLayer({