351 lines
7.7 KiB
Vue
351 lines
7.7 KiB
Vue
<template>
|
||
<div>
|
||
<div style="width: 45vw;height: 50vh;" id="farmerchart"></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;
|
||
}
|
||
|
||
#farmerchart {
|
||
position: absolute;
|
||
z-index: 9;
|
||
}
|
||
</style>
|
||
|
||
<script setup>
|
||
import { ref, onMounted,defineEmits } from "vue"
|
||
import * as echarts from 'echarts';
|
||
import "echarts-gl"
|
||
import geoJson from "/static/jsonData/luxian_geo.js"
|
||
import { useRoute } from "vue-router"
|
||
import { areaObj } from "@/store/index.js"
|
||
import { landListApi } from "@/api.js"
|
||
const emit = defineEmits(['changeLand'])
|
||
|
||
const areaStore = areaObj()
|
||
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 route = useRoute()
|
||
const townJson = deepCopy(geoJson)
|
||
townJson.features = townJson.features.filter((item) => {
|
||
return item.properties.name == route.query.town
|
||
})
|
||
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 pointerFn2 = (lists) => {
|
||
let list = []
|
||
lists.forEach((item, index) => {
|
||
list.push({
|
||
coord: item.value,
|
||
value: item.name,
|
||
animation: true,
|
||
data: lists,
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: 'red',
|
||
borderWidth: 1, // 标注边线线宽，单位px，默认为1
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
borderColor: 'red',
|
||
borderWidth: 5,
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
},)
|
||
})
|
||
return list
|
||
}
|
||
onMounted(async () => {
|
||
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
|
||
})
|
||
|
||
})
|
||
|
||
let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
|
||
let pointerList2 = []
|
||
center2.forEach((item, index) => {
|
||
pointerList2.push({
|
||
value: item,
|
||
name: "土地" + index,
|
||
id: 17
|
||
})
|
||
})
|
||
|
||
var mapName = 'lz';
|
||
const myChart = document.getElementById("farmerchart")
|
||
/*获取地图数据*/
|
||
let option = {
|
||
geo: [
|
||
{
|
||
type: "map",
|
||
map: mapName,
|
||
aspectScale: 1,
|
||
zoom: 1,
|
||
layoutCenter: ["50%", "51%"],
|
||
layoutSize: "80%",
|
||
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%", "51%"],
|
||
layoutSize: "81%",
|
||
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,
|
||
layoutCenter: ["50%", "52%"],
|
||
layoutSize: "82%",
|
||
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: "83%",
|
||
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: "84%",
|
||
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(pointerList2)
|
||
},
|
||
|
||
data: (() => {
|
||
|
||
let data = {
|
||
资产数: center2
|
||
|
||
}
|
||
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("farmerchart").removeAttribute('_echarts_instance_');
|
||
echarts.registerMap(mapName, townJson)
|
||
const bg = echarts.init(myChart)
|
||
bg.setOption(option);
|
||
bg.on('click', function (params) {
|
||
let longInfo = params.data.coord
|
||
params.data.data.forEach(item => {
|
||
if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
|
||
|
||
emit('changeLand',item.id)
|
||
|
||
}
|
||
|
||
})
|
||
});
|
||
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</script> |