diff --git a/src/mock/location.js b/src/mock/location.js
index d43021f5..bb5c1dae 100644
--- a/src/mock/location.js
+++ b/src/mock/location.js
@@ -3,7 +3,7 @@ import Mock from 'mockjs'
 const openMock = true
 if (openMock) {
   Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/population/density.*'), 'get', function (requestObj) {
-    const data = [453, 782, 128, 569, 934, 231, 678, 345, 890, 23, 456, 789, 321, 567, 89, 123, 457, 781, 209, 532, 910, 276, 648, 395, 820, 54, 76, 348, 901, 287, 654, 320, 879, 193, 487, 721, 98, 234, 612, 378, 850, 45, 78, 309, 521, 965, 289, 674, 385, 809, 12, 432, 765, 349, 897, 210, 563, 945, 278, 634, 312, 846, 57, 90, 246, 701, 389, 512, 923, 65, 878, 432, 176, 543, 987, 290, 741, 365, 854, 9, 42, 756, 390, 528, 912, 256, 689, 334, 821, 78, 456, 132, 578, 990, 201, 623, 356, 888, 43, 76, 222, 712, 323, 590, 932, 645, 867, 189, 476, 1000, 501, 954, 267, 777, 388, 832, 67, 99, 421, 145, 555]
+    const data = [453, 782, 128, 569, 934, 231, 678, 345, 890]
     return {
       msg: 'success',
       code: 200,
@@ -13,12 +13,13 @@ if (openMock) {
     }
   })
   Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/map.*'), 'get', function (requestObj) {
-    const data = [453, 782, 128, 569, 934, 231, 678, 345, 890, 23, 456, 789, 321, 567, 89, 123, 457, 781, 209, 532, 910, 276, 648, 395, 820, 54, 76, 348, 901, 287, 654, 320, 879, 193, 487, 721, 98, 234, 612, 378, 850, 45, 78, 309, 521, 965, 289, 674, 385, 809, 12, 432, 765, 349, 897, 210, 563, 945, 278, 634, 312, 846, 57, 90, 246, 701, 389, 512, 923, 65, 878, 432, 176, 543, 987, 290, 741, 365, 854, 9, 42, 756, 390, 528, 912, 256, 689, 334, 821, 78, 456, 132, 578, 990, 201, 623, 356, 888, 43, 76, 222, 712, 323, 590, 932, 645, 867, 189, 476, 1000, 501, 954, 267, 777, 388, 832, 67, 99, 421, 145, 555]
+    const data = [453, 782, 128, 569, 934, 231, 678, 345, 890]
+    const hexId = ['8931aa42e67ffff', '8931aa42e2bffff', '8931aa42a9bffff', '8931aa42a93ffff', '8931aa42a07ffff', '8931aa42aa7ffff', '8931aa40583ffff', '8931aa42a1bffff', '8931aa42853ffff']
     return {
       msg: 'success',
       code: 200,
       data: {
-        list: data.map(d => ({ subscriberId: d, number: d }))
+        list: data.map((d, i) => ({ hexId: hexId[i], number: d }))
       }
     }
   })
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 908432ea..09e63a96 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -176,6 +176,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import axios from 'axios'
 import { api } from '@/utils/api'
+import {
+  geoToH3
+} from 'h3-js'
 
 export default {
   name: 'Location',
@@ -233,8 +236,8 @@ export default {
               elevationScale: 20,
               extruded: false,
               filled: true,
-              getFillColor: d => _this.getHexagonColor(d.number),
-              // getLineColor: d => [255, (1 - d.value) * 255 * 1.5 > 255 ? 255 : (1 - d.value) * 255 * 1.5, 0],
+              getFillColor: d => _this.getHexagonFillColor(d.number),
+              getLineColor: d => _this.getHexagonLineColor(d.number),
               getLineWidth: 10,
               getHexagon: d => d.hexId,
               wireframe: false,
@@ -303,27 +306,34 @@ export default {
     },
     // 先使用min=0的等宽分组法，若后续出现特大或特小的异常值导致等宽分组效果不理想，考虑用分位数分组法
     calculateValueRamp (data) {
-      const max = _.maxBy(data, d => d.value)
-      const maxLength = String(max).length
-      const maxLegend = ((max / Math.pow(10, maxLength - 1)) + 1) * Math.pow(10, maxLength - 1)
+      const max = _.maxBy(data, d => d.number)
+      const maxLength = String(max.number).length
+      const maxLegend = Math.ceil(max.number / Math.pow(10, maxLength - 1)) * Math.pow(10, maxLength - 1)
       const result = []
       for (let i = 1; i <= 5; i++) {
         const item = {
           start: maxLegend * (i - 1) / 5 + 1,
           end: maxLegend * i / 5,
-          color: `rgb(${this.pieColorRamp[i - 1]})`
+          color: this.pieColorRamp[i - 1]
         }
         item.count = data.filter(d => d.number >= item.start && d.number < item.end).length
         result.push(item)
       }
       return result
     },
-    getHexagonColor (number) {
+    getHexagonFillColor (number) {
       const ramp = this.pieValueRamp.filter(r => number >= r.start && number < r.end)
-      if (ramp) {
-        return ramp.color
+      if (ramp.length > 0) {
+        return ramp[0].color.split(',').map(n => Number(n))
       }
-      return ''
+      return [255, 255, 255]
+    },
+    getHexagonLineColor (number) {
+      const ramp = this.pieValueRamp.filter(r => number >= r.start && number < r.end)
+      if (ramp.length > 0) {
+        return ramp[0].color.split(',').map(n => n / 1.5)
+      }
+      return [255, 255, 255]
     },
     tooltipMouseEnter () {
     },
@@ -455,7 +465,7 @@ export default {
       maxZoom: 14, // 地图最小缩放比例
       minZoom: 3, // 地图最大缩放比例
       unitTypes,
-      defaultZoom: 11, // 地图默认缩放比例
+      defaultZoom: 13, // 地图默认缩放比例
       center: [116.38, 39.9] // 地图默认中心点。北京：[116.38, 39.9] 纽约：[-73.94539, 40.841843]
     }
   },