修改地图
夜笙歌
6 months ago
parent
25054ef36d
commit
e239834c9e
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view> </router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {AppMain} from './components'
|
||||
import BoardTopNav from "@/components/BoardTopNav";
|
||||
|
||||
export default {
|
||||
name: 'BoardIndex',
|
||||
components: {
|
||||
AppMain,
|
||||
BoardTopNav
|
||||
},
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Chart ref="chart" class="chart"></Chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from "../../../components/Charts/Chart";
|
||||
import * as echarts from 'echarts';
|
||||
import ChinaMapData from '@/utils/ChinaMapData.json'
|
||||
import axios from "axios";
|
||||
|
||||
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
||||
export default {
|
||||
components: {Chart},
|
||||
data() {
|
||||
return {
|
||||
code: 100000,
|
||||
cityJson: null
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let mapData = this.code === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)).data
|
||||
this.getMap(mapData)
|
||||
this.chartClick()
|
||||
},
|
||||
methods: {
|
||||
getMap(geoJson) {
|
||||
this.cityJson = geoJson.features
|
||||
echarts.registerMap('map', geoJson);
|
||||
const random = (val = 1) => {
|
||||
return Math.ceil(Math.random() * val)
|
||||
}
|
||||
let Point = [
|
||||
{value: [120.3, 36.0], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [104.065735, 30.659462], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [114.4995, 38.1006], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [109.1162, 34.2004], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [106.3586, 38.1775], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [101.4038, 36.8207], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)},
|
||||
{value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
|
||||
]
|
||||
let option = {
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
},
|
||||
geo: {
|
||||
map: "map",
|
||||
show: false,
|
||||
aspectScale: 0.75, //长宽比
|
||||
zoom: 1.1,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
roam: false,
|
||||
layoutCenter: ["50%", "50%"], // position位置
|
||||
layoutSize: 25 * vw,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#013B8F", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#013B8F", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
shadowColor: "#013B8F",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 8,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#2AB8FF",
|
||||
borderWidth: 0,
|
||||
color: "green",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#1DE9B6",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgb(147, 235, 248,0.5)",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#013B8F", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#013B8F", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: true, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
zoom: 1.1,
|
||||
map: 'map', //使用
|
||||
aspectScale: 0.75, //长宽比
|
||||
},
|
||||
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
showEffectOn: 'emphasis',
|
||||
zlevel: 1,
|
||||
rippleEffect: {
|
||||
period: 15,
|
||||
scale: 1,
|
||||
brushType: "fill",
|
||||
},
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#1DE9B6",
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
symbolSize: [0.5 * vw, 0.5 * vw],
|
||||
data: Point,
|
||||
label: {
|
||||
padding: [-16, 0, 0, 5],
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
formatter: function (val) {
|
||||
return [`{a|}{b|'点位${val.data.index}}`]
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
width: 0.34 * vw,
|
||||
height: 0.34 * vw,
|
||||
borderColor: '#0FF32E',
|
||||
borderWidth: 0.34 * vw,
|
||||
borderRadius: 0.17 * vw,
|
||||
shadowBlur: 20,
|
||||
shadowColor: "#0FF32E",
|
||||
},
|
||||
b: {
|
||||
padding: [0, 0, 0, 5],
|
||||
color: '#0FF32E',
|
||||
height: 40,
|
||||
fontSize: 0.75 * vw,
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
this.$refs.chart.setData(option);
|
||||
},
|
||||
chartClick() {
|
||||
this.$refs.chart.chart.on('click', async (params) => {
|
||||
this.code = this.cityJson[params.dataIndex].properties.adcode
|
||||
let mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.cityJson[params.dataIndex].properties.adcode}_full.json`)).data
|
||||
this.getMap(mapData)
|
||||
})
|
||||
this.$refs.chart.$el.addEventListener('dblclick', ()=> {
|
||||
this.chartDblClick(this.code)
|
||||
});
|
||||
},
|
||||
async chartDblClick(val) {
|
||||
let a = val.toString().substr(0, 2)
|
||||
let b = val.toString().substr(2, 2)
|
||||
let c = val.toString().substr(4, 2)
|
||||
if (c !== '00') {
|
||||
// this.code = Number(a + b + '00')
|
||||
this.code = Number(a + '0000')
|
||||
} else if (b !== '00') {
|
||||
this.code = Number(a + '0000')
|
||||
} else if (a !== '10') {
|
||||
this.code = 100000
|
||||
}
|
||||
let mapData = this.code === 100000 ? ChinaMapData : (await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)).data
|
||||
this.getMap(mapData)
|
||||
}
|
||||
}
|
||||
}
|
||||
;
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue