782 lines
23 KiB
Vue
782 lines
23 KiB
Vue
<template>
|
|
<div class="relative h-full overflow-hidden">
|
|
<div
|
|
v-if="historyMap.length"
|
|
@click="historyBack"
|
|
class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
|
|
>返回</div
|
|
>
|
|
<div class="absolute left-0 w-full top-0 h-full flex items-center justify-center">
|
|
<img
|
|
class="opacity-30 w-600px h-600px map1"
|
|
src="../../../assets/images/lbx.png"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<div class="absolute left-0 w-full top-0 h-full flex items-center justify-center">
|
|
<img
|
|
class="opacity-30 w-600px h-600px map"
|
|
src="../../../assets/images/jt.png"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<div ref="chartRef" class="w-full h-full z-99 absolute"> </div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, ref, Ref, onMounted, watch } from 'vue'
|
|
import { useECharts } from '/@/hooks/web/useECharts'
|
|
import { registerMap } from 'echarts'
|
|
import { deepMerge } from '/@/utils'
|
|
import { useVContext } from '../useVContext'
|
|
import { getAgriculturalBasic, getKeywordsIndustry } from '/@/api/sys/other'
|
|
import { useVisualizationStore } from '/@/store/modules/visualization'
|
|
import SheepImg from '/@/assets/images/sheep.png'
|
|
import PigImg from '/@/assets/images/pig.png'
|
|
import SternImg from '/@/assets/images/stern.png'
|
|
|
|
const domImg = document.createElement('img')
|
|
domImg.style.height = '8px'
|
|
domImg.src =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAOlJREFUKFPFkN9qwjAUh09OkzRN0lrbOllhIOxd9h678a0HwkbFWmtsq17I2pE6iuKNbIOdqx/nD+fjI8nL6xxsISPQnrpzRgJte507JP2MtB0ZjvrOfTUchcns0RSLJYADfjhNapMVlHtciEA11WrrqbFGpM6+Xu9+9+k+sPPW8CmePD9t1m/vVsIoTCe78iPnrnKFF+jKLDeejnwHGbWo/4AXPczSMl9kvb1omtRlVnCmXK60bIy1F2tE/BN7DgB8fku8zLdeBxF+lPZIFk8GcXiockOpYExIcWzK2pUjiQTxuN82P7L3BSnVXLvzcNTUAAAAAElFTkSuQmCC'
|
|
|
|
const domImgHover = document.createElement('img')
|
|
domImgHover.style.height = '8px'
|
|
domImgHover.src =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
|
|
const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const visualizationStore = useVisualizationStore()
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
const isBack = ref<boolean>(false)
|
|
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
|
const mapJSON = ref()
|
|
const tempMapJSON = ref()
|
|
const historyMap = ref([])
|
|
let loading = false
|
|
|
|
let options: any = null
|
|
|
|
const { rootEmitter } = useVContext()
|
|
|
|
const baseData = ref([])
|
|
|
|
function historyBack() {
|
|
if (!isBack.value) {
|
|
if (historyMap.value.length >= 1) {
|
|
historyMap.value.pop()
|
|
}
|
|
if (historyMap.value.length === 0) {
|
|
mapNyTypeInit()
|
|
}
|
|
} else {
|
|
onBack()
|
|
}
|
|
}
|
|
|
|
function onBack() {
|
|
visualizationStore.setAddressId(null)
|
|
rootEmitter.emit('map:back')
|
|
isBack.value = false
|
|
tempMapJSON.value = deepMerge(mapJSON.value)
|
|
mapInit()
|
|
}
|
|
|
|
async function mapNyTypeInit() {
|
|
const _defaultArr = [
|
|
{
|
|
value: 1,
|
|
label: '稻渔综合种养',
|
|
color: 'rgb(30,54,80 , 0.8)',
|
|
type: 'map',
|
|
data: [
|
|
{
|
|
value: [105.198605, 29.280154],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '优品柑桔种植',
|
|
color: 'rgb(54,89,114,0.8)',
|
|
type: 'map',
|
|
data: [
|
|
{
|
|
value: [105.383917, 29.387026],
|
|
},
|
|
{
|
|
value: [105.194187, 29.364692],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '高粱产业',
|
|
color: 'rgba(147, 235, 248, 0.2)',
|
|
type: 'map',
|
|
data: [
|
|
{
|
|
value: [105.116049, 29.388207],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 4,
|
|
label: '油茶产业',
|
|
color: 'rgb(172,220,243 , 0.4)',
|
|
type: 'map',
|
|
data: [
|
|
{
|
|
value: [105.385775, 29.334638],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 5,
|
|
label: '生猪产业分布点',
|
|
icon: `image://${PigImg}`,
|
|
type: 'dot',
|
|
data: [
|
|
{
|
|
map: '',
|
|
name: '猪',
|
|
value: [105.292327, 29.401826],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '猪',
|
|
value: [105.261267, 29.234182],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '猪',
|
|
value: [105.289485, 29.302531],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '猪',
|
|
value: [105.190754, 29.340528],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 6,
|
|
label: '肉羊产业分布点',
|
|
icon: `image://${SheepImg}`,
|
|
type: 'dot',
|
|
data: [
|
|
{
|
|
map: '',
|
|
name: '羊',
|
|
value: [105.195498, 29.420684],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '羊',
|
|
value: [105.103861, 29.351481],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '羊',
|
|
value: [105.368813, 29.303716],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
value: 7,
|
|
label: '稻虾产业分布点',
|
|
icon: `image://${SternImg}`,
|
|
type: 'dot',
|
|
data: [
|
|
{
|
|
map: '',
|
|
name: '虾',
|
|
value: [105.17, 29.28],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '虾',
|
|
value: [105.2, 29.26],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '虾',
|
|
value: [105.25, 29.27],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '虾',
|
|
value: [105.27, 29.35],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '虾',
|
|
value: [105.27, 29.45],
|
|
},
|
|
{
|
|
map: '',
|
|
name: '虾',
|
|
value: [105.29, 29.49],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
const resData = await getKeywordsIndustry()
|
|
_defaultArr.forEach((item) => {
|
|
const _data = resData.find((i) => i.value == item.value)
|
|
item = Object.assign(item, _data)
|
|
})
|
|
const _typeBackArr = _defaultArr
|
|
.filter((item) => item.type != 'dot')
|
|
.reduce((prev, cur) => {
|
|
cur.data?.forEach((item) => {
|
|
prev.push({
|
|
type: 'nylx-key',
|
|
name: cur.label,
|
|
value: item.value,
|
|
key: cur.key,
|
|
})
|
|
})
|
|
return prev
|
|
}, [])
|
|
|
|
const _seriesData = _defaultArr
|
|
.filter((item) => item.type === 'dot')
|
|
.map((e) => {
|
|
return {
|
|
type: 'scatter',
|
|
name: e.label,
|
|
coordinateSystem: 'geo',
|
|
tooltip: {
|
|
trigger: 'item',
|
|
show: true,
|
|
},
|
|
symbol: e.icon,
|
|
symbolSize: [30, 30],
|
|
symbolOffset: [0, 0],
|
|
z: 9999,
|
|
data: e.data?.map((cc) => {
|
|
return {
|
|
...cc,
|
|
key: e.key,
|
|
}
|
|
}),
|
|
}
|
|
})
|
|
|
|
const _mapNyNxData = (await (await import('./nylx.json')).default) as any
|
|
const _data = _defaultArr
|
|
.filter((item) => item.type === 'map')
|
|
.map((item) => Object.assign(item, { name: item.label }))
|
|
|
|
registerMap('lcxz', _mapNyNxData)
|
|
options = {
|
|
legend: {
|
|
right: 60,
|
|
bottom: 40,
|
|
align: 'right',
|
|
orient: 'vertical',
|
|
itemWidth: 18,
|
|
itemHeight: 18,
|
|
selectedMode: false,
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
inactiveBorderColor: 'rgba(0,0,0,0)',
|
|
data: _defaultArr
|
|
.filter((item) => item.type === 'dot')
|
|
.map((item) => ({
|
|
name: item.label,
|
|
icon: item.icon,
|
|
})),
|
|
},
|
|
visualMap: {
|
|
right: 60,
|
|
bottom: 120,
|
|
selectedMode: false,
|
|
orient: 'vertical',
|
|
pieces: _defaultArr.filter((item) => item.type === 'map'),
|
|
color: '#fff',
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
visibility: 'off',
|
|
},
|
|
backgroundColor: 'transparent',
|
|
stateAnimation: {
|
|
duration: 100,
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: 'lcxz',
|
|
roam: false,
|
|
zoom: 1,
|
|
label: {
|
|
emphasis: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: 'rgba(147, 235, 248, 1)',
|
|
borderWidth: 1,
|
|
areaColor: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
|
|
},
|
|
],
|
|
globalCoord: false, // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(128, 217, 248, 1)',
|
|
// shadowColor: 'rgba(255, 255, 255, 1)',
|
|
shadowOffsetX: -2,
|
|
shadowOffsetY: 2,
|
|
shadowBlur: 10,
|
|
},
|
|
emphasis: {
|
|
areaColor: '#389BB7',
|
|
borderWidth: 0,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
..._seriesData,
|
|
|
|
{
|
|
type: 'map',
|
|
zoom: 1,
|
|
roam: false,
|
|
map: 'lcxz',
|
|
name: 'nylx-key',
|
|
showLegendSymbol: false,
|
|
select: {
|
|
disabled: true,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
label: {
|
|
show: false,
|
|
color: '#fff',
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 0.1,
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
areaColor: 'rgba(128, 217, 248, 0.2)',
|
|
borderWidth: 0,
|
|
},
|
|
},
|
|
|
|
data: _data,
|
|
},
|
|
|
|
{
|
|
type: 'scatter',
|
|
name: 'nylx-key1',
|
|
zoom: 1,
|
|
roam: false,
|
|
coordinateSystem: 'geo',
|
|
stateAnimation: {
|
|
duration: 300,
|
|
easing: 'bounceOut',
|
|
},
|
|
label: {
|
|
show: true,
|
|
align: 'center',
|
|
formatter: function (params) {
|
|
var name = params.name
|
|
var text = `{tline|${name}}`
|
|
return text
|
|
},
|
|
color: '#fff',
|
|
rich: {
|
|
fline: {
|
|
padding: [0, 25],
|
|
color: '#fff',
|
|
textShadowColor: '#030615',
|
|
textShadowOffsetX: 1,
|
|
textShadowOffsetY: 1,
|
|
fontSize: 14,
|
|
fontWeight: 400,
|
|
},
|
|
tline: {
|
|
padding: [0, 27],
|
|
color: '#ABF8FF',
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#00FFF6',
|
|
},
|
|
symbol: img2,
|
|
symbolSize: [100, 34],
|
|
symbolOffset: [0, -26],
|
|
z: 999,
|
|
data: _typeBackArr,
|
|
},
|
|
],
|
|
}
|
|
setOptions(options)
|
|
}
|
|
|
|
function mapInit() {
|
|
const mapData: any = []
|
|
baseData.value.map((e: any) => {
|
|
mapData.push({
|
|
...e,
|
|
value: [e.address_lng, e.address_lat],
|
|
datas: e.areas,
|
|
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
|
})
|
|
})
|
|
registerMap('lcxz', tempMapJSON.value)
|
|
options = {
|
|
backgroundColor: 'transparent',
|
|
stateAnimation: {
|
|
duration: 100,
|
|
},
|
|
geo: {
|
|
map: 'lcxz',
|
|
aspectScale: 0.75,
|
|
layoutCenter: ['50%', '50.5%'],
|
|
layoutSize: '100%',
|
|
silent: true,
|
|
roam: false,
|
|
z: 0,
|
|
label: {
|
|
color: '#fff',
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
areaColor: 'rgba(0, 15, 40, 0.0)',
|
|
shadowColor: 'rgba(0, 0, 0, 1)',
|
|
shadowBlur: 0,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 5,
|
|
borderColor: '#fff',
|
|
borderWidth: 0.1,
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
areaColor: '#2AB8FF',
|
|
borderWidth: 1,
|
|
color: 'green',
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'map',
|
|
zoom: 1.1,
|
|
roam: false,
|
|
map: 'lcxz',
|
|
select: {
|
|
disabled: true,
|
|
},
|
|
label: {
|
|
show: false,
|
|
color: '#fff',
|
|
normal: {
|
|
show: isBack.value,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: isBack.value ? 16 : null,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
borderColor: 'rgba(147, 235, 248, 1)',
|
|
borderWidth: 1,
|
|
areaColor: 'rgb(30,54,80 , 0.8)',
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
},
|
|
itemStyle: {
|
|
areaColor: 'rgb(30,54,80 , 0.8)',
|
|
borderColor: 'rgba(147, 235, 248, 1)',
|
|
borderWidth: 1,
|
|
shadowColor: 'rgba(0, 255, 255, 1)',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 1,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
rippleEffect: {
|
|
scale: 10,
|
|
brushType: 'stroke',
|
|
},
|
|
showEffectOn: 'render',
|
|
symbol: 'circle',
|
|
zlevel: 1,
|
|
symbolSize: [10, 5],
|
|
itemStyle: {
|
|
color: (params): any => {
|
|
var colorList = [
|
|
{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#64fbc5',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#018ace',
|
|
},
|
|
],
|
|
global: false,
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#61c0f1 ',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#6f2eb6',
|
|
},
|
|
],
|
|
global: false,
|
|
},
|
|
]
|
|
return colorList[params.dataIndex % colorList.length]
|
|
},
|
|
},
|
|
data: mapData,
|
|
},
|
|
{
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
tooltip: {
|
|
trigger: 'item',
|
|
show: true,
|
|
},
|
|
symbol: (_, params) => {
|
|
return mapData[params.dataIndex].img
|
|
},
|
|
symbolSize: [21, 30],
|
|
symbolOffset: [0, -20],
|
|
z: 9999,
|
|
data: mapData,
|
|
},
|
|
{
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
// stateAnimation: {
|
|
// duration: 300,
|
|
// easing: 'bounceOut',
|
|
// },
|
|
label: {
|
|
show: true,
|
|
align: 'center',
|
|
formatter: function (params) {
|
|
var name = params.name
|
|
// var value = mapData[params.dataIndex].datas
|
|
var text = `{tline|${name}}`
|
|
return text
|
|
},
|
|
color: '#fff',
|
|
rich: {
|
|
fline: {
|
|
padding: [0, 25],
|
|
color: '#fff',
|
|
textShadowColor: '#030615',
|
|
textShadowOffsetX: 1,
|
|
textShadowOffsetY: 1,
|
|
fontSize: 14,
|
|
fontWeight: 400,
|
|
},
|
|
tline: {
|
|
padding: [0, 27],
|
|
color: '#ABF8FF',
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#00FFF6',
|
|
},
|
|
symbol: img2,
|
|
symbolSize: [100, 34],
|
|
symbolOffset: [0, -46],
|
|
z: 999,
|
|
// data: mapData,
|
|
data: [],
|
|
},
|
|
],
|
|
}
|
|
setOptions(options)
|
|
}
|
|
|
|
async function getBase() {
|
|
try {
|
|
const resData = await getAgriculturalBasic({
|
|
parent: visualizationStore.getAddresId,
|
|
type: 1,
|
|
per_page: 100,
|
|
industry: historyMap.value[0]?.value,
|
|
})
|
|
|
|
baseData.value = resData ?? []
|
|
} finally {
|
|
mapInit()
|
|
}
|
|
}
|
|
async function getData() {
|
|
const _resData = await getAgriculturalBasic({ type: 2 })
|
|
const _mapData = (await (await import('./lcxz1.json')).default) as any
|
|
|
|
_mapData.features.reduce((p, c) => {
|
|
const item = _resData.find((e) => e.name == c.properties.name)
|
|
if (item) {
|
|
p.push(Object.assign(c, { properties: item }))
|
|
}
|
|
return p
|
|
}, [])
|
|
mapJSON.value = _mapData
|
|
tempMapJSON.value = deepMerge(mapJSON.value)
|
|
getBase()
|
|
}
|
|
|
|
let tempName: any = null
|
|
|
|
const _seriesName = [
|
|
'nylx-key',
|
|
'nylx-key1',
|
|
'肉羊产业分布点',
|
|
'生猪产业分布点',
|
|
'稻虾产业分布点',
|
|
]
|
|
|
|
onMounted(async () => {
|
|
// await getData()
|
|
await mapNyTypeInit()
|
|
getInstance()?.on('mousemove', (e) => {
|
|
if (_seriesName.includes(e.seriesName)) {
|
|
return
|
|
}
|
|
|
|
if (tempName == e.name && e.seriesType == 'scatter') return
|
|
if (e.seriesType == 'scatter') {
|
|
tempName = e.name
|
|
options.series[3].data = [e.data]
|
|
getInstance()?.setOption({ series: options.series }, false)
|
|
}
|
|
})
|
|
getInstance()?.on('click', async (e) => {
|
|
if (loading) return
|
|
if (_seriesName.includes(e.seriesName)) {
|
|
if (e.seriesName == '稻虾产业分布点') return
|
|
loading = true
|
|
historyMap.value.push({ type: 'nylx', value: e.data.key })
|
|
await getData()
|
|
loading = false
|
|
return
|
|
}
|
|
|
|
if (e.seriesType == 'effectScatter' || e.seriesType == 'scatter') {
|
|
rootEmitter.emit('base:click', e.data)
|
|
}
|
|
|
|
if (e.seriesType == 'map') {
|
|
const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
|
|
visualizationStore.setAddressId(temp[0].properties?.id)
|
|
rootEmitter.emit('map:click', deepMerge(temp[0].properties))
|
|
if (temp) {
|
|
isBack.value = true
|
|
tempMapJSON.value = deepMerge({
|
|
type: 'FeatureCollection',
|
|
features: temp,
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
watch(
|
|
() => visualizationStore.getAddresId,
|
|
() => {
|
|
getBase()
|
|
},
|
|
)
|
|
|
|
return { chartRef, isBack, onBack, historyMap, historyBack }
|
|
},
|
|
})
|
|
</script>
|
|
<style>
|
|
.map1 {
|
|
z-index: 2;
|
|
animation: myfirst2 15s infinite linear;
|
|
}
|
|
@keyframes myfirst2 {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
.map {
|
|
z-index: 2;
|
|
animation: myfirst 15s infinite linear;
|
|
}
|
|
@keyframes myfirst {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(-359deg);
|
|
}
|
|
}
|
|
</style>
|