Skip to content

Y
yqlh-dataEase
Commit 16560a82 by wangmin
Options

城市亮度图初始mock

parent bebb5ec5
正在显示 包含 182 行增加 和 2 行删除
src/icons/svg/city-brightness.svg 0 → 100644
<svg t="1689841433435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5685" width="200" height="200"><path d="M290.773333 213.333333v85.333334H426.666667v512H149.333333V213.333333h141.44m42.666667-42.666666H106.666667v682.666666h362.666666V256h-135.893333V170.666667z" p-id="5686"></path><path d="M661.333333 384v426.666667h-192V384h192m42.666667-42.666667H426.666667v512h277.333333V341.333333z" p-id="5687"></path><path d="M768 298.666667v128h106.666667v384h-170.666667V298.666667h64m42.666667-42.666667h-149.333334v597.333333h256V384h-106.666666v-128z" p-id="5688"></path><path d="M85.333333 810.666667h853.333334v42.666666H85.333333zM234.666667 384h106.666666v42.666667h-106.666666zM234.666667 533.333333h106.666666v42.666667h-106.666666zM234.666667 682.666667h106.666666v42.666666h-106.666666zM533.333333 512h64v42.666667h-64zM533.333333 640h64v42.666667h-64zM768 533.333333h42.666667v42.666667h-42.666667zM768 661.333333h42.666667v42.666667h-42.666667z" p-id="5689"></path></svg>
src/lang/en.js
...@@ -1529,6 +1529,7 @@ export default { ...@@ -1529,6 +1529,7 @@ export default {
step: 'Step(px)', step: 'Step(px)',
no_function: 'Function not enter，please input.', no_function: 'Function not enter，please input.',
chart_flow_map: 'Flow Map', chart_flow_map: 'Flow Map',
chart_city_brightness_map: 'City Brightness Map',
start_point: 'Start point(Lat/Long)', start_point: 'Start point(Lat/Long)',
end_point: 'End point(Lat/Long)', end_point: 'End point(Lat/Long)',
line: 'Line', line: 'Line',
......
src/lang/tw.js
...@@ -1523,6 +1523,7 @@ export default { ...@@ -1523,6 +1523,7 @@ export default {
step: '步長(px)', step: '步長(px)',
no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。', no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。',
chart_flow_map: '流向地圖', chart_flow_map: '流向地圖',
chart_city_brightness_map: '城市亮度圖',
start_point: '起點經緯度', start_point: '起點經緯度',
end_point: '終點經緯度', end_point: '終點經緯度',
line: '線條', line: '線條',
......
src/lang/zh.js
...@@ -1554,7 +1554,8 @@ export default { ...@@ -1554,7 +1554,8 @@ export default {
map_line_color_source_color: '起始颜色', map_line_color_source_color: '起始颜色',
map_line_color_target_color: '结束颜色', map_line_color_target_color: '结束颜色',
map_line_theta_offset: '弧度', map_line_theta_offset: '弧度',
chart_bubble_map: '气泡地图' chart_bubble_map: '气泡地图',
chart_city_brightness_map: '城市亮度图'
}, },
dataset: { dataset: {
scope_edit: '仅编辑时生效', scope_edit: '仅编辑时生效',
......
src/views/chart/chart/cityBrightness/cityBrightness_antv.js 0 → 100644
import { Scene, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
export function baseCityBrightnessMapOptionAntV(chartDom, chartId, chart, action) {
console.log('chart==chart.data.tableRow==', chart, chart.data.tableRow)
const xAxis = JSON.parse(chart.xaxis)
const yAxis = JSON.parse(chart.yaxis)
let customAttr
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
}
const size = customAttr.size
const color = customAttr.color
const mapStyle = `amap://styles/${color.mapStyle ? color.mapStyle : 'normal'}`
const lang = getLanguage().includes('zh') ? 'zh' : 'en'
let init = false
if (!chartDom?.map) {
try {
chartDom.destroy()
} catch (e) {
// ignore
}
chartDom = new Scene({
id: chartId,
map: new GaodeMap({
lang: lang,
pitch: size.mapPitch,
// pitch: 64.88, // 地图倾角
style: mapStyle,
// style: 'dark',
center: [114.060288, 22.53684], // 地图中心经纬度
zoom: 15.63,
maxZoom: 20
}),
logoVisible: false
})
init = true
} else {
if (chartDom.map) {
chartDom.setPitch(size.mapPitch)
chartDom.setMapStyle(mapStyle)
}
}
if (xAxis?.length < 1 || yAxis?.lang < 1) {
chartDom.removeAllLayer()
return chartDom
}
// const newTableRow = chart.data.tableRow.map((item, index) => {
// return {
// type: 'Feature',
// properties: {
// capacity: item[yAxis[0].dataeaseName]
// },
// geometry: {
// type: 'Point',
// coordinates: provinceLocation[index]
// },
// bbox: [provinceLocation[index][0], provinceLocation[index][1], provinceLocation[index][0], provinceLocation[index][1]]
// }
// })
// const mapData = { type: 'FeatureCollection', features: newTableRow }
const mapData = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {
h0: '3',
h1: '2',
h2: '1',
h3: '0',
h4: '0',
h5: '0',
h6: '0',
h7: '3',
h8: '4',
h9: '5',
h10: '6',
h11: '5',
h12: '6',
h13: '4',
h14: '4',
h15: '5',
h16: '4',
h17: '5',
h18: '4',
h19: '4',
h20: '5',
h21: '4',
h22: '6',
h23: '6'
}, geometry: {
type: 'Point',
coordinates: [113.950375, 22.534875]
}, bbox: [113.950375, 22.534875, 113.950375, 22.534875] }] }
chartDom.removeAllLayer()
.then(() => {
const pointLayer = new PointLayer({})
.source(mapData)
// .source(chart.data.tableRow, {
// parser: {
// type: 'json',
// x: xAxis[0].dataeaseName,
// y: xAxis[1].dataeaseName
// }
// })
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
if (!init) {
chartDom.addLayer(pointLayer)
}
chartDom.on('loaded', () => {
chartDom.addLayer(pointLayer)
})
})
return chartDom
}
src/views/chart/chart/util.js
...@@ -1992,6 +1992,50 @@ export const TYPE_CONFIGS = [ ...@@ -1992,6 +1992,50 @@ export const TYPE_CONFIGS = [
] ]
} }
}, },
// 城市亮度图
{
render: 'antv',
category: 'chart.chart_type_space',
value: 'city-brightness',
title: 'chart.chart_city_brightness_map',
icon: 'city-brightness',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
],
propertyInner: {
'color-selector': [
'alpha',
'mapStyle',
'mapLineGradient',
'mapLineSourceColor',
'mapLineTargetColor'
],
'size-selector-ant-v': [
'mapPitch',
'mapLineType',
'mapLineWidth',
'mapLineAnimate',
'mapLineAnimateDuration',
'mapLineAnimateInterval',
'mapLineAnimateTrailLength'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
/* 下面是echarts图表类型 */ /* 下面是echarts图表类型 */
{ {
render: 'echarts', render: 'echarts',
......
src/views/chart/components/ChartComponentG2.vue
...@@ -63,6 +63,7 @@ import { equalsAny } from '@/utils/StringUtils' ...@@ -63,6 +63,7 @@ import { equalsAny } from '@/utils/StringUtils'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv' import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv' import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
import { baseCityBrightnessMapOptionAntV } from '@/views/chart/chart/cityBrightness/cityBrightness_antv'
import { clear } from 'size-sensor' import { clear } from 'size-sensor'
export default { export default {
name: 'ChartComponentG2', name: 'ChartComponentG2',
...@@ -307,6 +308,8 @@ export default { ...@@ -307,6 +308,8 @@ export default {
this.myChart = baseHeatMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction) this.myChart = baseHeatMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'bubble') { } else if (chart.type === 'bubble') {
this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction) this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'city-brightness') {
this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else { } else {
if (this.myChart) { if (this.myChart) {
this.antVRenderStatus = false this.antVRenderStatus = false
...@@ -314,7 +317,7 @@ export default { ...@@ -314,7 +317,7 @@ export default {
} }
} }
if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble') && this.searchCount > 0) { if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble', 'city-brightness') && this.searchCount > 0) {
this.myChart.options.animation = false this.myChart.options.animation = false
} }
if (this.myChart?.options?.legend) { if (this.myChart?.options?.legend) {
...@@ -447,6 +450,10 @@ export default { ...@@ -447,6 +450,10 @@ export default {
this.title_class.zIndex = 4 this.title_class.zIndex = 4
this.title_class.position = 'absolute' this.title_class.position = 'absolute'
} }
if (this.chart.type === 'city-brightness') {
this.title_class.zIndex = 4
this.title_class.position = 'absolute'
}
} }
this.initRemark() this.initRemark()
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论