<template>
<div class="location1">
<div class="locHn">
<div class="box" :class="bgColor"><i class="el-icon-map-location" @click="getXzqhData"></i></div>
<el-cascader ref="cascader" :show-all-levels="false" expandTrigger="click" :options="cityData" v-model="cityName"
placeholder="行政区划" style="width: 100%" :props='defaultProps' @change="handleChange">
</el-cascader>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex';
import http from "@/service/interface.js";
import XYZ from "ol/source/XYZ";
export default {
name: "location",
components: {},
props: {
paramsTitle: {
type: String,
default () {
return "";
},
},
},
data() {
return {
jsonData: '',
cityData: [],
cityName: '',
defaultProps: {
checkStrictly: true ,
label:'fname',
value:'fcode',
children:'children'
},
layerhigtLight: null,
layerToken: '?token=IOTE=='
};
},
computed: {
...mapState('business', ['theme']),
bgColor(){
return this.theme == 'blue'? '':'bgColor'
}
},
created() {
this.getXzqhData().then(data => {
this.handleChange()
})
},
mounted() {
},
methods: {
// 行政区划
async getXzqhData() {
this.cityData = []
const userId = JSON.parse(localStorage.getItem("principal")).id
const res = await http.processtreeNew2({
fcode: localStorage.getItem('xzbmCode')
})
this.cityName = localStorage.getItem('xzbmCode')
let arr = this.cityDataFilter([res.data],'ftype')
let arr2= JSON.stringify(arr).replaceAll('"children":[],','')
this.cityData = JSON.parse(arr2)
},
cityDataFilter(treeData, excludeKey){
if (!treeData || !Array.isArray(treeData)) {
return [];
}
return treeData.filter(node => {
if (node.children && node.children.length > 0) {
node.children = this.cityDataFilter(node.children, excludeKey);
}
if (!(node[excludeKey]=="villages")) {
return true;
}
return false;
});
},
async handleChange () {
this.$refs.cascader.dropDownVisible = false
let [fLnt,fLat,level] = ['','','']
let nodesObj = this.$refs['cascader'].getCheckedNodes()
if(!nodesObj.length){
return this.$message.error('无相应权限')
}
let data = nodesObj[0]
fLnt = data.data.flnt
fLat = data.data.flat
let ftype = data.data.ftype
if(ftype == 'province'){
level = 1
} else if(ftype == 'city'){
level = 2
} else if(ftype == 'county'){
level = 3
} else if(ftype == 'towns'){
level = 4
} else if(ftype == 'villages'){
level = 5
}
this.layerChangeDlfb(data.value,level)
},
layerChangeDlfb(code,level) {
this.$eventBus.$emit('changeXzbm',code)
let lcCode = localStorage.xzbmCode
let ftype = lcCode.length
if(ftype == 2){
this.cityName = code.length == ftype?[code]:(code.length==ftype+2 ? [lcCode,code]: (code.length==ftype+4?[lcCode,code.slice(0,4),code]:[lcCode,code.slice(0,4),code.slice(0,6),code]))
} else if(ftype == 4){
this.cityName = code.length == ftype?[code]:(code.length==ftype+2 ? [lcCode,code]: [lcCode,code.slice(0,6),code])
} else {
this.cityName = code.length == ftype? [code]:[lcCode,code]
}
let [fLnt,fLat] = ['','']
setTimeout(() => {
let nodesObj = this.$refs['cascader'].getCheckedNodes()
let data = nodesObj[0]
fLnt = data.data.flnt
fLat = data.data.flat
gisMap.map.getView().animate({
center: fLat?[fLnt,fLat] : [111.9, 27.5],
// zoom: level>3?14:(level == 3? 12 : (level ==2?9.5:7.5)),
zoom: level>3?12:(level == 3? 10.5 : (level ==2?9:7.5)),
duration: 1000,
})
}, 0);
let title=''
let id=''
let filterStr=''
let url=''
if(level==1 || level=='' || level == null){
if(this.layerhigtLight){ return this.layerhigtLight.setVisible(false)} else {return false}
} else if(level==2){
title="xzbjShi1"
id='2021湖南省市界'
filterStr='Q_shi_S_EQ='
url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省市界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
} else if(level==3){
title="xzbjXian1"
id='2021湖南省县界'
filterStr='Q_xian_S_EQ='
url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省县界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
} else if(level==4){
title="xzbjXiang1"
id='2021湖南省乡界'
filterStr='Q_xiang_S_EQ='
url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省乡界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
} else{
title="xzbjCun1"
id='2021湖南省村界'
filterStr='Q_cun_S_EQ='
url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省村界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
}
if(this.layerhigtLight) {
this.layerhigtLight.setVisible(false)
}
this.layerhigtLight = gisMap.map.getLayers().getArray().find((f)=>{
return f.values_.title == title
})
let control = window.encodeURIComponent(JSON.stringify({
otherDisplay:false,
layers: [
// 图层名和筛选条件
{id:id ,filterStr:filterStr+code}
]
}))
let source = new XYZ({
url:url+control,
projection: "EPSG:4326",
});
this.layerhigtLight.setSource(source);
this.layerhigtLight.setVisible(true)
},
},
};
</script>
<style scoped lang="less">
.location1 {
width: 150px;
height: 40px;
position: relative;
z-index: 99;
color: #fff !important;
/deep/ .el-cascader {
left: 40%
}
.locHn {
position: absolute;
width: 100%;
height: 100%;
.box {
width: 50px;
height: 100%;
background-color: var(--primary-color-tran);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0px;
// left: 200px;
// left: 187px;
left: 10px;
color: #fff;
font-size: 20px;
border-radius: 4px;
z-index: 2;
}
.bgColor{
background: rgba(2, 149, 23, 1);
}
}
}
</style>
公益林行政区划各级通过服务进行高亮定位
于 2023-07-04 14:57:02 首次发布
该代码段展示了一个Vue组件,用于处理行政区划的选择,结合Vuex进行状态管理。组件使用了ElementUI的Cascader组件来选择行政区域,并在选择后根据层级更改地图的显示,包括省、市、县、乡、村等不同级别的边界层。同时,组件与后台接口进行交互获取数据,并动态设置地图高亮层。
摘要由CSDN通过智能技术生成