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

feat:大屏地图支持下钻

Browse Source
main
liu.tao3 2 years ago
parent 443cd017c4
commit f21661a3c6
5 changed files with 119 additions and 7 deletions
Show Stats Download Patch File Download Diff File

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

@ -100,8 +100,7 @@ export default {
if(val.type==='move_in'){
coord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}})
fromCoord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}})
}
if(val.type==='move_out'){
}else{
coord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}})
fromCoord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}})
}

3
data-room-ui/packages/BasicComponents/FlyMap/setting.vue
Unescape Escape View File

@ -106,7 +106,7 @@
>
<el-input-number
v-model="config.customize.fontSize"
placeholder="请输入轨迹大小"
placeholder="请输入字体大小"
controls-position="right"
:step="1"
/>
@ -376,6 +376,7 @@ export default {
} else if (this.config.customize.level === 'province') {
this.getMapList()
this.config.customize.dataMap = '安徽省.json'
this.config.customize.down=false
}else{
this.config.customize.down=false
}

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

@ -31,7 +31,8 @@ export default {
data () {
return {
charts: null,
hasData: false
hasData: false,
level:''
}
},
computed: {
@ -94,8 +95,16 @@ export default {
const option = {
// 背景颜色
backgroundColor: config.customize.backgroundColor,
graphic: [
],
geo: {
map: config.customize.scope,
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: true,
layoutSize: "100%",
zoom: 1,
label: {
// 通常状态下的样式
normal: {
@ -253,10 +262,73 @@ export default {
}
}
}
if(config.customize.down){
// config?.customize?.graphic?.forEach((item,index)=>{
option.graphic.push({
type: "text",
left: `220px`,
top: "5%",
style: {
text: '中国',
font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
fill: config.customize.fontGraphicColor,
},
onclick:async()=>{
this.level='country'
const index = option.graphic.findIndex(i => i.style.text === '中国');
// 点击元素之后的所有元素全部删除
option.graphic.splice(index + 1);
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
option.geo.map = '中华人民共和国'
this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
echarts.registerMap('中华人民共和国', map);
this.charts.setOption(option, true);
}
},)
// })
}
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
echarts.registerMap(config.customize.scope, map)
this.charts.setOption(option)
this.charts.on('click', async(params)=> {
const index = option.graphic.findIndex(i => i.style.text === params.name);
if(params.name=='' || index !== -1) return
if(config.customize.down===false||this.level==='province') return
const idx = option.graphic.length + 1;
option.graphic.push({
type: "text",
left: `${idx * 220}px`,
top: "5%",
style: {
text: params.name,
font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
fill: config.customize.fontGraphicColor,
},
onclick: async() => {
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
// 利用函数的作用域，可以直接拿上面的name来用
const index = option.graphic.findIndex(i => i.style.text === params.name);
// 点击元素之后的所有元素全部删除
option.graphic.splice(index + 1);
// 很多操作重复了，你可以将公共部分抽离出来
option.geo.map = params.name;
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
echarts.registerMap(params.name, map);
this.charts.setOption(option, true);
},
});
this.level='province'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
option.geo.map = params.name
echarts.registerMap(params.name, map);
this.charts.setOption(option, true);
});
}
}
}

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

@ -74,6 +74,39 @@
/>
</el-select>
</el-form-item>
<el-form-item
v-if="config.customize.level == 'country'"
label="是否开启下钻"
label-width="100px"
>
<el-switch
v-model="config.customize.down"
class="bs-el-switch"
active-color="#007aff"
/>
</el-form-item>
<el-form-item
v-if="config.customize.down"
label="头部字体颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.fontGraphicColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
v-if="config.customize.down"
label="头部字体大小"
label-width="100px"
>
<el-input-number
v-model="config.customize.fontSize"
placeholder="请输入字体大小"
controls-position="right"
:step="1"
/>
</el-form-item>
<el-form-item
label="地图背景色"
label-width="100px"
@ -280,6 +313,9 @@ export default {
this.config.customize.dataMap = '中华人民共和国.json'
} else if (this.config.customize.level === 'province') {
this.config.customize.dataMap = '安徽省.json'
this.config.customize.down=false
}else{
this.config.customize.down=false
}
},
delColor () {

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

@ -44,7 +44,7 @@ const customConfig = {
// 是否显示文字
mapName: true,
// 地图背景色
backgroundColor: '#404a59',
backgroundColor: 'rgb(21, 26, 38)',
// 是否打点
scatter: true,
// 悬浮框背景色
@ -56,13 +56,17 @@ const customConfig = {
// 打点图文字颜色
scatterColor: '#fff',
// 分割线颜色
mapLineColor: 'rgba(147, 235, 248, 1)',
mapLineColor: 'rgba(53, 86, 165, 1)',
fontGraphicColor: '#fff',
fontSize:'30',
// 是否开启下钻
down: false,
// 地图级别
level: 'country',
// 范围
scope: '中国',
// 地图区域颜色
areaColor: '#007aff',
areaColor: 'rgba(31, 50, 121, 1)',
// 是否开启筛选
visual: false,
// 筛选范围

Write Preview
Loading…
Cancel
Save