597 lines
13 KiB
Vue
597 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
|
|
<div style="width: 45vw;height: 60vh;transform: translateY(-5VH);" id="chart3" v-show="!showArea"></div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
.img4 {
|
|
top: 19.5vh;
|
|
left: 33.3vw;
|
|
height: 44vh;
|
|
width: 33.6vw;
|
|
position: absolute;
|
|
// transform: rotateX(45deg);
|
|
// animation: spin 2s linear infinite;
|
|
|
|
}
|
|
|
|
#chart2 {
|
|
position: absolute;
|
|
z-index: 9;
|
|
}
|
|
</style>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch,defineEmits } from "vue"
|
|
import * as echarts from 'echarts';
|
|
// import "echarts-gl"
|
|
import geoJson from "/static/jsonData/luxian_geo.js"
|
|
import { useRouter } from "vue-router"
|
|
import { areaObj } from "@/store/index.js"
|
|
import { landListApi } from "@/api.js"
|
|
|
|
const areaStore = areaObj()
|
|
|
|
const showArea = (ref(true))
|
|
const router = useRouter()
|
|
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
|
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
|
const deepCopy = (obj) => {
|
|
if (typeof obj !== 'object' || obj === null) {
|
|
return obj;
|
|
}
|
|
|
|
let copy = Array.isArray(obj) ? [] : {};
|
|
|
|
for (let key in obj) {
|
|
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
copy[key] = deepCopy(obj[key]);
|
|
}
|
|
}
|
|
|
|
return copy;
|
|
}
|
|
|
|
const emit = defineEmits(['getTowmName'])
|
|
const getTowmName = (e) => {
|
|
emit('getTowmName',e)
|
|
}
|
|
|
|
|
|
const pointerFn = () => {
|
|
let list = []
|
|
geoJson.center.forEach((item, index) => {
|
|
list.push({
|
|
coord: item,
|
|
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
|
|
symbolSize: [100, 30], // 图片大小
|
|
symbolOffset: ['50%', '-50%'],
|
|
value: geoJson.features[index]?.properties.name || '泸县',
|
|
animation: true,
|
|
label: {
|
|
show: true,
|
|
color: 'white',
|
|
fontSize: 14,
|
|
},
|
|
},)
|
|
})
|
|
return list
|
|
}
|
|
const pointerFn2 = (lists) => {
|
|
let list = []
|
|
lists.forEach((item, index) => {
|
|
list.push({
|
|
coord: item.value,
|
|
value: item.name,
|
|
animation: true,
|
|
symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
|
|
symbolSize: [190, 30], // 图片大小
|
|
symbolOffset: ['50%', '-50%'],
|
|
data: lists,
|
|
|
|
},)
|
|
})
|
|
return list
|
|
}
|
|
const initAreaMap = () => {
|
|
showArea.value = true
|
|
var mapName = 'lz';
|
|
const myChart = document.getElementById("chart2")
|
|
let option = {
|
|
geo: [
|
|
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
aspectScale: 1,
|
|
zoom: 1.2,
|
|
layoutCenter: ["50%", "51%"],
|
|
layoutSize: "110%",
|
|
roam: false,
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
show: true,
|
|
map: mapName,
|
|
zoom: 1.2,
|
|
aspectScale: 1,
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: 'transparent',
|
|
|
|
},
|
|
emphasis: {
|
|
|
|
areaColor: {
|
|
type: 'radial', // linear 线性渐变 radial径向渐变
|
|
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
|
|
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
|
|
r: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0, color: '#A46759' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.1, color: '#A46759' // 0% 处的颜色
|
|
},
|
|
|
|
|
|
{
|
|
offset: 1, color: '#FFB821' // 100% 处的颜色
|
|
}],
|
|
|
|
}
|
|
|
|
|
|
// borderWidth: 0
|
|
}
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
// {
|
|
// type: "map",
|
|
// map: mapName,
|
|
// zlevel: -1,
|
|
// aspectScale: 1,
|
|
// zoom: 1.2,
|
|
// layoutCenter: ["50%", "51%"],
|
|
// layoutSize: "110%",
|
|
// roam: false,
|
|
// silent: true,
|
|
|
|
// itemStyle: {
|
|
// normal: {
|
|
// borderWidth: 1,
|
|
// borderColor: "rgba(17, 149, 216,0.6)",
|
|
// borderColor: "#5AD0E0",
|
|
// shadowColor: "rgba(172, 122, 255,0.5)",
|
|
// shadowOffsetY: 5,
|
|
// shadowBlur: 15,
|
|
// areaColor: "rgba(5,21,35,0.1)",
|
|
// },
|
|
// },
|
|
// },
|
|
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
zlevel: -1,
|
|
aspectScale: 1,
|
|
zoom: 1.2,
|
|
layoutCenter: ["50%", "52%"],
|
|
layoutSize: "110%",
|
|
roam: false,
|
|
silent: true,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,
|
|
borderColor: "rgba(17, 149, 216,0.6)",
|
|
borderColor: "#5AD0E0",
|
|
shadowColor: "rgba(172, 122, 255,0.5)",
|
|
shadowOffsetY: 5,
|
|
shadowBlur: 15,
|
|
areaColor: "rgba(5,21,35,0.1)",
|
|
},
|
|
},
|
|
},
|
|
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
zlevel: -2,
|
|
aspectScale: 1,
|
|
zoom: 1.2,
|
|
layoutCenter: ["50%", "53%"],
|
|
layoutSize: "110%",
|
|
roam: false,
|
|
silent: true,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,
|
|
borderColor: "rgba(17, 149, 216,0.4)",
|
|
borderColor: "#5AD0E0",
|
|
shadowColor: "rgba(172, 122, 255,0.5)",
|
|
shadowOffsetY: 5,
|
|
shadowBlur: 15,
|
|
areaColor: "rgba(5,21,35,0.1)",
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
zlevel: -4,
|
|
aspectScale: 1,
|
|
zoom: 1.2,
|
|
layoutCenter: ["50%", "54%"],
|
|
layoutSize: "110%",
|
|
roam: false,
|
|
silent: true,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
// borderColor: "rgba(11, 43, 97,0.8)",
|
|
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: [
|
|
{
|
|
name: '资产数',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
rippleEffect: {
|
|
period: 4, //动画时间，值越小速度越快
|
|
brushType: 'fill', //波纹绘制方式 stroke, fill
|
|
scale: 12, //波纹圆环最大限制，值越大波纹越大
|
|
number: 2,
|
|
},
|
|
|
|
// 发散点的大小
|
|
symbolSize: function (val) {
|
|
return 4
|
|
// return val[2] / 10;
|
|
},
|
|
markPoint: {
|
|
data: pointerFn()
|
|
},
|
|
|
|
data: (() => {
|
|
let data = {
|
|
资产数: geoJson.center
|
|
|
|
}
|
|
let finalData = []
|
|
Object.keys(data).map((i, index) => {
|
|
let child = data[i].map((row, index) => ({
|
|
value: row,
|
|
itemStyle: {
|
|
color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
|
|
},
|
|
}))
|
|
|
|
finalData = [...finalData, ...child]
|
|
})
|
|
return finalData
|
|
})(),
|
|
},
|
|
],
|
|
};
|
|
|
|
document.getElementById("chart2").removeAttribute('_echarts_instance_');
|
|
echarts.registerMap(mapName, geoJson)
|
|
const bg = echarts.init(myChart)
|
|
bg.setOption(option);
|
|
bg.on('click', function (params) {
|
|
|
|
getTowmName(params.name)
|
|
areaStore.areaCodeList.forEach(item => {
|
|
if (item.name == (params.name||params.value)) {
|
|
areaStore.changeUserInfoFn(510521, item.code)
|
|
}
|
|
})
|
|
areaStore.changeAddress('', params.name || params.value)
|
|
initTownMap(params.name || params.value)
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
const initTownMap = async (name) => {
|
|
showArea.value = false
|
|
let center = []
|
|
let pointerList = []
|
|
let res = await landListApi({
|
|
...areaStore.userInfo
|
|
})
|
|
|
|
|
|
res.data.list.forEach(item => {
|
|
|
|
center.push([item.longitude, item.latitude])
|
|
pointerList.push({
|
|
value: [item.longitude, item.latitude],
|
|
name: item.title,
|
|
id: item.id
|
|
})
|
|
})
|
|
|
|
const townJson = deepCopy(geoJson)
|
|
|
|
|
|
|
|
townJson.features = townJson.features.filter((item) => {
|
|
return item.properties.name == name
|
|
})
|
|
|
|
|
|
var mapName = 'town';
|
|
const myChart = document.getElementById("chart3")
|
|
let option = {
|
|
geo: [
|
|
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
aspectScale: 1,
|
|
zoom: 0.2,
|
|
layoutCenter: ["50%", "51%"],
|
|
layoutSize: "90%",
|
|
roam: false,
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
show: true,
|
|
map: mapName,
|
|
zoom: 1,
|
|
aspectScale: 1,
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: 'transparent',
|
|
|
|
},
|
|
emphasis: {
|
|
|
|
areaColor: {
|
|
type: 'radial', // linear 线性渐变 radial径向渐变
|
|
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
|
|
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
|
|
r: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0, color: '#A46759' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.1, color: '#A46759' // 0% 处的颜色
|
|
},
|
|
|
|
|
|
{
|
|
offset: 1, color: '#FFB821' // 100% 处的颜色
|
|
}],
|
|
|
|
}
|
|
|
|
|
|
// borderWidth: 0
|
|
}
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
zlevel: -1,
|
|
aspectScale: 1,
|
|
zoom: 1,
|
|
layoutCenter: ["50%", "52%"],
|
|
layoutSize: "90%",
|
|
roam: false,
|
|
silent: true,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,
|
|
borderColor: "rgba(17, 149, 216,0.6)",
|
|
borderColor: "#5AD0E0",
|
|
shadowColor: "rgba(172, 122, 255,0.5)",
|
|
shadowOffsetY: 5,
|
|
shadowBlur: 15,
|
|
areaColor: "rgba(5,21,35,0.1)",
|
|
},
|
|
},
|
|
},
|
|
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
zlevel: -2,
|
|
aspectScale: 1,
|
|
zoom: 1,
|
|
layoutCenter: ["50%", "53%"],
|
|
layoutSize: "90%",
|
|
roam: false,
|
|
silent: true,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,
|
|
borderColor: "rgba(17, 149, 216,0.4)",
|
|
borderColor: "#5AD0E0",
|
|
shadowColor: "rgba(172, 122, 255,0.5)",
|
|
shadowOffsetY: 5,
|
|
shadowBlur: 15,
|
|
areaColor: "rgba(5,21,35,0.1)",
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
type: "map",
|
|
map: mapName,
|
|
zlevel: -4,
|
|
aspectScale: 1,
|
|
zoom: 1,
|
|
layoutCenter: ["50%", "54%"],
|
|
layoutSize: "90%",
|
|
roam: false,
|
|
silent: true,
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
// borderColor: "rgba(11, 43, 97,0.8)",
|
|
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: [
|
|
{
|
|
name: '资产数',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
rippleEffect: {
|
|
period: 4, //动画时间，值越小速度越快
|
|
brushType: 'fill', //波纹绘制方式 stroke, fill
|
|
scale: 12, //波纹圆环最大限制，值越大波纹越大
|
|
number: 2,
|
|
},
|
|
|
|
// 发散点的大小
|
|
symbolSize: function (val) {
|
|
return 4
|
|
// return val[2] / 10;
|
|
},
|
|
markPoint: {
|
|
data: pointerFn2(pointerList)
|
|
},
|
|
|
|
data: (() => {
|
|
let data = {
|
|
资产数: center
|
|
|
|
}
|
|
let finalData = []
|
|
Object.keys(data).map((i, index) => {
|
|
let child = data[i].map((row, index) => ({
|
|
value: row,
|
|
itemStyle: {
|
|
color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
|
|
},
|
|
}))
|
|
|
|
finalData = [...finalData, ...child]
|
|
})
|
|
return finalData
|
|
})(),
|
|
},
|
|
],
|
|
};
|
|
|
|
echarts.registerMap(mapName, townJson)
|
|
const bg = echarts.init(myChart)
|
|
bg.setOption(option);
|
|
bg.on('click', function (params) {
|
|
let longInfo = params.data.coord
|
|
areaStore.areaCodeList.forEach(item => {
|
|
if (item.name == name) {
|
|
areaStore.changeUserInfoFn(510521, item.code)
|
|
}
|
|
})
|
|
params.data.data.forEach(item => {
|
|
if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
|
|
router.push(`/detail?landId=${item.id}&town=${name}&parmas=${JSON.stringify(areaStore.userInfo)}&landName=${item.name}`)
|
|
}
|
|
|
|
})
|
|
|
|
// console.log(params.data.coord)
|
|
// console.log(params.data.data)
|
|
});
|
|
}
|
|
|
|
|
|
watch(
|
|
() => areaStore.address,
|
|
(value, oldValue) => {
|
|
|
|
if (value.city) {
|
|
initAreaMap()
|
|
}
|
|
else if (value.area) {
|
|
showArea.value = false
|
|
initTownMap(value.area)
|
|
}
|
|
|
|
|
|
}, {
|
|
deep: true,
|
|
// immediate: true
|
|
}
|
|
|
|
)
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
initAreaMap()
|
|
|
|
|
|
})
|
|
|
|
</script> |