176 lines
4.6 KiB
Vue
176 lines
4.6 KiB
Vue
<template>
|
|
<div class="AiDvMap" v-resize="onDomResize">
|
|
<div class="chart-map" ref="dvMap"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import http from "dui/lib/js/request";
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: 'AiDvMap',
|
|
props: {
|
|
geoJson: String
|
|
},
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
chart: null
|
|
}
|
|
},
|
|
directives: {
|
|
resize: {
|
|
bind(el, binding) {
|
|
let width = ''
|
|
let height = ''
|
|
|
|
function isResize() {
|
|
const style = document.defaultView.getComputedStyle(el)
|
|
if (width !== style.width || height !== style.height) {
|
|
binding.value({
|
|
width: style.width,
|
|
height: style.height
|
|
})
|
|
}
|
|
width = style.width
|
|
height = style.height
|
|
}
|
|
|
|
el.__vueSetInterval__ = setInterval(isResize, 300)
|
|
},
|
|
unbind(el) {
|
|
clearInterval(el.__vueSetInterval__)
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user'])
|
|
},
|
|
mounted() {
|
|
this.$load(this.$refs.dvMap).then(() => this.initChart())
|
|
},
|
|
methods: {
|
|
onDomResize() {
|
|
this.$nextTick(() => {
|
|
this.chart.resize()
|
|
})
|
|
},
|
|
initChart() {
|
|
const {echarts} = window
|
|
this.chart = echarts.init(this.$refs.dvMap)
|
|
this.getData(this.geoJson).then(res => {
|
|
if (res?.data) {
|
|
echarts.registerMap('customMap', res.data)
|
|
const option = {
|
|
// geo: [
|
|
// {
|
|
// map: "customMap",
|
|
// aspectScale: 1,
|
|
// zoom: 0.65,
|
|
// layoutCenter: ["50%", "50%"],
|
|
// layoutSize: "180%",
|
|
// show: true,
|
|
// roam: false,
|
|
// emphasis: {
|
|
// show: true,
|
|
// label: {
|
|
// textStyle: {
|
|
// color: "#FFFFFF"
|
|
// },
|
|
// },
|
|
// itemStyle: {
|
|
// areaColor: '#02C6DC'
|
|
// }
|
|
// },
|
|
// label: {
|
|
// show: true,
|
|
// color: '#fff',
|
|
// fontSize: 22
|
|
// },
|
|
// itemStyle: {
|
|
// borderColor: "rgba(2, 198, 220, 1)",
|
|
// borderWidth: 2,
|
|
// areaColor: "#02bcff29",
|
|
// }
|
|
// },
|
|
// // 重影
|
|
// // {
|
|
// // type: "map",
|
|
// // map: "customMap",
|
|
// // zlevel: -1,
|
|
// // aspectScale: 1,
|
|
// // zoom: 0.65,
|
|
// // layoutCenter: ["50%", "51%"],
|
|
// // layoutSize: "180%",
|
|
// // roam: false,
|
|
// // silent: true,
|
|
// // itemStyle: {
|
|
// // normal: {
|
|
// // borderWidth: 1,
|
|
// // // borderColor:"rgba(17, 149, 216,0.6)",
|
|
// // borderColor: "rgba(2, 198, 220, 0.6)",
|
|
// // shadowColor: "rgba(2, 198, 220, 0.6)",
|
|
// // shadowOffsetY: 5,
|
|
// // shadowBlur: 15,
|
|
// // areaColor: "rgba(5,21,35,0.1)",
|
|
// // },
|
|
// // },
|
|
// // },
|
|
// ],
|
|
geo3D: {
|
|
map: "customMap",
|
|
shading: 'color',
|
|
regionHeight: 8,
|
|
show: true,
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
fontSize: 22
|
|
},
|
|
itemStyle: {
|
|
color: '#02bcff29',
|
|
borderColor: "rgba(2, 198, 220, 1)",
|
|
borderWidth: 2
|
|
},
|
|
viewControl: {
|
|
rotateSensitivity: 0,
|
|
zoomSensitivity: 0,
|
|
panMouseButton: 0,
|
|
distance: 250,
|
|
alpha:50,
|
|
center:[0,-60,0]
|
|
}
|
|
},
|
|
}
|
|
this.chart.setOption(option)
|
|
}
|
|
})
|
|
},
|
|
getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
|
|
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiDvMap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
|
|
.chart-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|