This commit is contained in:
parent
2885e6faea
commit
18b5738927
|
@ -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 });
|
||||||
}
|
}
|
|
@ -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", // 申请好的Web端开发者Key,首次调用 load 时必填
|
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key,首次调用 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(() => {
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue