gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复颜色计算错误的问题

Browse Source
This commit is contained in:
chenjinsong
2024-02-26 17:28:45 +08:00
parent 5df7a49a24
commit c8c3f447f1
2 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/mock/location.js
View File

@@ -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 }))
}
}
})

32
src/views/location/Index.vue
View File

@@ -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]
}
},