Skip to content

C
country-energy-ecological-construction
Commit 7b9d5825 authored by 吕超's avatar 吕超
Browse files
Options

feat: 添加点击省份跳转的功能

parent b0331d21
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 119 deletions
src/components/Echart/Echarts.vue
View file @ 7b9d5825
......@@ -58,7 +58,6 @@ export default {
// 扩大echarts点击面的大小，即点击灰色面也可以触发
that.chart.getZr().on("click", function (params) {
console.log(params)
const pointInPixel = [params.offsetX, params.offsetY];
if (that.chart.containPixel("grid", pointInPixel)) {
/*此处添加具体执行代码*/
......@@ -66,19 +65,17 @@ export default {
{ seriesIndex: 0 },
pointInPixel
);
//X轴序号
console.log(pointInGrid)
const xIndex = pointInGrid[1];
//获取当前图表的option
const op = that.chart.getOption();
let name = "";
//获得图表中我们想要的数据 判断数据在x轴还是y轴
// console.log(op.xAxis, xIndex);
if (op.xAxis[0].type === "category") {
name = op.xAxis[0].data[xIndex];
// x轴为数据，选择pointInGrid第零位
name = op.xAxis[0].data[pointInGrid[0]];
} else {
console.log(xIndex)
name = op.yAxis[0].data[xIndex];
name = op.yAxis[0].data[pointInGrid[1]];
}
that.$emit("barClick", { name, data: params });
......
src/components/Map/Map.vue
View file @ 7b9d5825
......@@ -3,32 +3,32 @@
</template>
<script>
import mapboxgl from 'mapbox-gl'
import { register } from './config/map.js'
import style from './config/index.js'
import mapboxgl from "mapbox-gl";
import { register } from "./config/map.js";
import style from "./config/index.js";
export default {
props: {
center: {
type: Array,
default: () => [110, 30]
default: () => [110, 30],
},
zoom: {
type: Number,
default: 2
default: 2,
},
mapId: {
// 接收图层容器的ID
type: String || undefined,
default: 'map'
}
default: "map",
},
},
data() {
return {
map: null
}
map: null,
};
},
mounted() {
this.initMap()
this.initMap();
},
methods: {
initMap() {
......@@ -43,7 +43,7 @@ export default {
zoom: 3,
sources: {},
layers: [],
glyphs: './fonts/{fontstack}/{range}.pbf'
glyphs: "./fonts/{fontstack}/{range}.pbf",
},
maxZoom: 19.9,
minZoom: 0.1,
......@@ -51,75 +51,75 @@ export default {
trackResize: true,
attributionControl: false,
preserveDrawingBuffer: true,
renderWorldCopies: false // 地图不重复
renderWorldCopies: false, // 地图不重复
// style
})
this.map.on('load', async () => {
let map = this.map
window.map = this.map
});
this.map.on("load", async () => {
let map = this.map;
window.map = this.map;
// 添加新的地图实例方法, 初始化相关状态
register(mapboxgl.Map.prototype)
// map._initMapState({
// center: this.center,
// zoom: this.zoom
// })
register(mapboxgl.Map.prototype);
map._initMapState({
center: [110, 30],
zoom: this.zoom,
});
// console.log()
map.setBaseMap({ sources: style.sources, layers: style.layers })
map.setBaseMap({ sources: style.sources, layers: style.layers });
// 添加source
Object.entries(style.sources).forEach(item => {
map.addSource(item[0], item[1])
})
Object.entries(style.sources).forEach((item) => {
map.addSource(item[0], item[1]);
});
// 添加layers
style.layers.forEach(item => {
map.addLayer(item)
})
await this.addProvinceLayer()
this.$emit('onload', map)
})
style.layers.forEach((item) => {
map.addLayer(item);
});
await this.addProvinceLayer();
this.$emit("onload", map);
});
},
addProvinceLayer() {
// this.$api.data.getProvinceData().then(res => {
this.map.addSource('province', {
this.map.addSource("province", {
tiles: [
'http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf'
"http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf",
],
type: 'vector'
})
type: "vector",
});
this.map.addLayer({
id: 'province',
source: 'province',
type: 'fill',
'source-layer': 'province',
id: "province",
source: "province",
type: "fill",
"source-layer": "province",
layout: {},
paint: {
'fill-outline-color': '#fff',
'fill-color': 'rgba(0, 0, 0, 0)'
}
})
"fill-outline-color": "#fff",
"fill-color": "rgba(0, 0, 0, 0)",
},
});
this.map.addLayer({
id: '__province_title',
type: 'symbol',
source: 'area_title',
'source-layer': 'province',
id: "__province_title",
type: "symbol",
source: "area_title",
"source-layer": "province",
layout: {
'text-font': ['open-sans'],
'text-field': '{PXZQMC}',
'text-size': 17,
'text-max-width': 5
"text-font": ["open-sans"],
"text-field": "{PXZQMC}",
"text-size": 17,
"text-max-width": 5,
},
// maxzoom: 7,
// minzoom: 1,
paint: {
'text-color': '#fff',
'text-halo-color': '#000',
'text-halo-width': 1
}
})
}
}
}
"text-color": "#fff",
"text-halo-color": "#000",
"text-halo-width": 1,
},
});
},
},
};
</script>
<style lang="less" scoped>
......
src/config/city.config.js
View file @ 7b9d5825
export default{
province:[
{ code:'10', name:'全国',},
{ code:'11', name:'北京',},
{ code:'12', name:'天津',},
{ code:'13', name:'河北',},
{ code:'14', name:'山西',},
{ code:'15', name:'内蒙',},
{ code:'21', name:'辽宁',},
{ code:'22', name:'吉林',},
{ code:'23', name:'黑龙江',},
{ code:'31', name:'上海',},
{ code:'32', name:'江苏',},
{ code:'33', name:'浙江',},
{ code:'34', name:'安徽',},
{ code:'35', name:'福建',},
{ code:'36', name:'江西',},
{ code:'37', name:'山东',},
{ code:'41', name:'河南',},
{ code:'42', name:'湖北',},
{ code:'43', name:'湖南',},
{ code:'44', name:'广东',},
{ code:'45', name:'广西',},
{ code:'46', name:'海南',},
{ code:'50', name:'重庆',},
{ code:'51', name:'四川',},
{ code:'52', name:'贵州',},
{ code:'53', name:'云南',},
{ code:'54', name:'西藏',},
{ code:'61', name:'陕西',},
{ code:'62', name:'甘肃',},
{ code:'63', name:'青海',},
{ code:'64', name:'宁夏',},
{ code:'65', name:'新疆',},
]
}
\ No newline at end of file
// export default
const data = {
province: [
{ code: "10", name: "全国" },
{ code: "11", name: "北京" },
{ code: "12", name: "天津" },
{ code: "13", name: "河北" },
{ code: "14", name: "山西" },
{ code: "15", name: "内蒙" },
{ code: "21", name: "辽宁" },
{ code: "22", name: "吉林" },
{ code: "23", name: "黑龙江" },
{ code: "31", name: "上海" },
{ code: "32", name: "江苏" },
{ code: "33", name: "浙江" },
{ code: "34", name: "安徽" },
{ code: "35", name: "福建" },
{ code: "36", name: "江西" },
{ code: "37", name: "山东" },
{ code: "41", name: "河南" },
{ code: "42", name: "湖北" },
{ code: "43", name: "湖南" },
{ code: "44", name: "广东" },
{ code: "45", name: "广西" },
{ code: "46", name: "海南" },
{ code: "50", name: "重庆" },
{ code: "51", name: "四川" },
{ code: "52", name: "贵州" },
{ code: "53", name: "云南" },
{ code: "54", name: "西藏" },
{ code: "61", name: "陕西" },
{ code: "62", name: "甘肃" },
{ code: "63", name: "青海" },
{ code: "64", name: "宁夏" },
{ code: "65", name: "新疆" },
],
};
export default data;
export function getCodeOfName(name) {
const obj = data.province.find((item) => item.name === name);
console.log(obj);
if (!obj) return null;
return obj.code;
}
src/pages/biomassEnergyWarm/components/biogasManureMap.vue
View file @ 7b9d5825
......@@ -8,6 +8,7 @@
import Map from "@/components/Map/Map.vue";
import { BiomassData } from "../config/biomass.config.js";
import { color, colorLabel } from "../config/legend.config";
import { mapGetters } from "vuex";
export default {
name: "biogasManure",
props: {
......@@ -19,6 +20,10 @@ export default {
type: Array,
default: () => [],
},
provinceCode: {
type: String,
default: "",
},
},
data() {
return {
......@@ -41,6 +46,7 @@ export default {
filterCon.push("#f00");
return filterCon;
},
...mapGetters(["getMsgOfProvince"]),
},
methods: {
onload(map) {
......@@ -71,6 +77,18 @@ export default {
);
}
},
setProvinceView() {
if (this.provinceCode) {
const detail = this.getMsgOfProvince(this.provinceCode);
if (this.map && detail) {
this.map.fitBounds(detail.bbox, {
padding: { top: 50, bottom: 200, left: 50, right: 200 },
});
}
} else {
this.map.recover();
}
},
},
watch: {
type() {
......@@ -79,6 +97,9 @@ export default {
data() {
this.setPaintColor();
},
provinceCode() {
this.setProvinceView();
},
},
};
</script>
......
src/pages/biomassEnergyWarm/components/sortList.vue
View file @ 7b9d5825
......@@ -8,7 +8,11 @@
:style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }"
>
<div class="partItem">
<Echart ref="echart3" :options="setOptionOfEchart(item.key)"></Echart>
<Echart
ref="echart3"
:options="setOptionOfEchart(item.key)"
@barClick="barClick"
></Echart>
</div>
</PartWrap>
</div>
......@@ -43,12 +47,7 @@ export default {
},
getValOfdata() {
const keys = this.getItemOfType;
const res = {
// gn_local: [],
// ghcx_local: [],
// rj_local: [],
// th_local: [],
};
const res = {};
keys.forEach((item) => {
res[item.key] = [];
......@@ -61,10 +60,6 @@ export default {
yAxis: item.properties[i[0]],
});
});
// res.gn_local.push({ xAxis: pname, yAxis: gn_local });
// res.ghcx_local.push({ xAxis: pname, yAxis: ghcx_local });
// res.rj_local.push({ xAxis: pname, yAxis: rj_local });
// res.th_local.push({ xAxis: pname, yAxis: th_local });
});
return res;
},
......@@ -158,6 +153,9 @@ export default {
this.getValOfdata;
});
},
barClick(name) {
this.$emit("barClick", name);
},
},
};
</script>
......
src/pages/biomassEnergyWarm/index.vue
View file @ 7b9d5825
<template>
<div class="BiomassEnergyWarm">
<LeftPart :type="statusValue.key"></LeftPart>
<BiogasManureMap :type="statusValue.key" :data="data"></BiogasManureMap>
<BiogasManureMap
:type="statusValue.key"
:data="data"
:provinceCode="provinceCode"
></BiogasManureMap>
<StatusControl
:statusStyle="{ position: 'absolute', right: '600px', top: '100px' }"
:list="statusControlList"
v-model="statusValue"
></StatusControl>
<SortList :type="statusValue.key"></SortList>
<SortList :type="statusValue.key" @barClick="barClick"></SortList>
<!-- 表格数据展示 -->
<Table :type="statusValue.key" :data="data"></Table>
<!-- 底部总数 -->
......@@ -17,6 +21,7 @@
<Echart
ref="echart3"
:options="setOptionOfEchart(getItemOfType.key)"
@barClick="barClick"
></Echart>
</div>
</PartWrap>
......@@ -29,17 +34,15 @@
import PartWrap from "@/components/PartWrap/PartWrap.vue";
import Echart from "@/components/Echart/Echarts.vue";
import BiogasManureMap from "./components/biogasManureMap.vue";
// import DateWidget from "@/components/DateWidget/DateWidget.vue";
// // import PartInfo from '../../components/PartInfo/PartInfo.vue'
// import Echart from "@/components/Echart/Echarts.vue";
// import PartWrap from "@/components/PartWrap/PartWrap.vue";
import StatusControl from "@/components/statusControl/index.vue";
import Legend from "@/components/Lengend/Lengend.vue";
import { getCodeOfName } from "@/config/city.config";
import LeftPart from "./components/leftPart.vue";
import SortList from "./components/sortList.vue";
import Table from "./components/table.vue";
import { BiomassData } from "./config/biomass.config.js";
import { color, colorLabel } from "./config/legend.config";
import { mapGetters } from "vuex";
export default {
name: "BiomassEnergyWarm",
data() {
......@@ -55,6 +58,7 @@ export default {
data: [],
color,
colorLabel,
provinceCode: "",
};
},
components: {
......@@ -161,9 +165,11 @@ export default {
return option;
};
},
...mapGetters(["getMsgOfProvince"]),
},
created() {
this.getEnergyWarm();
console.log(this.getMsgOfProvince("14"));
},
methods: {
getEnergyWarm() {
......@@ -175,6 +181,11 @@ export default {
this.getValOfdata;
});
},
barClick(name) {
console.log(name);
const code = getCodeOfName(name.name);
code && (this.provinceCode = code);
},
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment