153 lines
4.0 KiB
Vue
153 lines
4.0 KiB
Vue
<template>
|
|
<section class="fdMap">
|
|
<div ref="content" class="w100 h100"/>
|
|
<div class="reset" @click.stop="handleReset"/>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import geoJSON from "../assets/fengduGeo.json"
|
|
import fdEdge from "../assets/fdEdge.json"
|
|
|
|
export default {
|
|
name: "fdMap",
|
|
model: {
|
|
prop: "ins",
|
|
event: "input"
|
|
},
|
|
props: {
|
|
ins: {default: null},
|
|
root: String
|
|
},
|
|
watch: {
|
|
root(v) {
|
|
if (v) {
|
|
this.areaId = v.slice(0, 9)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
map: null,
|
|
areaId: ''
|
|
}
|
|
},
|
|
methods: {
|
|
init(c = 0) {
|
|
if (this.$refs.content) {
|
|
if (!this.map) this.map = echarts.init(this.$refs.content)
|
|
const geo = this.$copy(geoJSON)
|
|
if (this.areaId && this.areaId != "500230000") {//根据地区切换地图
|
|
const mapid = 'fd' + this.areaId
|
|
geo.features = geoJSON.features.filter(e => e.properties.unique_id == this.areaId)
|
|
echarts.registerMap(mapid, {geoJSON: geo})
|
|
this.map.setOption({
|
|
series: [
|
|
{
|
|
type: 'map',
|
|
show: true,
|
|
map: mapid,
|
|
roam: true,
|
|
itemStyle: {
|
|
areaColor: '#02bcff29',
|
|
borderColor: '#02FEFF',
|
|
borderWidth: 2,
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#02FEFF',
|
|
fontSize: 16,
|
|
fontFamily: 'PingFang-SC',
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
select: {
|
|
itemStyle: {areaColor: '#02bcff29',},
|
|
label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
|
|
},
|
|
zoom: 1.2,
|
|
data: geoJSON.features.map(e => e.properties)
|
|
},
|
|
]
|
|
})
|
|
} else {
|
|
const fd = fdEdge.features[0]
|
|
geo.features.unshift(fd)
|
|
echarts.registerMap('fengdu', {geoJSON: geo})
|
|
this.map.setOption({
|
|
series: [
|
|
{
|
|
type: 'map',
|
|
show: true,
|
|
map: 'fengdu',
|
|
roam: true,
|
|
itemStyle: {
|
|
areaColor: '#02bcff29',
|
|
borderColor: '#02FEFF21',
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#02FEFF',
|
|
fontSize: 16,
|
|
fontFamily: 'PingFang-SC',
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
select: {
|
|
itemStyle: {areaColor: '#02bcff29',},
|
|
label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
|
|
},
|
|
zoom: 1.2,
|
|
data: [...geoJSON.features.map(e => e.properties), {
|
|
...fd.properties, select: {disabled: true}, itemStyle: {
|
|
areaColor: 'transparent',
|
|
borderWidth: 2,
|
|
borderColor: '#02FEFF',
|
|
},
|
|
}],
|
|
},
|
|
]
|
|
})
|
|
}
|
|
this.$emit("input", this.map)
|
|
} else if (c < 5) setTimeout(() => this.init(++c), 500)
|
|
},
|
|
handleReset() {
|
|
const {series = []} = this.map.getOption()
|
|
this.map.clear()
|
|
this.init()
|
|
if (series[0]?.markPoint) {
|
|
this.map.setOption({
|
|
series: {
|
|
markPoint: series[0].markPoint
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.fdMap {
|
|
position: relative;
|
|
|
|
.reset {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 60px;
|
|
background: url("../assets/mapReset.png") no-repeat;
|
|
width: 66px;
|
|
height: 64px;
|
|
z-index: 202310241633;
|
|
cursor: pointer;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
}
|
|
</style>
|