kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

26929

Browse Source
This commit is contained in:
yanran200730
2022-01-26 11:10:40 +08:00
parent be95736987
commit e95360fc81
1 changed files with 306 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
packages/2.0.5/AppGridMap/components/list.vue vendored
View File

@@ -1,13 +1,12 @@
<template>
<div class="gridMap">
<ai-t-map :map.sync="map" :lib.sync="mapLib" :libraries="['geometry','service', 'tools']"/>
<ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
<div class="drawer" ref="drawer">
<div v-if="show" class="drawer-content">
<b>网格地图</b>
<div class="tree">
<div class="input">
<el-input placeholder="请输入网格名称"
v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
<el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
</div>
<header class="header">
<span>网格列表</span>
@@ -19,10 +18,10 @@
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:expand-on-click-node="false"
:filter-node-method="filterNode"
default-expand-all
highlight-current
>
highlight-current>
</el-tree>
</div>
</div>
@@ -37,7 +36,7 @@
import {mapState} from 'vuex'
export default {
name: "AppGridMap",
name: 'AppGridMap',
label: "网格地图",
props: {
instance: Function,
@@ -75,7 +74,6 @@ export default {
currInfo: {},
infoWindowHtml: "",
marker: {},
location: {},
activeId: null,
labels: []
};
@@ -88,7 +86,6 @@ export default {
this.getTreeList().then(() => {
this.getLeafNodes()
})
this.getCorpLocation()
},
watch: {
filterText(val) {
@@ -111,51 +108,59 @@ export default {
}
})
},
getCorpLocation(){
onMapInit () {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
if(res.code==0){
this.location = res.data
if (res.code === 0) {
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
}
})
},
getLeafNodes() {
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
if (res?.data) {
let arr = []
res.data.forEach(e => {
if (e.points?.length > 0) {
arr.push(e.points.map(p => [p.lng, p.lat]))
const arr = res.data.map(v => {
return {
id: v.id,
girdName: v.girdName,
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
}
})
this.renderGridMap(arr, true)
}).filter(v => v.points.length)
this.renderGridMap(arr)
}
})
},
handleNodeClick (val) {
let path = [];
this.currInfo = val
if (val?.points?.length > 0) {
path = val.points.map(e => [e.lng, e.lat])
this.renderGridMap([path])
} else if (val.girdLevel === '2') {
this.$message.error("所选网格没有标绘!")
if (val.girdLevel === '0') {
this.getLeafNodes()
return false
}
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
if (res?.data) {
const arr = res.data.map(v => {
return {
id: v.id,
girdName: v.girdName,
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
}
}).filter(v => v.points.length)
if (!arr.length) {
return this.$message.error('该网格还未标绘')
}
this.renderGridMap(arr)
}
},
renderGridMap(paths, flag) {
let {map, mapLib: TMap, retryMapCount} = this
if (TMap) {
setTimeout(() => {
flag && map.setCenter(new TMap.LatLng(this.location.lat, this.location.lng))
}, 400)
if (this.labels.length > 0) {
this.labels.forEach(e => {
e.destroy(e.id)
})
this.labels = []
}
const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
const fitBounds = (latLngList) => {
// 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
},
fitBounds(latLngList, count = 0) {
let {mapLib: TMap} = this
if (TMap) {
if (latLngList.length === 0) {
return null;
}
@@ -173,40 +178,59 @@ export default {
new TMap.LatLng(boundsS, boundsW),
new TMap.LatLng(boundsN, boundsE)
);
} else {
if (count < 5) {
this.fitBounds(latLngList, ++count)
}
}
},
renderGridMap(paths) {
let {map, mapLib: TMap } = this
if (TMap) {
if (this.polygons.length > 0) {
this.polygons.forEach(e => e.destroy())
this.labels.forEach(e => {
e.destroy(e.id)
})
this.polygons = []
this.labels = []
}
if (paths?.length > 0) {
let bounds = []
paths.forEach((path, i) => {
let color = colors[i % colors.length]
let polygon = new TMap.MultiPolygon({
map, styles: {
default: new TMap.PolygonStyle({
showBorder: true,
borderColor: color,
borderColor: '#5088FF',
borderWidth: 2,
color: this.$colorUtils.Hex2RGBA(color, 0.1),
borderDashArray: [10, 10]
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
})
},
geometries: [{paths: path.map(e => new TMap.LatLng(e[1], e[0]))}]
id: path.id,
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
})
this.polygons.push(polygon)
bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0]))))
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
polygon.on('click', e => {
const id = e.target.id
this.getGridInfo(id)
})
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
const points = path.map(e => new TMap.LatLng(e[1], e[0]))
var position = TMap.geometry.computeCentroid(points)
let label = new TMap.MultiLabel({
id: `label~${this.currInfo.id}`,
data: this.currInfo.id,
id: `label~${path.id}`,
data: path.id,
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF',
size: 30,
size: 20,
alignment: 'center',
verticalAlignment: 'middle'
})
@@ -216,7 +240,7 @@ export default {
id: `label-class-${i}`,
styleId: 'building',
position: position,
content: this.currInfo.girdName,
content: path.girdName,
}
]
})
@@ -226,7 +250,7 @@ export default {
});
})
bounds = bounds.reduce((a, b) => {
return fitBounds([
return this.fitBounds([
a.getNorthEast(),
a.getSouthWest(),
b.getNorthEast(),
@@ -234,15 +258,8 @@ export default {
]);
});
map.fitBounds(bounds, {padding: 100})
} else {
if (retryMapCount < 5) {
setTimeout(() => {
this.retryMapCount++
this.renderGridMap(paths)
}, 1000)
}
}
},
hasClass(ele, cls) {
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
@@ -340,7 +357,7 @@ export default {
});
},
},
};
}
</script>
<style lang="scss" scoped>