**地图
This commit is contained in:
parent
56b6e695b4
commit
c8805b33c5
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
|
||||
<div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
|
||||
<div style="width: 45vw;height: 50vh;" id="chart3" v-show="!showArea"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
@ -42,9 +42,31 @@ import * as echarts from 'echarts';
|
|||
import "echarts-gl"
|
||||
import geoJson from "/static/jsonData/luxian_geo.js"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
|
||||
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 pointerFn = () => {
|
||||
let list = []
|
||||
geoJson.center.forEach((item, index) => {
|
||||
|
@ -64,12 +86,11 @@ const pointerFn = () => {
|
|||
})
|
||||
return list
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
const initAreaMap=()=>{
|
||||
|
||||
var mapName = 'lz';
|
||||
const myChart = document.getElementById("chart2")
|
||||
/*获取地图数据*/
|
||||
let option = {
|
||||
geo: [
|
||||
|
||||
|
@ -273,17 +294,249 @@ onMounted(() => {
|
|||
};
|
||||
|
||||
document.getElementById("chart2").removeAttribute('_echarts_instance_');
|
||||
|
||||
echarts.registerMap(mapName, geoJson)
|
||||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
|
||||
bg.on('click', function (params) {
|
||||
|
||||
router.push("/detail?town="+params.name||params.value)
|
||||
initTownMap(params.name || params.value)
|
||||
// router.push("/detail?town="+params.name||params.value)
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
const initTownMap=(name)=>{
|
||||
const townJson = deepCopy(geoJson)
|
||||
townJson.features = townJson.features.filter((item) => {
|
||||
return item.properties.name == name
|
||||
})
|
||||
|
||||
showArea.value=false
|
||||
|
||||
var mapName = 'town';
|
||||
const myChart = document.getElementById("chart3")
|
||||
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("chart3").removeAttribute('_echarts_instance_');
|
||||
echarts.registerMap(mapName, townJson)
|
||||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
bg.on('click', function (params) {
|
||||
initTownMap(params.name || params.value)
|
||||
// router.push("/detail?town="+params.name||params.value)
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initAreaMap()
|
||||
|
||||
|
||||
})
|
||||
|
||||
</script>
|
Loading…
Reference in New Issue