tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 地图组件优化打点、视觉映射模式的配置方式和显示效果；修改默认地图信息的获取接口

Browse Source
main
hong.yang 1 year ago
parent d18deb85e2
commit f6d02d534b
5 changed files with 177 additions and 74 deletions
Show Stats Download Patch File Download Diff File

2
data-room-ui/packages/BasicComponents/FlyMap/index.vue
Unescape Escape View File

@ -117,7 +117,7 @@ export default {
let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
// 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
if (!hasMapId) {
mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}/worldMap/world.json`
mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/worldMap/world`
}
this.$dataRoomAxios.get(mapInfoUrl, {}, true).then(res => {
if (this.config.option.data) {

76
data-room-ui/packages/BasicComponents/Map/index.vue
Unescape Escape View File

@ -155,7 +155,7 @@ export default {
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#389BB7',
areaColor: config.customize.emphasisColor ? config.customize.emphasisColor :'#389BB7',
borderWidth: 0
}
}
@ -179,51 +179,30 @@ export default {
},
showDelay: 100
},
// 视觉映射
visualMap: {
show: !config.customize.scatter,
calculable: config.customize.visual,
min: config.customize.range[0],
max: config.customize.range[1],
seriesIndex: [0],
inRange: {
color: config.customize.rangeColor
}
},
series: config.customize.scatter
? [
// {
// type: 'effectScatter',
// coordinateSystem: 'geo',
// effectType: 'ripple',
// showEffectOn: 'render',
// rippleEffect: {
// period: 10,
// scale: 10,
// brushType: 'fill'
// },
// hoverAnimation: true,
// itemStyle: {
// normal: {
// color: 'rgba(255, 235, 59, .7)',
// shadowBlur: 10,
// shadowColor: '#333'
// }
// },
// tooltip: {
// formatter(params) {
// return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
// params.name
// }</p>
// <div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${
// params.data?.value[2] || '--'
// }</span></div>`
// },
// show: true
// },
// zlevel: 1,
// data: [
// { name: '西藏自治区', value: [91.23, 29.5, 1] },
// { name: '黑龙江省', value: [128.03, 47.01, 1007] },
// { name: '北京市', value: [116.4551, 40.2539, 5007] }
// ]
// }
{
type: 'scatter',
// 坐标系类型
coordinateSystem: 'geo',
symbol: 'pin',
// 标记符号形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbol: config.customize.scatterSymbol ? config.customize.scatterSymbol : 'pin',
// 是否允许图例和散点图之间的联动效果
legendHoverLink: true,
symbolSize: [60, 60],
// 散点图标记符号的大小，[宽度,高度]
symbolSize: config.customize.scatterSize ? [config.customize.scatterSize, config.customize.scatterSize] : [40, 40],
// 触发特效的方式
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
@ -232,7 +211,7 @@ export default {
zlevel: 11,
// 这里渲染标志里的内容以及样式
label: {
show: true,
show: config.customize.hasOwnProperty('showScatterValue') ? config.customize.showScatterValue : true,
formatter(value) {
return value.data.value[2]
},
@ -264,7 +243,7 @@ export default {
return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
params.name
}</p>
<div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${
<div style="line-height:22px;margin-top:5px">${config.customize.tooltipTitle ? config.customize.tooltipTitle : 'GDP'}<span style="margin-left:12px;color:#fff;float:right">${
params.data?.value[2] || '--'
}</span></div>`
},
@ -273,23 +252,12 @@ export default {
}
]
}
if (config.customize.visual) {
this.option.visualMap = {
show: true,
min: config.customize.range[0],
max: config.customize.range[1],
seriesIndex: [0],
inRange: {
color: config.customize.rangeColor
}
}
}
let hasMapId = !!config.customize.mapId
// 根据mapId获取地图数据
let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
// 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
if (!hasMapId) {
mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}/chinaMap/country/中华人民共和国.json`
mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/chinaMap.country/中华人民共和国`
}
const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp

112
data-room-ui/packages/BasicComponents/Map/setting.vue
Unescape Escape View File

@ -191,27 +191,46 @@
/>
</el-form-item>
<el-form-item
label="地图分割块颜色"
label="地图高亮颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.areaColor"
v-model="config.customize.emphasisColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="是否打点"
label="值渲染模式"
label-width="100px"
>
<el-switch
<el-radio-group
v-model="config.customize.scatter"
class="bs-el-switch"
active-color="#007aff"
class="bs-el-radio-group"
>
<el-radio :label="true">
打点
</el-radio>
<el-radio :label="false">
色块
</el-radio>
</el-radio-group>
</el-form-item>
</div>
<SettingTitle v-if="config.customize.scatter" >打点模式</SettingTitle>
<div class="lc-field-body">
<el-form-item
v-if="config.customize.scatter"
label="地图分割块颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.areaColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
v-if="config.customize.scatter"
label="打点图背景色"
label="点颜色"
label-width="100px"
>
<ColorPicker
@ -221,7 +240,37 @@
</el-form-item>
<el-form-item
v-if="config.customize.scatter"
label="打点图文字颜色"
label="点形状"
label-width="100px"
>
<el-select
v-model="config.customize.scatterSymbol"
popper-class="bs-el-select"
class="bs-el-select"
@change="changeLevel()"
>
<el-option
v-for="symbol in symbolList"
:key="symbol.value"
:label="symbol.label"
:value="symbol.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="config.customize.scatter"
label="显示点文字"
label-width="100px"
>
<el-switch
v-model="config.customize.showScatterValue"
class="bs-el-switch"
active-color="#007aff"
/>
</el-form-item>
<el-form-item
v-if="config.customize.scatter"
label="点文字颜色"
label-width="100px"
>
<ColorPicker
@ -229,6 +278,22 @@
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
v-if="config.customize.scatter"
label="点尺寸"
label-width="100px"
>
<el-slider
v-model="config.customize.scatterSize"
class="bs-el-slider-dark"
:step="1"
:min="1"
:max="100"
></el-slider>
</el-form-item>
</div>
<SettingTitle v-if="!config.customize.scatter">色块模式</SettingTitle>
<div class="lc-field-body">
<el-form-item
v-if="!config.customize.scatter"
label="悬浮框背景色"
@ -250,7 +315,19 @@
/>
</el-form-item>
<el-form-item
label="是否开启筛选"
v-if="!config.customize.scatter"
label="悬浮框数值标题"
label-width="100px"
>
<el-input
v-model="config.customize.tooltipTitle"
placeholder="请输入数值标题"
clearable
/>
</el-form-item>
<el-form-item
v-if="!config.customize.scatter"
label="启用手动筛选"
label-width="100px"
>
<el-switch
@ -260,8 +337,8 @@
/>
</el-form-item>
<el-form-item
v-if="config.customize.visual"
label="数值范围"
v-if="!config.customize.scatter"
label="色块数值范围"
label-width="100px"
>
<el-input-number
@ -279,8 +356,8 @@
/>
</el-form-item>
<el-form-item
v-if="config.customize.visual"
label="配色方案"
v-if="!config.customize.scatter"
label="色块配色方案"
label-width="100px"
>
<color-select
@ -354,6 +431,15 @@ export default {
{value: '3', label: '城市'},
{value: '4', label: '区县'}
],
symbolList: [
{value: 'circle', label: '圆形'},
{value: 'rect', label: '矩形'},
{value: 'roundRect', label: '圆角矩形'},
{value: 'triangle', label: '三角形'},
{value: 'diamond', label: '菱形'},
{value: 'pin', label: '水滴'},
{value: 'arrow', label: '箭头'}
],
// 旧版本地图等级，该数据用于兼容旧版本
oldLevelMap: {
'world' : '0',

16
data-room-ui/packages/BasicComponents/Map/settingConfig.js
Unescape Escape View File

@ -66,10 +66,18 @@ const customConfig = {
tooltipBackgroundColor: '#0C121C',
// 悬浮框边框色
borderColor: 'rgba(0, 0, 0, 0.16)',
// 打点图背景颜色
// 悬浮框数值标题
tooltipTitle: 'GDP',
// 点颜色
scatterBackgroundColor: 'rgba(255,0,0,.7)',
// 打点图文字颜色
// 显示点文字
showScatterValue: true,
// 点文字颜色
scatterColor: '#fff',
// 点形状
scatterSymbol: 'circle',
// 点大小
scatterSize: 40,
// 分割线颜色
mapLineColor: 'rgba(53, 86, 165, 1)',
fontGraphicColor: '#fff',
@ -79,11 +87,13 @@ const customConfig = {
// 允许下钻的层级
downLevel: 1,
// 地图级别
level: 1,
level: 2,
// 范围
scope: '中国',
// 地图区域颜色
areaColor: 'rgba(31, 50, 121, 1)',
// 地图区域悬浮颜色
emphasisColor: '#389BB7',
// 是否开启筛选
visual: false,
// 筛选范围

45
data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
Unescape Escape View File

@ -353,7 +353,7 @@
</template>
<div class="lc-field-body">
<el-form-item
label="展示字段"
label="值"
class="data-form-item"
>
<el-select
@ -384,6 +384,19 @@
label="地名字段"
class="data-form-item"
>
<template slot="label">
<span>
地名字段
<el-tooltip
class="item"
effect="dark"
content="色块模式下可用，地图将根据该属性值寻找对应的区域，并按照值字段进行色块渲染"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
</span>
</template>
<el-select
v-model="config.customize.name"
class="bs-el-select"
@ -409,9 +422,22 @@
</el-select>
</el-form-item>
<el-form-item
label="x坐标"
label="经度字段"
class="data-form-item"
>
<template slot="label">
<span>
经度字段
<el-tooltip
class="item"
effect="dark"
content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
</span>
</template>
<el-select
v-model="config.customize.xaxis"
class="bs-el-select"
@ -437,9 +463,22 @@
</el-select>
</el-form-item>
<el-form-item
label="y坐标"
label="纬度字段"
class="data-form-item"
>
<template slot="label">
<span>
纬度字段
<el-tooltip
class="item"
effect="dark"
content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
</span>
</template>
<el-select
v-model="config.customize.yaxis"
class="bs-el-select"

Write Preview
Loading…
Cancel
Save