|
|
|
|
<template>
|
|
|
|
|
<div id="map">
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import "echarts-gl";
|
|
|
|
|
import WUXI from "@/assets/wuxi.json";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initMap () {
|
|
|
|
|
echarts.registerMap("wuxi", WUXI);
|
|
|
|
|
let chart = echarts.init(document.querySelector("#map"))
|
|
|
|
|
chart.setOption({
|
|
|
|
|
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: {
|
|
|
|
|
// TODO label高亮时的配置
|
|
|
|
|
show: true
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#fff', // 高亮时标签颜色变为 白色
|
|
|
|
|
// fontSize: 15 // 高亮时标签字体 变大
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// TODO 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 ]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
})
|
|
|
|
|
chart.on("click", (params) => {
|
|
|
|
|
console.log(params)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initMap()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
#map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
