<template>
|
<div class="map-container">
|
<!--弹窗-->
|
<!-- <div class="layer" ref="layer">
|
1231
|
</div> -->
|
<div class="map-main-container" ref="map"></div>
|
</div>
|
</template>
|
|
<script>
|
import ZGSJson from '@/assets/map/zigong.json' // JOSN地图文件
|
export default {
|
name: 'mapApp',
|
props: {
|
geoCoordinates: {
|
type: Object,
|
default: {},
|
},
|
},
|
data () {
|
return {
|
activerName: null, // 选中的名称
|
activerData: [], // 选中的数据
|
map: null
|
}
|
},
|
|
methods: {
|
initMap () {
|
const that = this
|
that.$echarts.registerMap('zgs', ZGSJson)
|
that.map = that.$echarts.init(that.$refs.map)
|
const option = {
|
tooltip: {
|
show: true,
|
trigger: 'item',
|
alwaysShowContent: false,
|
renderMode: 'html',
|
triggerOn: 'mousemove|click', // 必须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
|
extraCssText: 'border:none;color:#dcf8ff;border-radius: 0;', // 清除tooltip自带颜色
|
axisPointer: {
|
type: 'none',
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
borderWidth: 0,
|
padding: 0,
|
backgroundColor: 'rgba(18, 39, 68, 0.86)',
|
// hideDelay: 2000, // 提示框2秒后小时
|
formatter: function (params) {
|
// 自定义tooltip内容
|
const isData = that.fetchData(params.name)
|
let isHtml = ''
|
if(isData) {
|
for (let i = 0; i < isData.length; i++) {
|
isHtml += `<div>${isData[i].name}:${isData[i].value}</div>`
|
}
|
}else {
|
isHtml += `得分:0`
|
}
|
return `<div class="tooltip-container">
|
<div class="title">${params.name}</div>
|
<div id='tool_alert'>${isHtml}</div>
|
</div> `
|
}
|
},
|
|
series: [
|
{
|
type: 'map3D',
|
map: 'zgs',
|
boxWidth: 100,
|
regionHeight: 2,
|
|
markPoint: {
|
symbol: 'pin', // 标记点形状
|
symbolSize: 50, // 标记点大小
|
data: [
|
{
|
name: '标记点1',
|
coord: ['104.3334', '29.2938'] // 标记点的三维坐标
|
}
|
// 可以添加更多标记点
|
]
|
},
|
|
// 地图的颜色
|
itemStyle: {
|
color: '#8adfff', // 地图板块的颜色
|
opacity: 0.98, // 图形的不透明度 [ default: 1 ]
|
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
|
borderColor: '#35b5ff' // 图形描边的颜色。[ default: #333 ]
|
},
|
|
realisticMaterial: {
|
detailTexture: require('@/assets/images/face-num-bg3.png'),
|
textureTiling: 1,
|
textureOffset: 0,
|
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
metalness: 0,
|
roughnessAdjust: 0
|
},
|
|
shading: 'realistic',
|
|
// 标签的相关设置
|
label: {
|
show: true, // (地图上的城市名称)是否显示标签
|
distance: 5,
|
formatter: function (params) {
|
return params.name ? params.name : ' '
|
},
|
// 标签的字体样式
|
color: '#fff', // 地图初始化区域字体颜色
|
fontSize: 16, // 字体大小
|
fontWeight: '300'
|
},
|
|
// 鼠标 hover 高亮时图形和标签的样式
|
emphasis: {
|
label: {
|
// label 高亮时的配置
|
show: true,
|
color: '#fff', // 高亮时标签颜色变为 白色
|
fontSize: 16 // 高亮时标签字体 变大
|
},
|
scale: true,
|
itemStyle: {
|
// itemStyle 高亮时的配置
|
color: '#0773ad' // 高亮时地图板块颜色改变
|
}
|
},
|
|
// 地面可以使整个场景看起来更真实，更有模型感。
|
light: {
|
main: {
|
// 场景主光源的设置，在 globe 组件中就是太阳光。
|
color: '#fff', // 主光源的颜色。
|
intensity: 0.6, // 主光源的强度。
|
shadow: true, // 主光源是否投射阴影。默认关闭。开启阴影可以给场景带来更真实和有层次的光照效果。会增加程序的运行开销。
|
shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
|
alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。
|
beta: 20 // 主光源绕 y 轴，即左右旋转的角度。
|
},
|
ambient: {
|
// 全局的环境光设置。
|
color: '#fff', // 环境光的颜色。[ default: #fff ]
|
intensity: 0.45 // 环境光的强度。[ default: 0.2 ]
|
},
|
ambientCubemap: {
|
exposure: 2,
|
diffuseIntensity: 1,
|
specularIntensity: 1
|
}
|
},
|
|
postEffect: {
|
depthOfField: {
|
enable: false // 关闭景深效果
|
}
|
},
|
|
groundPlane: {
|
show: false, // 是否显示地面
|
color: '#ffffff' // 地面颜色
|
},
|
|
viewControl: {
|
projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
|
autoRotate: false,
|
dispose: 100,
|
rotateSensitivity: 0, // 旋转
|
minBeta: -13,
|
maxBeta: -13,
|
zoomSensitivity: 0, // 缩放
|
panSensitivity: 0, // 平移
|
center: [0, 0, 0],
|
alpha: 60, // 倾斜角度
|
animationDurationUpdate: 1000, // 过渡动画的时长
|
animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
|
},
|
left: '-5%',
|
top: '3%'
|
}
|
]
|
}
|
that.map.setOption(option)
|
that.map.on('click', function (params) {
|
if (params.seriesType === 'map3D') {
|
that.$emit('clickMap', params.name);
|
}
|
})
|
},
|
|
fetchData (name) {
|
if (name !== this.activerName) {
|
this.activerName = name
|
this.activerData = this.geoCoordinates[name]
|
}
|
return this.activerData
|
}
|
},
|
|
mounted () {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.initMap()
|
}, 100)
|
})
|
},
|
|
beforeDestroy () {
|
if (!this.map) {
|
return
|
}
|
this.map.dispose()
|
this.map = null
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.map-container {
|
position: relative;
|
}
|
|
.map-main-container {
|
width: 100%;
|
height: 100%;
|
}
|
|
/*懒加载图标动画*/
|
.demo-spin-icon-load {
|
animation: ani-demo-spin 1s linear infinite;
|
}
|
|
@keyframes ani-demo-spin {
|
from {
|
transform: rotate(0deg);
|
}
|
50% {
|
transform: rotate(180deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
/*弹窗样式*/
|
.layer {
|
position: absolute;
|
left: 400px;
|
top: 300px;
|
padding: 8px 16px;
|
z-index: 100;
|
background: rgba(10, 22, 64, 0.9);
|
border-radius: 5px;
|
border: 1px solid #35b5ff;
|
transform: translate(-100%, -100%);
|
.content {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
text-align: center;
|
p {
|
font-size: 20px;
|
color: #fff;
|
line-height: 50px;
|
}
|
.col-item {
|
height: 41px;
|
margin-top: 20px;
|
border-right: 1px solid #172353;
|
.num {
|
color: #ebf8ff;
|
font-size: 18px;
|
}
|
.text {
|
color: #507ebc;
|
font-size: 12px;
|
}
|
}
|
}
|
.content::after {
|
content: "";
|
width: 120px;
|
height: 2px;
|
background: #ffccff;
|
position: absolute;
|
right: -120px;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.content::before {
|
content: "";
|
width: 2px;
|
height: 80px;
|
background: #ffb800;
|
position: absolute;
|
right: -134px;
|
top: 136px;
|
transform: rotateZ(-20deg);
|
}
|
}
|
|
::v-deep .tooltip-container {
|
/* border-left: 1px solid #b07801;
|
border-bottom: 1px solid #b07801;
|
border-right: 1px solid #b07801; */
|
background-size: 100% 100%;
|
border: 1px solid #2290ac;
|
position: relative;
|
padding: 6px 18px;
|
|
&::after {
|
position: absolute;
|
content: "";
|
width: 3px;
|
height: 8px;
|
background-color: #75f7f3;
|
left: 0px;
|
top: 0;
|
}
|
|
&::before {
|
position: absolute;
|
content: "";
|
width: 3px;
|
height: 8px;
|
background-color: #75f7f3;
|
right: 0px;
|
top: 0px;
|
}
|
|
.title {
|
margin-bottom: 2px;
|
font-size: 14px;
|
}
|
}
|
</style>
|
