You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
6.5 KiB
211 lines
6.5 KiB
<template>
|
|
<div id="map">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from "vue";
|
|
import * as echarts from "echarts";
|
|
import "echarts-gl";
|
|
import WUXI from "@/assets/wuxi.json";
|
|
import tooltip from "./tooltip.vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
areas: new Map([
|
|
[1,"宜兴市"],
|
|
[2,"惠山区"],
|
|
[3,"新吴区"],
|
|
[4,"梁溪区"],
|
|
[5,"江阴市"],
|
|
[6,"滨湖区"],
|
|
[7,"锡山区"]
|
|
]),
|
|
chart: "",
|
|
label: {
|
|
show: true,
|
|
formatter(params) {
|
|
if (params.value) {
|
|
return `{radiusBg|${params.value}}`
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
rich: {
|
|
radiusBg: {
|
|
color: "#666",
|
|
align: 'center',
|
|
width: 50,
|
|
height: 50,
|
|
fontSize: 22,
|
|
},
|
|
},
|
|
textStyle: {
|
|
width: 62,
|
|
height: 60,
|
|
backgroundColor: {
|
|
image: require('@/assets/point.png')
|
|
},
|
|
}
|
|
},
|
|
params: {},
|
|
mapTooltip: "",
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
initMap () {
|
|
echarts.registerMap("wuxi", WUXI);
|
|
this.chart = echarts.init(document.querySelector("#map"))
|
|
this.setOption()
|
|
},
|
|
setTooltip () {
|
|
const div = document.createElement("div");
|
|
let mapTooltip = new Vue({
|
|
render: h => h(tooltip, { props: { info: this.params?.data?.originalData } })
|
|
})
|
|
mapTooltip.$mount(div);
|
|
this.mapTooltip = mapTooltip.$el;
|
|
},
|
|
setOption () {
|
|
this.chart.setOption(this.chartOption);
|
|
}
|
|
},
|
|
computed: {
|
|
chartOption () {
|
|
return {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: (params) => {
|
|
this.params = params;
|
|
|
|
return this.mapTooltip;
|
|
},
|
|
},
|
|
series: [{
|
|
type: 'map3D', // map、map3D
|
|
map: 'wuxi', // 注册的地图名称
|
|
name: "无锡",
|
|
label: {
|
|
// 标签的相关设置
|
|
show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
|
|
// distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
|
|
// formatter:, // 标签内容格式器
|
|
textStyle: {
|
|
// 标签的字体样式
|
|
color: '#fff', // 地图初始化区域字体颜色
|
|
// color: '#000', // 地图初始化区域字体颜色
|
|
fontSize: 14, // 字体大小
|
|
opacity: 1, // 字体透明度
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#3e5e67aa', // 地图板块的颜色borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
|
borderColor: 'rgb(147, 235, 248)', // 图形描边的颜色。[ default: #333 ]
|
|
borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
|
},
|
|
emphasis: {
|
|
// 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
|
|
label: {
|
|
show: true
|
|
// textStyle: {
|
|
// color: '#fff', // 高亮时标签颜色变为 白色
|
|
// fontSize: 15 // 高亮时标签字体 变大
|
|
// }
|
|
},
|
|
itemStyle: {
|
|
color: '#587683' // 高亮时地图板块颜色改变
|
|
}
|
|
},
|
|
groundPlane: {
|
|
// 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
|
|
show: false, // 是否显示地面。[ default: false ]
|
|
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
|
|
},
|
|
light: {
|
|
// 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
|
|
main: {
|
|
// 场景主光源的设置，在 globe 组件中就是太阳光。
|
|
color: '#fff', // 主光源的颜色。[ default: #fff ]
|
|
intensity: 1.2, // 主光源的强度。[ default: 1 ]
|
|
shadow: true, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
|
|
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
|
|
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
|
|
beta: 20 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
|
|
},
|
|
ambient: {
|
|
// 全局的环境光设置。
|
|
color: '#fff', // 环境光的颜色。[ default: #fff ]
|
|
intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
|
|
}
|
|
},
|
|
},{
|
|
zlevel: 20,
|
|
map: 'wuxi',
|
|
type: "map3D",
|
|
regionHeight: 2,
|
|
itemStyle: {
|
|
color: 'transparent'
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: 'transparent'
|
|
}
|
|
},
|
|
data: this.labelData.map(v => {
|
|
v.label = this.label;
|
|
v.emphasis = {
|
|
label: this.label
|
|
}
|
|
return v
|
|
})
|
|
}]
|
|
}
|
|
},
|
|
|
|
labelData () {
|
|
let a = this.$store.state.bigdata.assets
|
|
const [houses,lands] = a
|
|
let temp = Array.from(this.areas,(item,index) => ({
|
|
tag: item[0],
|
|
name: item[1],
|
|
value: 0,
|
|
originalData: []
|
|
}))
|
|
houses.forEach(item => {
|
|
let find = temp.find(v => v.tag === item.area)
|
|
if (find) {
|
|
find.value++;
|
|
find.originalData.push(item)
|
|
}
|
|
})
|
|
lands.forEach(item => {
|
|
let find = temp.find(v => v.tag === item.area)
|
|
if (find) {
|
|
find.value++;
|
|
find.originalData.push(item)
|
|
}
|
|
})
|
|
|
|
return temp.filter(v => v.value > 0);
|
|
}
|
|
},
|
|
watch: {
|
|
labelData () {
|
|
this.setOption()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initMap();
|
|
this.setTooltip();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|