From 18b5738927940f24c1eb2033d6dadb45c9ec6fc5 Mon Sep 17 00:00:00 2001 From: weipengfei <2187978347@qq.com> Date: Wed, 6 Dec 2023 10:48:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.js | 5 + src/view/delivery/components/AMap.vue | 242 ++++++++++++---------- src/view/delivery/components/AMapLeft.vue | 2 +- src/view/delivery/components/center.vue | 13 +- src/view/index/components/centerItem1.vue | 22 +- src/view/index/components/centerMap.vue | 43 ++-- 6 files changed, 184 insertions(+), 143 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index e2eb4fa..4d61c74 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -43,4 +43,9 @@ 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 }); } \ No newline at end of file diff --git a/src/view/delivery/components/AMap.vue b/src/view/delivery/components/AMap.vue index 68f3a9f..2017edc 100644 --- a/src/view/delivery/components/AMap.vue +++ b/src/view/delivery/components/AMap.vue @@ -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(() => { diff --git a/src/view/delivery/components/AMapLeft.vue b/src/view/delivery/components/AMapLeft.vue index 166c1c4..9e444cf 100644 --- a/src/view/delivery/components/AMapLeft.vue +++ b/src/view/delivery/components/AMapLeft.vue @@ -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({ diff --git a/src/view/delivery/components/center.vue b/src/view/delivery/components/center.vue index 994f94a..9ce79b8 100644 --- a/src/view/delivery/components/center.vue +++ b/src/view/delivery/components/center.vue @@ -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(() => { diff --git a/src/view/index/components/centerMap.vue b/src/view/index/components/centerMap.vue index 4ac7a02..05c90a2 100644 --- a/src/view/index/components/centerMap.vue +++ b/src/view/index/components/centerMap.vue @@ -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(); }) })