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

网格地图

Browse Source
This commit is contained in:
yanran200730
2022-07-02 11:36:13 +08:00
parent a7c6883756
commit 72e1559fa7
2 changed files with 252 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/project/xicheng/AppMerchantManage/AppMerchantManage.vue
View File

@@ -68,7 +68,7 @@
size: 10,
current: this.current,
businessName: this.keyword
},
}
}).then((res) => {
if (res.code == 0) {
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records

536
src/project/xicheng/AppMerchantMap/AppMerchantMap.vue
View File

@@ -1,321 +1,287 @@
<template>
<div class="AppMerchantMap">
<div class="grid-select">
<AiPagePicker type="gird" class="fill" @select="handleSelectGird">
<div class="gird-content">
<div class="label">网格选择</div>
<div class="grid-select__right">
<span>{{ form.girdName || '请选择' }}</span>
<u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
</div>
</div>
</AiPagePicker>
<div class="search">
<image :src="$cdn + 'xincheng/search.png'" />
<input placeholder="请输入姓名、店名、电话" v-model="businessName" @confirm="getList">
</div>
<div class="map-content">
<AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['geometry','service', 'tools']"/>
<AiTMap :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
</div>
<u-popup v-model="show" mode="bottom" border-radius="14">
<div class="popup">
<div class="bg"></div>
<div class="title">{{ form.girdName }}</div>
<scroll-view scroll-y="true" class="grid-info">
<div class="info-flex" v-for="(item) in form.girdMemberManageList" :key="item.id" flex>
<div class="label">网格长</div>
<div class="value fill" v-text='[item.name, item.phone].join(" ")'/>
<AiPhone :phone="item.phone"/>
</div>
<div class="info-flex" v-for="(item) in form.girdMemberList" :key="item.id" flex>
<div class="label">网格员</div>
<div class="value fill" v-text='[item.name, item.phone].join(" ")'/>
<AiPhone :phone="item.phone"/>
</div>
</scroll-view>
</div>
</u-popup>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
export default {
name: 'AppMerchantMap',
appName: '商户地图',
data() {
return {
areaId: '',
lib: null,
map: null,
show: false,
form: {girdName: '', id: ''},
treeList: [],
showSelect: false,
editor: null,
polygons: [],
labels: []
}
},
computed: {...mapState(['user', 'config'])},
created() {
this.$dict.load('girdType')
this.areaId = this.user.areaId
},
onShow() {
document.title = "网格管理"
},
methods: {
getGridList(id) {
this.$loading()
this.$http.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${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]) : []
}
})
this.renderGridMap(arr)
}
}).finally(() => {
this.$hideLoading()
})
},
getGridInfo(id, flag) {
this.$loading()
this.$http.post(`/app/appgirdinfo/queryDetailById?id=${id}`).then((res) => {
this.$hideLoading()
if (res?.data) {
this.form = res.data
if (res.data.points && flag) {
const arr = [{
id: res.data.id,
girdName: res.data.girdName,
points: res.data.points.map(p => [p.lng, p.lat])
}]
this.renderGridMap(arr)
}
this.$nextTick(() => {
!flag && (this.show = true)
})
}
}).catch(() => {
this.$hideLoading()
})
},
renderGridMap(paths, count = 0) {
let {map, lib: TMap, $refs: {AiTMap: {fitBounds}}} = this
if (TMap) {
const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
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) => {
if (path.points?.length > 0) {
let polygon = new TMap.MultiPolygon({
map, styles: {
default: new TMap.PolygonStyle({
showBorder: true,
borderColor: '#5088FF',
borderWidth: 2,
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
})
},
id: path.id,
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
})
this.polygons.push(polygon)
bounds.push(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 position = TMap.geometry.computeCentroid(points)
let label = new TMap.MultiLabel({
id: `label~${path.id}`,
data: path.id,
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF',
size: 20,
alignment: 'center',
verticalAlignment: 'middle'
})
},
geometries: [
{
id: `label-class-${i}`,
styleId: 'building',
position,
content: path.girdName,
}
]
})
this.labels.push(label)
label.on('click', e => {
this.getGridInfo(e.target.id.split('~')[1])
});
}
})
bounds = bounds.reduce((a, b) => {
return fitBounds([
a.getNorthEast(),
a.getSouthWest(),
b.getNorthEast(),
b.getSouthWest(),
]);
});
map.fitBounds(bounds, {padding: 100})
} else {
map.setCenter(this.config.latlng)
}
} else {
if (count < 5) {
setTimeout(() => {
this.renderGridMap(paths, ++count)
}, 1000)
}
export default {
name: 'AppMerchantMap',
appName: '商户地图',
data() {
return {
areaId: '',
lib: null,
map: null,
polygons: [],
labels: [],
businessName: '',
markers: [],
ops: {},
markers: [],
MarkerCluster: null
}
},
callPhone(phone) {
uni.makePhoneCall({phoneNumber: phone})
computed: {...mapState(['user', 'config'])},
created () {
this.areaId = this.user.areaId
this.getList()
},
handleSelectGird(v) {
this.form = v || {}
this.getGridList(v?.id, true)
mounted () {
this.initMap()
},
methods: {
getList () {
this.$http.post('/app/appcompany/list', null, {
params: {
size: 100000,
current: 1,
businessName: this.businessName
}
}).then((res) => {
if (res.code == 0) {
const markers = res.data.records.filter(item => item.lat).map(item => {
return {
title: item.businessName,
lnglat: [item.lon, item.lat],
lat: item.lat,
lng: item.lon,
id: item.id,
name: item.businessName
}
})
this.getMarkerCluster(markers)
}
})
},
getMarkerCluster(points, count = 0) {
let {lib: TMap, map} = this
if (map) {
if (this.markers.length) {
console.log(this.MarkerCluster)
// this.MarkerCluster.destroy()
// this.MarkerCluster = null
this.markers.forEach(v => {
v.setMap(null)
})
}
class ClusterBubble extends TMap.DOMOverlay {
constructor(options) {
super(options);
}
onInit(options) {
this.content = options.content;
this.position = options.position;
this.customClass = options.customClass
};
onDestroy() {
this.dom.removeEventListener('click', this.onClick);
this.removeAllListeners();
}
createDOM() {
let dom = document.createElement('div');
dom.classList.add(this.customClass || 'marker');
dom.innerText = this.content;
// 监听点击事件，实现zoomOnClick
this.onClick = this.onClick.bind(this);
// pc端注册click事件，移动端注册touchend事件
dom.addEventListener('click', this.onClick);
dom.addEventListener('touchend', this.onClick);
return dom;
};
updateDOM() {
if (!this.map) {
return;
}
// 经纬度坐标转容器像素坐标
let pixel = this.map.projectToContainer(this.position);
// 使文本框中心点对齐经纬度坐标点
let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
this.dom.style.transform = `translate(${left}, ${top})`;
this.emit('dom_updated');
};
onClick() {
this.emit('click');
}
}
this.config.latlng && map.setCenter(this.config.latlng)
this.MarkerCluster = new TMap.MarkerCluster({
map, gridSize: 60,
enableDefaultStyle: false, // 关闭默认样式
geometries: points.map(e => ({
position: new TMap.LatLng(e.lat, e.lng),
content: `${e.name}`,
properties: {...e}
})) || [],
zoomOnClick: true
})
let cls = []
this.MarkerCluster.on('cluster_changed', () => {
if (this.markers.length) {
this.markers.forEach(function (item) {
item.destroy();
})
}
cls.forEach(e => e.destroy())
cls = []
let clusters = this.MarkerCluster.getClusters()
clusters.forEach((item) => {
if (item.geometries?.length > 1) {
//聚合样式
let clusterBubble = new ClusterBubble({
map,
position: item.center,
content: item.geometries.length,
customClass: 'cluster'
})
clusterBubble.on('click', () => {
map.fitBounds(item.bounds);
});
cls.push(clusterBubble)
} else {
//点标记样式
let {content} = item.geometries?.[0] || {},
overlay = new ClusterBubble({map, position: item.center, content})
overlay.on('click', () => {
this.buildPopup = true
this.building = item.geometries?.[0]?.properties || {}
})
this.markers.push(overlay)
}
});
})
return Promise.resolve()
} else {
if (count < 5) {
setTimeout(() => {
return this.getMarkerCluster(points, ++count)
}, 1000)
} else Promise.reject("加载失败")
}
},
initMap (retryTimes = 0) {
this.$nextTick(() => {
let { map, TMap } = this
if (map) {
map.setZoom(15)
} else {
if (retryTimes < 10) {
setTimeout(() => {
this.initMap(++retryTimes)
}, 500)
}
}
})
}
}
}
}
</script>
<style lang="scss" scoped>
uni-page-body{
height: 100%;
}
.AppMerchantMap {
height: 100%;
.AppMerchantMap {
height: 100%;
.grid-select {
width: 100%;
padding: 34px 32px;
box-sizing: border-box;
background: #FFF;
display: flex;
justify-content: space-between;
line-height: 44px;
color: #333;
.grid-select__right {
width: calc(100% - 140px);
text-align: right;
}
.gird-content {
::v-deep.cluster {
color: #fff;
border-radius: 50%;
height: 120px;
width: 120px;
background: radial-gradient(circle, #5088ff 50%, rgba(#5088ff, .4) 100%);
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
}
.label {
flex-shrink: 0;
width: 140px;
font-size: 32px;
}
::v-deep.marker {
color: #fff;
background: #558BFE;
padding: 0 32px;
width: fit-content;
height: 56px;
border-radius: 52px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
.value {
font-size: 28px;
.u-icon {
margin-left: 8px;
&:before {
content: " ";
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, 100%);
border: 12px solid transparent;
border-top-color: #558BFE;
}
}
}
.map-content {
width: 100%;
height: calc(100% - 110px);
}
.popup {
padding: 0 32px 16px;
.bg {
width: 64px;
height: 10px;
background: #CCC;
border-radius: 6px;
margin: 32px auto 32px auto;
* {
box-sizing: border-box;
}
.grid-info {
height: 800px;
.search {
display: flex;
position: fixed;
align-items: center;
top: 24px;
left: 50%;
z-index: 11111;
width: 718px;
height: 88px;
padding: 0 16px;
background: #FFFFFF;
box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
border-radius: 16px;
transform: translateX(-50%);
image {
width: 48px;
height: 48px;
margin-right: 16px;
}
input {
flex: 1;
font-size: 28px;
color: #666666;
}
}
.title {
font-size: 36px;
font-family: PingFang-SC-Heavy, PingFang-SC;
font-weight: 800;
color: #333;
line-height: 50px;
margin-bottom: 24px;
}
.info-flex {
padding: 26px 0 30px 0;
.map-content {
width: 100%;
border-bottom: 1px solid #D8DDE6;
line-height: 40px;
font-size: 28px;
height: 100vh;
&:last-of-type {
border-bottom: none;
}
.label {
display: inline-block;
width: 160px;
font-weight: 800;
color: #333;
}
.value {
color: #666;
font-size: 26px;
map {
width: 100%;
height: 100vh;
}
}
}
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 99999;
display: flex;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
height: 112px;
line-height: 112px;
text-align: center;
.btn {
flex: 2;
background: #1365DD;
color: #FFF;
}
}
</style>