parent
5e3fa3c327
commit
ec4f2ef216
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
|
|
@ -0,0 +1,59 @@
|
|||
export default [
|
||||
{
|
||||
name: '长沙市',
|
||||
value: [112.94, 28.23],
|
||||
},
|
||||
{
|
||||
name: '怀化市',
|
||||
value: [110.0, 27.57],
|
||||
},
|
||||
{
|
||||
name: '益阳市',
|
||||
value: [112.36, 28.55],
|
||||
},
|
||||
{
|
||||
name: '常德市',
|
||||
value: [111.7, 29.03],
|
||||
},
|
||||
{
|
||||
name: '岳阳市',
|
||||
value: [113.13, 29.36],
|
||||
},
|
||||
{
|
||||
name: '张家界市',
|
||||
value: [110.48, 29.12],
|
||||
},
|
||||
{
|
||||
name: '邵阳市',
|
||||
value: [111.47, 27.24],
|
||||
},
|
||||
{
|
||||
name: '娄底市',
|
||||
value: [111.99, 27.7],
|
||||
},
|
||||
{
|
||||
name: '湘潭市',
|
||||
value: [112.95, 27.83],
|
||||
},
|
||||
{
|
||||
name: '株洲市',
|
||||
value: [113.13, 27.83],
|
||||
},
|
||||
{
|
||||
name: '湘西土家族苗族自治州',
|
||||
value: [109.67, 28.22],
|
||||
},
|
||||
{
|
||||
name: '衡阳市',
|
||||
value: [112.57, 26.89],
|
||||
},
|
||||
|
||||
{
|
||||
name: '永州市',
|
||||
value: [111.61, 26.42],
|
||||
},
|
||||
{
|
||||
name: '郴州市',
|
||||
value: [113.02, 25.77],
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
export default [
|
||||
{
|
||||
// fromName: '怀化市',
|
||||
// toName: '长沙市',
|
||||
coords: [
|
||||
[110.0, 27.57],
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
coords: [
|
||||
[112.36, 28.55], //益阳市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[111.7, 29.03], //常德市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[113.13, 29.36], //岳阳市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[110.48, 29.12], //张家界市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[111.47, 27.24], //邵阳市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[111.99, 27.7], //娄底市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[112.95, 27.83], //湘潭市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[113.13, 27.83], //株洲市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[109.67, 28.22], //湘西土家族苗族自治州
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[112.57, 26.89], //衡阳市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[111.61, 26.42], //永州市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
},
|
||||
{
|
||||
coords: [
|
||||
[113.02, 25.77], //郴州市
|
||||
[112.94, 28.23]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -177,6 +177,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import effectScatterData from '@/utils/effectScatterData'
|
||||
import linesData from '@/utils/linesData'
|
||||
import 'echarts-gl'
|
||||
// @ts-ignore
|
||||
import {getAreaCode} from './js/area'
|
||||
|
|
@ -184,6 +186,7 @@ import {JsonResult} from '@/axios'
|
|||
import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import api from '@/axios'
|
||||
import {fa} from 'element-plus/es/locale'
|
||||
const {proxy} = getCurrentInstance() as any
|
||||
const day = proxy.day
|
||||
onMounted(() => {
|
||||
|
|
@ -464,27 +467,7 @@ const get3 = (city: any, district: any, town: any) => {
|
|||
}
|
||||
})
|
||||
}
|
||||
// const convertData = (data) => {
|
||||
// var res = []
|
||||
// for (var i = 0; i < data.length; i++) {
|
||||
// var dataItem = data[i]
|
||||
// var fromCoord = chinaGeoCoordMap[dataItem[0].name]
|
||||
// var toCoord = [116.4551, 40.2539]
|
||||
// if (fromCoord && toCoord) {
|
||||
// res.push([
|
||||
// {
|
||||
// coord: fromCoord,
|
||||
// value: dataItem[0].value,
|
||||
// },
|
||||
// {
|
||||
// coord: toCoord,
|
||||
// },
|
||||
// ])
|
||||
// }
|
||||
// }
|
||||
// return res
|
||||
// }
|
||||
var mapJson = ''
|
||||
|
||||
const flattenTree = (treeData: any) => {
|
||||
const result: any[] = []
|
||||
function traverse(node: any) {
|
||||
|
|
@ -501,10 +484,10 @@ const flattenTree = (treeData: any) => {
|
|||
return result
|
||||
}
|
||||
const maptitle = ref('')
|
||||
const initMapdt = (data: any, podat: any, nameb: any) => {
|
||||
const initMapdt = (data: any, podat: any, name: any) => {
|
||||
console.log('initMapdt(name)_________', name)
|
||||
var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')))
|
||||
// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
|
||||
maptitle.value = nameb
|
||||
maptitle.value = name
|
||||
localStorage.setItem('nowCode', JSON.parse(data)['name'])
|
||||
const myChart = echarts.init(document.getElementById('myMap'))
|
||||
// myChart.showLoading();
|
||||
|
|
@ -516,92 +499,319 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
|
|||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
|
||||
backgroundColor: '#092b6a',
|
||||
formatter: (params: any) => {
|
||||
let datat = podat
|
||||
let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
|
||||
if (itemWithId2 == null || itemWithId2 == undefined) {
|
||||
return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
|
||||
} else {
|
||||
return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
|
||||
// textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
|
||||
// backgroundColor: '#092b6a',
|
||||
// 当加入飞线（lines 或 lines3D）时，会和之前的 tooltip 配置发生冲突或覆盖，导致 tooltip 无法正常显示。
|
||||
// 需要 tooltip 针对不同的系列进行正确配置，或者通过自定义 formatter 来处理多个系列的数据。
|
||||
formatter: function (params: any) {
|
||||
// console.log(111, params)
|
||||
// 判断当前触发的系列类型
|
||||
if (params.seriesType === 'map') {
|
||||
console.log("params.seriesType === 'map'")
|
||||
|
||||
// 地图上的tooltip
|
||||
let datat = podat
|
||||
let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
|
||||
if (!itemWithId2) {
|
||||
return `
|
||||
<div style="
|
||||
background: url('/keji_border.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
">
|
||||
报警: 0<br />
|
||||
警情: 0<br />
|
||||
AI预警: 0
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
return `
|
||||
<div style="
|
||||
background: url('/keji_border.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
">
|
||||
报警: ${itemWithId2.alarmCount}<br />
|
||||
警情: ${itemWithId2.caseCount}<br />
|
||||
AI预警: ${itemWithId2.aiCount}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
} else if (params.seriesType === 'lines') {
|
||||
// 飞线上的tooltip
|
||||
return `线路: ${params.data.fromName} → ${params.data.toName}`
|
||||
} else if (params.seriesType === 'effectScatter') {
|
||||
// 飞线终点的涟漪效果
|
||||
return `终点: ${params.name}`
|
||||
}
|
||||
|
||||
// 如果未匹配到系列类型，则返回空
|
||||
return ''
|
||||
}
|
||||
},
|
||||
series: [
|
||||
geo: [
|
||||
{
|
||||
type: 'map3D',
|
||||
name: '地图',
|
||||
selectedMode: 'single', // 地图高亮单选
|
||||
regionHeight: 1, // 地图高度
|
||||
map: 'myMap',
|
||||
viewControl: {
|
||||
distance: 168, // 地图视角 控制初始大小
|
||||
alpha: 180, // 倾斜角度
|
||||
rotateSensitivity: 0
|
||||
},
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ['50%', '50%'],
|
||||
layoutSize: '100%',
|
||||
show: true,
|
||||
roam: false,
|
||||
label: {
|
||||
show: true, // 是否显示名字
|
||||
color: '#fff', // 文字颜色
|
||||
fontSize: 15, // 文字大小
|
||||
fontWeight: 'bold' // 文字大小
|
||||
show: true, //省市文字显示开关
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#0A3E77', // 地图背景颜色
|
||||
borderWidth: 1, // 分界线wdith
|
||||
borderColor: '#a4d8f0', // 分界线颜色
|
||||
opacity: 0.9
|
||||
areaColor: {
|
||||
type: 'linear',
|
||||
x: 1200,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(3,27,78,0.75)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(58,149,253,0.75)'
|
||||
}
|
||||
],
|
||||
global: true // 缺省为 false
|
||||
},
|
||||
borderColor: '#c0f3fb',
|
||||
borderWidth: 0.8
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true, // 是否显示高亮
|
||||
textStyle: {
|
||||
color: '#fff' // 高亮文字颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#3a69c1', // 地图高亮颜色
|
||||
borderWidth: 10, // 分界线wdith
|
||||
borderColor: '#6BECF5' // 分界线颜色
|
||||
}
|
||||
},
|
||||
|
||||
light: {
|
||||
main: {
|
||||
show: false,
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25, //
|
||||
beta: 20
|
||||
areaColor: 'rgba(0,254,233,0.6)'
|
||||
// areaColor: '#3a69c1'
|
||||
// areaColor: '#07315e'
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 重影
|
||||
{
|
||||
type: 'map',
|
||||
map: 'myMap',
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ['50%', '51%'],
|
||||
layoutSize: '100%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(58,149,253,0.8)',
|
||||
shadowColor: 'rgba(172, 122, 255,0.5)',
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: 'rgba(5,21,35,0.1)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'myMap',
|
||||
zlevel: -2,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ['50%', '52%'],
|
||||
layoutSize: '100%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(58,149,253,0.6)',
|
||||
shadowColor: 'rgba(65, 214, 255,0.6)',
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: 'rgba(5,21,35,0.1)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'myMap',
|
||||
zlevel: -3,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ['50%', '53%'],
|
||||
layoutSize: '100%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(58,149,253,0.4)',
|
||||
shadowColor: 'rgba(29, 111, 165,1)',
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: 'rgba(5,21,35,0.1)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'myMap',
|
||||
zlevel: -4,
|
||||
aspectScale: 1,
|
||||
zoom: 0.9,
|
||||
layoutCenter: ['50%', '54%'],
|
||||
layoutSize: '100%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderWidth: 5,
|
||||
borderColor: 'rgba(5,9,57,0.8)',
|
||||
shadowColor: 'rgba(29, 111, 165,0.8)',
|
||||
shadowOffsetY: 15,
|
||||
shadowBlur: 10,
|
||||
areaColor: 'rgba(5,21,35,0.1)'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'myMap',
|
||||
geoIndex: 0, //geoIndex：第一个图层
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
|
||||
textStyle: {fontSize: '16', color: '#fff'},
|
||||
formatter: function (params: any) {
|
||||
// tooltip 是在这里生效的，而不是上面那个配置
|
||||
// console.log(222, params)
|
||||
let datat = podat
|
||||
let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
|
||||
|
||||
if (!itemWithId2) {
|
||||
return `
|
||||
<div style="
|
||||
background: url('/keji_border.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
">
|
||||
报警: 0<br />
|
||||
警情: 0<br />
|
||||
AI预警: 0
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
return `
|
||||
<div style="
|
||||
background: url('/keji_border.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
">
|
||||
报警: ${itemWithId2.alarmCount}<br />
|
||||
警情: ${itemWithId2.caseCount}<br />
|
||||
AI预警: ${itemWithId2.aiCount}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
},
|
||||
lines3D: {
|
||||
data: [] as any[] // 添加与你的数据相关联的数据
|
||||
},
|
||||
{
|
||||
type: 'lines', // 飞线图
|
||||
tooltip: {
|
||||
show: false // 禁用飞线的 tooltip
|
||||
},
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
data: [
|
||||
{
|
||||
coords: [
|
||||
[111.51, 29.02], // 起点坐标
|
||||
[109.22793, 29.12239] // 终点坐标
|
||||
],
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
// 可以添加更多的线条
|
||||
]
|
||||
period: 3, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.03, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 6 //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#EE5652',
|
||||
width: 1, //尾迹线条宽度
|
||||
opacity: 1, //尾迹线条透明度
|
||||
curveness: 0.3 //尾迹线条曲直度
|
||||
},
|
||||
data: linesData,
|
||||
symbol: ['none', 'circle'], //飞线起点终点点位样式
|
||||
symbolSize: 10 // 飞线起点终点点位大小
|
||||
},
|
||||
{
|
||||
// 散点图
|
||||
type: 'effectScatter', //在地图上绘制具有动态效果的散点图,实现视觉上的效果，比如涟漪效果或闪烁效果
|
||||
zlevel: 3, //图层的深度，值越大表示图层越高，覆盖在其他图层之上。通常用于分层显示效果
|
||||
coordinateSystem: 'geo',
|
||||
tooltip: {
|
||||
show: false // 禁用散点的 tooltip
|
||||
},
|
||||
data: effectScatterData,
|
||||
symbol: 'circle', // 设置散点的图形为圆形
|
||||
symbolSize: [10, 10], // 设置散点的大小，宽度为 20，高度为 10
|
||||
itemStyle: {
|
||||
color: 'orange', // 散点颜色设置为橙色
|
||||
shadowBlur: 10, // 设置散点的阴影模糊大小
|
||||
shadowColor: 'orange' // 阴影颜色为橙色
|
||||
},
|
||||
effectType: 'ripple', //动画效果类型设置为涟漪效果，即散点会呈现出波纹扩散的效果
|
||||
// showEffectOn:emphasis移入显示动画，render一开始显示动画
|
||||
// showEffectOn:render: 表示在图表渲染时立即显示动画效果
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
scale: 5, // 涟漪效果的扩展倍数，越大波纹越大
|
||||
brushType: 'stroke' // 涟漪效果的绘制方式，stroke 表示仅绘制波纹的边框，不填充
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
|
||||
if (name !== '湖南省') {
|
||||
// option.series = option.series.filter((series) => series.type !== 'lines')
|
||||
option.series[1].data = []
|
||||
option.series[2].data = []
|
||||
myChart.setOption(option)
|
||||
} else {
|
||||
myChart.setOption(option)
|
||||
}
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
|
|
@ -920,6 +1130,7 @@ const initMap2 = (arr: any) => {
|
|||
<style scoped lang="scss">
|
||||
:deep(.dv-scroll-board .header) {
|
||||
font-size: 13px;
|
||||
;
|
||||
}
|
||||
|
||||
:deep(.dv-scroll-board .rows .row-item) {
|
||||
|
|
@ -1137,6 +1348,8 @@ const initMap2 = (arr: any) => {
|
|||
margin-right: 0.5%;
|
||||
border: 1px solid #3876B9;
|
||||
background-image: url(./indeximag/able.jpg);
|
||||
// background-image: url(./indeximag/bg4.jpg);
|
||||
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Loading…
Reference in New Issue