This commit is contained in:
weipengfei 2023-12-06 10:48:18 +08:00
parent 2885e6faea
commit 18b5738927
6 changed files with 184 additions and 143 deletions

View File

@ -43,4 +43,9 @@ export const dateCangeCrderCount = (data) => {
// 地图配送信息 // 地图配送信息
export const logisticsMapCount = (data) => { export const logisticsMapCount = (data) => {
return axios.get('dataview/logistics_map_count', { params: data }); return axios.get('dataview/logistics_map_count', { params: data });
}
// 首页地图镇级统计信息
export const townMapCoun = (data) => {
return axios.get('dataview/town_map_count', { params: data });
} }

View File

@ -6,11 +6,22 @@ let map = null;
const loading = ref(true); const loading = ref(true);
onMounted(() => { const props = defineProps({
list: {
type: Object,
default: () => []
},
open: {
type: String,
default: ''
}
})
const initMap = () => {
AMapLoader.load({ AMapLoader.load({
key: "4f8f55618010007147aab96fc72bb408", // WebKey load key: "4f8f55618010007147aab96fc72bb408", // WebKey load
version: "2.0", // JSAPI 1.4.15 version: "2.0", // JSAPI 1.4.15
plugins: [], // 使'AMap.Scale' plugins: ['AMap.Geocoder'], // 使'AMap.Scale'
Loca: { Loca: {
version: '2.0.0' version: '2.0.0'
} }
@ -32,124 +43,135 @@ onMounted(() => {
}); });
map.setPitch(30); map.setPitch(30);
// AMap.Icon let geocoder = new AMap.Geocoder();
const icon = new AMap.Icon({
size: new AMap.Size(50, 60), //
// vue3/vite require
image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href, // Icon
imageSize: new AMap.Size(50, 60), //
imageOffset: new AMap.Pixel(0, 0)
});
// Marker
const marker = new AMap.Marker({
position: new AMap.LngLat(105.441866, 28.87098), // [116.39, 39.9]
icon: icon,
offset: new AMap.Pixel(-25, -60), //
});
//
map.add(marker);
// Loca geocoder.getLocation(props.open, function (status, result) {
var loca = new Loca.Container({ if (status === 'complete' && result.info === 'OK') {
map: map // result.geocodes
}); let latlong = result.geocodes[0].location;
let start = [latlong.lng, latlong.lat];
let line = [];
map.setCenter(start);
// // AMap.Icon
var dataSource = new Loca.GeoJSONSource({ const icon = new AMap.Icon({
// url: 'xxx.geojson', 使 data size: new AMap.Size(50, 60), //
data: { // vue3/vite require
"type": "FeatureCollection", image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href, // Icon
"features": [ imageSize: new AMap.Size(50, 60), //
{ imageOffset: new AMap.Pixel(0, 0)
"type": "Feature", });
"properties": {}, // Marker
"geometry": { const marker = new AMap.Marker({
"type": "LineString", position: start, // [116.39, 39.9]
"coordinates": [ icon: icon,
[105.441866, 28.87098], offset: new AMap.Pixel(-25, -60), //
[105.449866, 28.87998] });
]
//
map.add(marker);
props.list.forEach(item => {
geocoder.getLocation(item, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// result.geocodes
let geocodes = result.geocodes[0].location;
line.push([geocodes.lng, geocodes.lat]);
if (line.length == props.list.length) {
initLine(start, line);
}
} else {
//
console.log('获取经纬度失败');
} }
}, })
{ })
"type": "Feature", } else {
"properties": {}, //
"geometry": { console.log('获取经纬度失败');
"type": "LineString", }
"coordinates": [
[105.441866, 28.87098],
[105.440866, 28.87658]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[105.441866, 28.87098],
[105.435866, 28.87658]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[105.441866, 28.87098],
[105.43, 28.87]
]
}
}
]
},
}); });
// 线
var pulseLink = new Loca.PulseLinkLayer({
// loca,
zIndex: 30,
opacity: 1,
visible: true,
zooms: [6, 22],
depth: true,
});
pulseLink.setSource(dataSource)
pulseLink.setStyle({
unit: 'meter',
dash: [80, 0, 80, 0],
lineWidth: function () {
return [30, 5];
},
height: function (index, feat) {
return feat.distance / 3 + 10;
},
// altitude: 1000,
smoothSteps: 30,
speed: function (index, prop) {
// return 1 + Math.random() * 200;
return 200;
},
flowLength: 300,
lineColors: function (index, feat) {
return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
},
maxHeightScale: 0.4, //
headColor: 'rgba(91, 219, 246, 1)',
trailColor: 'rgba(255, 255,0,0)',
});
loca.add(pulseLink);
loca.animate.start();
//
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
}); });
}
const initLine = (start = [], line = []) => {
let features = [];
line.forEach((item => {
features.push({
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
start,
item
]
}
},)
}))
// Loca
let loca = new Loca.Container({
map: map
});
//
let dataSource = new Loca.GeoJSONSource({
// url: 'xxx.geojson', 使 data
data: {
"type": "FeatureCollection",
"features": features
},
});
// 线
let pulseLink = new Loca.PulseLinkLayer({
// loca,
zIndex: 30,
opacity: 1,
visible: true,
zooms: [6, 22],
depth: true,
});
pulseLink.setSource(dataSource)
pulseLink.setStyle({
unit: 'meter',
dash: [80, 0, 80, 0],
lineWidth: function () {
return [30, 5];
},
height: function (index, feat) {
return feat.distance / 3 + 10;
},
// altitude: 1000,
smoothSteps: 30,
speed: function (index, prop) {
// return 1 + Math.random() * 200;
return 200;
},
flowLength: 300,
lineColors: function (index, feat) {
return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
},
maxHeightScale: 0.4, //
headColor: 'rgba(91, 219, 246, 1)',
trailColor: 'rgba(255, 255,0,0)',
});
//
loca.add(pulseLink);
loca.animate.start();
}
onMounted(() => {
initMap();
}); });
onUnmounted(() => { onUnmounted(() => {

View File

@ -48,7 +48,7 @@ const initMap = () => {
let str = props.info.user_address; let str = props.info.user_address;
str = str.replace(/[1-10]队/, ''); str = str.replace(/\d+队/, '');
if (props.info.mer_lat && props.info.mer_long) { if (props.info.mer_lat && props.info.mer_long) {
let geocoder = new AMap.Geocoder({ let geocoder = new AMap.Geocoder({

View File

@ -7,13 +7,22 @@ import { logisticsMapCount } from "@/api/index.js";
const appStore = useAppStore(); const appStore = useAppStore();
const list = ref([]);
const open = ref({});
const initInfo = () => { const initInfo = () => {
logisticsMapCount({ logisticsMapCount({
areaCode: appStore.delivery_address.areaCode, areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode, streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id courier_id: appStore.delivery_address.courier_id
}).then(res => { }).then(res => {
console.log(res); res.data.latestTenOrder.forEach(item => {
list.value.push(item.receiver_address.replace(/\d+队/, ''))
})
// 使, , \d+5353
// list.value[0] += '';
// list.value[1] += '';
// list.value[2] += ' ';
open.value = res.data.latestOrder.mer_address;
}) })
} }
@ -30,7 +39,7 @@ onMounted(() => {
<template> <template>
<div class="box"> <div class="box">
<div class="map"> <div class="map">
<AMap></AMap> <AMap :list="list" :open="open"></AMap>
</div> </div>
<div class="border"></div> <div class="border"></div>
<div class="btn"> <div class="btn">

View File

@ -1,6 +1,26 @@
<script setup> <script setup>
import ball from "./ball.vue"; import ball from "./ball.vue";
import centerMap from "./centerMap.vue"; import centerMap from "./centerMap.vue";
import { townMapCoun } from "@/api/index.js";
import { useAppStore } from "@/store/app.js"
import { onMounted, ref } from "vue";
const appStore = useAppStore();
const list = ref(null)
const initData = () => {
townMapCoun({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode,
}).then((res) => {
list.value = res.data.townList;
})
}
onMounted(() => {
initData()
})
</script> </script>
@ -9,7 +29,7 @@ import centerMap from "./centerMap.vue";
<div class="ball"> <div class="ball">
<ball class="ball1"></ball> <ball class="ball1"></ball>
</div> </div>
<centerMap class="c-map"></centerMap> <centerMap class="c-map" :list="list"></centerMap>
</div> </div>
</template> </template>

View File

@ -11,9 +11,15 @@ import longma from "@/assets/json/longma.json";
import naxi from "@/assets/json/naxi.json"; import naxi from "@/assets/json/naxi.json";
import { useAppStore } from "@/store/app.js"; import { useAppStore } from "@/store/app.js";
const appStore = useAppStore(); const appStore = useAppStore();
const props = defineProps({
list: {
type: Object,
default: () => []
}
})
const mapType = reactive({ const mapType = reactive({
name: '', name: '',
json: '' json: ''
@ -30,36 +36,14 @@ const changeType = (name = 'luxian') => {
if (name == 'naxi') mapType.json = naxi; if (name == 'naxi') mapType.json = naxi;
} }
let dataValue = [ let dataValue = []
{
name: '测试一', value: [105.38, 29.15],
store: 2065, team: 33,
},
{
name: '测试二', value: [105.62, 29.05],
store: 665, team: 895,
},
{
name: '测试三', value: [105.55, 29.10],
store: 66, team: 5422,
},
{
name: '测试四', value: [105.70, 29.23],
store: 9887, team: 1562,
},
{
name: '泸县', value: [105.372029, 29.141426],
store: 9999, team: 1000,
},
]
const customFormatter = (params) => { const customFormatter = (params) => {
// console.log(params.data); // console.log(params.data);
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}` return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
} }
const initDateValue = () => { const initDataValue = () => {
dataValue.forEach(item => { dataValue.forEach(item => {
item.label = { item.label = {
show: true, // show: true, //
@ -279,13 +263,14 @@ const initMap = () => {
} }
onMounted(() => { onMounted(() => {
changeType(appStore.map_info); dataValue = props.list;
initDateValue(); changeType('xuyong');
initDataValue();
initMap(); initMap();
nextTick(() => { nextTick(() => {
mitt.on('map_info', e => { mitt.on('map_info', e => {
changeType(e.pinyin); changeType(e.pinyin);
initDateValue(); initDataValue();
initMap(); initMap();
}) })
}) })