|
|
@@ -90,7 +90,8 @@ export default {
|
|
|
economicsArr: [],
|
|
|
selectData: {},
|
|
|
districtData: {},
|
|
|
- streetData: {}
|
|
|
+ streetData: {},
|
|
|
+ projectMarkerArr: []
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -98,6 +99,16 @@ export default {
|
|
|
handler(val) {
|
|
|
// 加载小班边界
|
|
|
// this.getSmallClass();
|
|
|
+ if (this.projectMarkerArr) {
|
|
|
+ this.map.remove(this.projectMarkerArr);
|
|
|
+ }
|
|
|
+ if (this.smallClassPolygonArr) {
|
|
|
+ this.map.remove(this.smallClassPolygonArr);
|
|
|
+ }
|
|
|
+ if (this.treesPolygonArr) {
|
|
|
+ this.map.remove(this.treesPolygonArr);
|
|
|
+ }
|
|
|
+ this.getSmallClassCount();
|
|
|
this.parentId = val;
|
|
|
if (this.$store.state.addr.mapLevel == 'street') {
|
|
|
this.parentId = val.substring(0, 6);
|
|
|
@@ -151,23 +162,33 @@ export default {
|
|
|
},
|
|
|
'$store.state.addr.page': {
|
|
|
handler(val) {
|
|
|
+ console.log(val);
|
|
|
this.leftPage = val;
|
|
|
if (!this.parentId) {
|
|
|
this.parentId = '520000';
|
|
|
this.$store.state.addr.parentName = '贵州省';
|
|
|
}
|
|
|
if (this.parentId) {
|
|
|
- // this.getSmallClass(val);
|
|
|
+ this.getSmallClass(val);
|
|
|
this.mapPolygon();
|
|
|
}
|
|
|
+ if (val == 'forest' || val == 'treeSpecies') {
|
|
|
+ this.getSmallClassCount();
|
|
|
+ }
|
|
|
if (val != 'forest') {
|
|
|
this.map.remove(this.forestMarkerArr);
|
|
|
this.map.remove(this.smallClassNArr);
|
|
|
this.map.remove(this.smallClassPolygonArr);
|
|
|
+ if (this.projectMarkerArr) {
|
|
|
+ this.map.remove(this.projectMarkerArr);
|
|
|
+ }
|
|
|
}
|
|
|
if (val != 'treeSpecies') {
|
|
|
this.map.remove(this.forestMarkerArr);
|
|
|
this.map.remove(this.treesPolygonArr);
|
|
|
+ if (this.projectMarkerArr) {
|
|
|
+ this.map.remove(this.projectMarkerArr);
|
|
|
+ }
|
|
|
}
|
|
|
if (val != 'economics') {
|
|
|
this.map.remove(this.economicsArr);
|
|
|
@@ -423,6 +444,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ '$store.state.addr.mapLevel': {
|
|
|
+ handler(val) {
|
|
|
+ if (val === 'street') {
|
|
|
+ this.getSmallClass();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -594,45 +622,51 @@ export default {
|
|
|
adcode = props.adcode;
|
|
|
mapLevel = props.level;
|
|
|
// for (let item of this.forestFarmData) {
|
|
|
- // if (props.name == item.cityName || props.name == item.countyName) {
|
|
|
- mapLevel = props.level;
|
|
|
- adName = props.name;
|
|
|
- this.$store.dispatch('searchArea', {
|
|
|
- parentId: props.adcode,
|
|
|
- name: props.name,
|
|
|
- mapLevel: props.level
|
|
|
- });
|
|
|
- let valCode = props.adcode + '000000';
|
|
|
- let areaId = '';
|
|
|
- this.vuexCityList.forEach((item) => {
|
|
|
- if (valCode == item.areaCode) {
|
|
|
- areaId = item.areaId;
|
|
|
- }
|
|
|
- });
|
|
|
- this.vuexDistrictList.forEach((item) => {
|
|
|
- if (valCode == item.areaCode) {
|
|
|
- areaId = item.areaId;
|
|
|
- }
|
|
|
- });
|
|
|
- if (props.level == 'city') {
|
|
|
- this.changeSelectCity({
|
|
|
- value: valCode,
|
|
|
- label: props.name,
|
|
|
- areaId: areaId
|
|
|
- });
|
|
|
- } else if (props.level == 'district') {
|
|
|
- this.changeSelectDistrict({
|
|
|
- value: valCode,
|
|
|
- label: props.name,
|
|
|
- areaId: areaId
|
|
|
- });
|
|
|
- }
|
|
|
- this.map.remove(this.treesMarkerArr);
|
|
|
+ // if (props.name == item.cityName || props.name == item.countyName) {
|
|
|
+ mapLevel = props.level;
|
|
|
+ adName = props.name;
|
|
|
+ this.$store.dispatch('searchArea', {
|
|
|
+ parentId: props.adcode,
|
|
|
+ name: props.name,
|
|
|
+ mapLevel: props.level
|
|
|
+ });
|
|
|
+ let valCode = props.adcode + '000000';
|
|
|
+ let areaId = '';
|
|
|
+ this.vuexCityList.forEach((item) => {
|
|
|
+ if (valCode == item.areaCode) {
|
|
|
+ areaId = item.areaId;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.vuexDistrictList.forEach((item) => {
|
|
|
+ if (valCode == item.areaCode) {
|
|
|
+ areaId = item.areaId;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (props.level == 'city') {
|
|
|
+ this.changeSelectCity({
|
|
|
+ value: valCode,
|
|
|
+ label: props.name,
|
|
|
+ areaId: areaId
|
|
|
+ });
|
|
|
+ } else if (props.level == 'district') {
|
|
|
+ this.changeSelectDistrict({
|
|
|
+ value: valCode,
|
|
|
+ label: props.name,
|
|
|
+ areaId: areaId
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.map.remove(this.treesMarkerArr);
|
|
|
// }
|
|
|
// }
|
|
|
}
|
|
|
+
|
|
|
+ if (this.projectMarkerArr) {
|
|
|
+ this.map.remove(this.projectMarkerArr);
|
|
|
+ }
|
|
|
});
|
|
|
this.switch2AreaNode(adcode);
|
|
|
+ this.getSmallClassCount();
|
|
|
},
|
|
|
//根据Hover状态设置相关样式
|
|
|
toggleHoverFeature(feature, isHover, position) {
|
|
|
@@ -897,6 +931,42 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ // 按区域统计小班
|
|
|
+ getSmallClassCount() {
|
|
|
+ let params = {
|
|
|
+ cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
+ countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
+ townId: this.$store.state.addr.selectStreet.areaId
|
|
|
+ };
|
|
|
+ smallClassCount(params).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ let infoIcon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(20, 25), // 图标尺寸
|
|
|
+ image: require('@/assets/img/infoMarker.png'),
|
|
|
+ imageSize: new AMap.Size(20, 25) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ res.data.forEach((element) => {
|
|
|
+ if (element.longitude && element.latitude) {
|
|
|
+ let infoContent = `<div class='infoLabel'><h3>${element.areaName}</h3><div class='content-sty'><p class='infoClass'>小班数量：${element.classNumber}个</p></div></div>`;
|
|
|
+ let lnglat = new AMap.LngLat(element.longitude, element.latitude);
|
|
|
+ var projectMarker = new AMap.Marker({
|
|
|
+ map: this.map,
|
|
|
+ position: lnglat,
|
|
|
+ offset: new AMap.Pixel(0, -30),
|
|
|
+ icon: infoIcon
|
|
|
+ });
|
|
|
+ projectMarker.setLabel({
|
|
|
+ direction: 'top',
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: infoContent //设置文本标注内容
|
|
|
+ });
|
|
|
+ this.projectMarkerArr.push(projectMarker);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 加载乡镇边界
|
|
|
getrjx(cityName) {
|
|
|
if (cityName == '榕江县') {
|
|
|
@@ -972,8 +1042,8 @@ export default {
|
|
|
let that = this;
|
|
|
that.smallClassMapArr = [];
|
|
|
let params = {
|
|
|
- cityId: that.$store.state.addr.selectCity.areaId,
|
|
|
- countyId: that.$store.state.addr.selectDistrict.areaId,
|
|
|
+ // cityId: that.$store.state.addr.selectCity.areaId,
|
|
|
+ // countyId: that.$store.state.addr.selectDistrict.areaId,
|
|
|
townId: this.$store.state.addr.selectStreet.areaId
|
|
|
};
|
|
|
if (that.smallClassPolygonArr.length > 0) {
|
|
|
@@ -982,39 +1052,13 @@ export default {
|
|
|
if (that.treesPolygonArr.length > 0) {
|
|
|
that.map.remove(that.treesPolygonArr);
|
|
|
}
|
|
|
- let pageData = {
|
|
|
- pageNum: 0,
|
|
|
- pageSize: 25
|
|
|
- };
|
|
|
+ // let pageData = {
|
|
|
+ // pageNum: 0,
|
|
|
+ // pageSize: 25
|
|
|
+ // };
|
|
|
let mapLevel = that.$store.state.addr.mapLevel;
|
|
|
- let res = await smallClassMap({ ...params, ...pageData });
|
|
|
- console.log(res.rows);
|
|
|
- if (res.code == 200 && res.total > 25) {
|
|
|
- const total = res.total;
|
|
|
- const totalPage = Math.ceil(total / pageData.pageSize);
|
|
|
- const render = (page, mapLevel) => {
|
|
|
- if (page >= totalPage) return;
|
|
|
- requestAnimationFrame(() => {
|
|
|
- render(page + 1, mapLevel);
|
|
|
- pageData.pageNum = page;
|
|
|
- smallClassMap({ ...params, ...pageData }).then((response) => {
|
|
|
- if (response.code == 200) {
|
|
|
- response.rows.forEach((item) => {
|
|
|
- // if (item.smallId != null) {
|
|
|
- // }
|
|
|
- // this.smallClassMapArr.push(item);
|
|
|
- if (that.leftPage === 'forest') {
|
|
|
- this.addForestPolygon(item);
|
|
|
- } else if (this.leftPage === 'treeSpecies') {
|
|
|
- this.addTreeSpeciesPolygon(item);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- };
|
|
|
- render(pageData.pageNum, mapLevel);
|
|
|
- } else {
|
|
|
+ let res = await smallClassMap({ ...params });
|
|
|
+ if (mapLevel == 'street') {
|
|
|
res.rows.forEach((item) => {
|
|
|
if (that.leftPage === 'forest') {
|
|
|
this.addForestPolygon(item);
|
|
|
@@ -1023,13 +1067,48 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ // if (res.code == 200 && res.total > 25) {
|
|
|
+ // const total = res.total;
|
|
|
+ // const totalPage = Math.ceil(total / pageData.pageSize);
|
|
|
+ // const render = (page, mapLevel) => {
|
|
|
+ // if (page >= totalPage) return;
|
|
|
+ // requestAnimationFrame(() => {
|
|
|
+ // render(page + 1, mapLevel);
|
|
|
+ // pageData.pageNum = page;
|
|
|
+ // smallClassMap({ ...params, ...pageData }).then((response) => {
|
|
|
+ // if (response.code == 200) {
|
|
|
+ // response.rows.forEach((item) => {
|
|
|
+ // // if (item.smallId != null) {
|
|
|
+ // // }
|
|
|
+ // // this.smallClassMapArr.push(item);
|
|
|
+ // if (that.leftPage === 'forest') {
|
|
|
+ // this.addForestPolygon(item);
|
|
|
+ // } else if (this.leftPage === 'treeSpecies') {
|
|
|
+ // this.addTreeSpeciesPolygon(item);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ // render(pageData.pageNum, mapLevel);
|
|
|
+ // } else {
|
|
|
+ // res.rows.forEach((item) => {
|
|
|
+ // if (that.leftPage === 'forest') {
|
|
|
+ // this.addForestPolygon(item);
|
|
|
+ // } else if (this.leftPage === 'treeSpecies') {
|
|
|
+ // this.addTreeSpeciesPolygon(item);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
},
|
|
|
mapPolygon() {
|
|
|
if (this.smallClassMapArr) {
|
|
|
if (this.leftPage === 'forest') {
|
|
|
// this.addForestPolygon(this.smallClassMapArr);
|
|
|
if (
|
|
|
- this.$store.state.addr.mapLevel == 'district' ||
|
|
|
+ // this.$store.state.addr.mapLevel == 'district' ||
|
|
|
this.$store.state.addr.mapLevel == 'street'
|
|
|
) {
|
|
|
this.getForestSample(this.leftPage);
|
|
|
@@ -1037,7 +1116,7 @@ export default {
|
|
|
} else if (this.leftPage === 'treeSpecies') {
|
|
|
// this.addTreeSpeciesPolygon();
|
|
|
if (
|
|
|
- this.$store.state.addr.mapLevel == 'district' ||
|
|
|
+ // this.$store.state.addr.mapLevel == 'district' ||
|
|
|
this.$store.state.addr.mapLevel == 'street'
|
|
|
) {
|
|
|
this.getRightScrollData(this.leftPage);
|
|
|
@@ -1227,9 +1306,9 @@ export default {
|
|
|
// 获取样地数据
|
|
|
getForestSample(page) {
|
|
|
forestSample({
|
|
|
- cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
- countyId: this.$store.state.addr.selectDistrict.areaId
|
|
|
- // townId: this.$store.state.addr.selectStreet.areaId
|
|
|
+ // cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
+ // countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
+ townId: this.$store.state.addr.selectStreet.areaId
|
|
|
}).then((res) => {
|
|
|
let sampleMarker = require('@/assets/img/sample-marker.png');
|
|
|
let iconMeta = [28, 28];
|
|
|
@@ -1418,9 +1497,9 @@ export default {
|
|
|
// 获取小班列表
|
|
|
getRightScrollData(page) {
|
|
|
rightScrollData({
|
|
|
- cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
- countyId: this.$store.state.addr.selectDistrict.areaId
|
|
|
- // townId: this.$store.state.addr.selectStreet.areaId
|
|
|
+ // cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
+ // countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
+ townId: this.$store.state.addr.selectStreet.areaId
|
|
|
}).then((res) => {
|
|
|
let sampleMarker = require('@/assets/img/sanjiaod.png');
|
|
|
let iconMeta = [16, 10];
|
|
|
@@ -1861,4 +1940,31 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
+/deep/ .infoLabel {
|
|
|
+ background-image: url('../assets/img/project_bac.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ min-width: 140px;
|
|
|
+ min-height: 63px;
|
|
|
+ position: relative;
|
|
|
+ h3 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .content-sty {
|
|
|
+ padding: 20px 10px 0 10px;
|
|
|
+ .infoClass {
|
|
|
+ text-align: center;
|
|
|
+ background-image: url('../assets/img/project_tit.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 4px 10px;
|
|
|
+ color: #ffaa00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
