This commit is contained in:
parent
2885e6faea
commit
18b5738927
|
|
@ -44,3 +44,8 @@ export const dateCangeCrderCount = (data) => {
|
|||
export const logisticsMapCount = (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);
|
||||
|
||||
onMounted(() => {
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
default: () => []
|
||||
},
|
||||
open: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const initMap = () => {
|
||||
AMapLoader.load({
|
||||
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
Loca: {
|
||||
version: '2.0.0'
|
||||
}
|
||||
|
|
@ -32,124 +43,135 @@ onMounted(() => {
|
|||
});
|
||||
map.setPitch(30);
|
||||
|
||||
// 创建 AMap.Icon 实例：
|
||||
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), // 图标相对于标记点的位置偏移量
|
||||
});
|
||||
let geocoder = new AMap.Geocoder();
|
||||
|
||||
// 将创建的点标记添加到已有的地图实例：
|
||||
map.add(marker);
|
||||
|
||||
// 创建 Loca 实例
|
||||
var loca = new Loca.Container({
|
||||
map: map
|
||||
});
|
||||
geocoder.getLocation(props.open, function (status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
// 获取成功，result.geocodes包含了返回的经纬度信息
|
||||
let latlong = result.geocodes[0].location;
|
||||
let start = [latlong.lng, latlong.lat];
|
||||
let line = [];
|
||||
map.setCenter(start);
|
||||
|
||||
// 创建数据源
|
||||
var dataSource = new Loca.GeoJSONSource({
|
||||
// url: 'xxx.geojson', 或者使用 data 字段
|
||||
data: {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[105.441866, 28.87098],
|
||||
[105.449866, 28.87998]
|
||||
]
|
||||
// 创建 AMap.Icon 实例：
|
||||
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: start, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||
icon: icon,
|
||||
offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
|
||||
});
|
||||
|
||||
// 将创建的点标记添加到已有的地图实例：
|
||||
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",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"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]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 获取失败，可根据具体需求进行错误处理
|
||||
console.log('获取经纬度失败');
|
||||
}
|
||||
});
|
||||
|
||||
// 弧线
|
||||
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) => {
|
||||
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(() => {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const initMap = () => {
|
|||
|
||||
|
||||
let str = props.info.user_address;
|
||||
str = str.replace(/[1-10]队/, '');
|
||||
str = str.replace(/\d+队/, '');
|
||||
|
||||
if (props.info.mer_lat && props.info.mer_long) {
|
||||
let geocoder = new AMap.Geocoder({
|
||||
|
|
|
|||
|
|
@ -7,13 +7,22 @@ import { logisticsMapCount } from "@/api/index.js";
|
|||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const list = ref([]);
|
||||
const open = ref({});
|
||||
const initInfo = () => {
|
||||
logisticsMapCount({
|
||||
areaCode: appStore.delivery_address.areaCode,
|
||||
streetCode: appStore.delivery_address.streetCode,
|
||||
courier_id: appStore.delivery_address.courier_id
|
||||
}).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>
|
||||
<div class="box">
|
||||
<div class="map">
|
||||
<AMap></AMap>
|
||||
<AMap :list="list" :open="open"></AMap>
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
<div class="btn">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,26 @@
|
|||
<script setup>
|
||||
import ball from "./ball.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>
|
||||
|
||||
|
|
@ -9,7 +29,7 @@ import centerMap from "./centerMap.vue";
|
|||
<div class="ball">
|
||||
<ball class="ball1"></ball>
|
||||
</div>
|
||||
<centerMap class="c-map"></centerMap>
|
||||
<centerMap class="c-map" :list="list"></centerMap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,15 @@ import longma from "@/assets/json/longma.json";
|
|||
import naxi from "@/assets/json/naxi.json";
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const mapType = reactive({
|
||||
name: '',
|
||||
json: ''
|
||||
|
|
@ -30,36 +36,14 @@ const changeType = (name = 'luxian') => {
|
|||
if (name == 'naxi') mapType.json = naxi;
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
|
||||
]
|
||||
let dataValue = []
|
||||
|
||||
const customFormatter = (params) => {
|
||||
// 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 => {
|
||||
item.label = {
|
||||
show: true, // 显示标签
|
||||
|
|
@ -279,13 +263,14 @@ const initMap = () => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
changeType(appStore.map_info);
|
||||
initDateValue();
|
||||
dataValue = props.list;
|
||||
changeType('xuyong');
|
||||
initDataValue();
|
||||
initMap();
|
||||
nextTick(() => {
|
||||
mitt.on('map_info', e => {
|
||||
changeType(e.pinyin);
|
||||
initDateValue();
|
||||
initDataValue();
|
||||
initMap();
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue