This commit is contained in:
linfso 2025-08-15 16:52:14 +08:00
parent 467ee15584
commit d3233d9c1d
8 changed files with 31 additions and 447 deletions

View File

@ -1,82 +0,0 @@
'use strict'
import * as turf from '@turf/turf';
import { deepClone } from '@/common/custom.js'
/*
中国边界数据 来源 阿里-高德
https://datav.aliyun.com/portal/school/atlas/area_selector
*/
import chinaBoundary from './china-boundary.json';
/*
XDGeoSdk
*/
class XDGeoSdk {
geoJson = null;
geoSimpleJson = null;
chinaPolygon = null;
chinaAreaBoundary = null;
chinaAreaMainLandBoundary = null;
chinaBox = null;
static instance = null;
constructor() {
this.instance = null
this.geoJson=chinaBoundary;
this.chinaAreaBoundary=deepClone(chinaBoundary.features[0].geometry.coordinates);
this.chinaAreaMainLandBoundary=this.chinaAreaBoundary[0][0];
this.chinaPolygon = chinaBoundary.features[0].geometry;
this.chinaBox=turf.bbox(this.chinaPolygon);
var options = {tolerance: 0.01, highQuality: false};
this.geoSimpleJson = turf.simplify(this.geoJson, options);
// console.log("===>this.chinaPolygon==>",this.chinaPolygon);
// console.log("===>geoSimpleJson==>",this.geoSimpleJson);
}
static getInstance() {
if (!this.instance) {
this.instance = new XDGeoSdk()
}
return this.instance
}
getChinaGeoJson(){
return this.geoJson;
// return this.geoSimpleJson;
}
getChinaPolygon(){
return this.chinaAreaBoundary;
}
getChinaMainLandPolygon(){
return this.chinaAreaMainLandBoundary;
}
isInChina(lat,lng) {
// [minLng, minLat, maxLng, maxLat]
const bbox = this.chinaBox;
const isInBbox = lng >= bbox[0] && lng <= bbox[2] && lat >= bbox[1] && lat <= bbox[3];
if (!isInBbox) {
return false;
}
const point = turf.point([lng, lat]);
const chinaPolygon = this.chinaPolygon;
let rst=turf.booleanPointInPolygon(point, chinaPolygon);
return rst;
}
}
export default XDGeoSdk;

File diff suppressed because one or more lines are too long

View File

@ -1,16 +0,0 @@
import XDGeoSdk from './XDGeoSdk';
const xdGeoSdk = XDGeoSdk.getInstance();
export function getChinaGeoJson() {
return xdGeoSdk.getChinaGeoJson();
}
export function getChinaPolygon() {
return xdGeoSdk.getChinaPolygon();
}
export function isInChina(lat,lng) {
return xdGeoSdk.isInChina(lat,lng)
}

View File

@ -10,9 +10,9 @@
</view> </view>
</u-row> </u-row>
<view> <view>
<view v-if="showInfoBtn" @click="goto(`post/detail?billCode=${modelInfo.billCode}`)" class="com-tag-grey"> <!-- <view v-if="showInfoBtn" @click="goto(`post/detail?billCode=${modelInfo.billCode}`)" class="com-tag-grey">
运单信息 运单信息
</view> </view> -->
<tpx-text-dic v-if="!showInfoBtn" :value="modelInfo.orderStatus" :list="dicData.emis_order_status" ></tpx-text-dic> <tpx-text-dic v-if="!showInfoBtn" :value="modelInfo.orderStatus" :list="dicData.emis_order_status" ></tpx-text-dic>
</view> </view>
</u-row> </u-row>

View File

@ -1,309 +0,0 @@
<template>
<view class="map-container">
<view ref="mapContainer" id="mapContainer" class="map-view" :prop="traceList" :change:prop="mapModule.updateTraceData"></view>
</view>
</template>
<script>
// import {chinaGeo} from "@/common/geo/chinaGeo.js"
// import XDGeoSdk from '@/common/geo/XDGeoSdk';
export default {
props:{
dataList:{
type:Array
},
isSatellite:{
type:Boolean,
default: false
},
initZoom:{
type:Number,
default: 8
}
},
data() {
return {
// 传递给renderjs的数据
traceList:this.dataList,
};
},
watch:{
"dataList": {
handler (newValue, oldValue) {
this.traceList=this.dataList;
},
deep: true
},
},
methods: {
}
};
</script>
<script module="mapModule" lang="renderjs">
import * as maptalks from 'maptalks';
import dayjs from "dayjs";
export default {
data() {
return {
map: null,
lineArr:[],
marker: null,
polyline: null,
arrPoints:[],
posStart:[],
posEnd:[],
markerLayer: null,
traceLayer:null,
traceDataList:null,
containerId: `map-container-${Date.now()}-${Math.random().toString(36).substring(3,10)}`,
};
},
watch: {
},
mounted() {
// 初始化地图
this.initMap();
},
methods: {
updateTraceData(newValue, oldValue, ownerInstance, instance){
const plainData = JSON.parse(JSON.stringify(newValue));
this.traceDataList=plainData;
this.drawTrackerLine();
},
// 初始化地图
initMap() {
const that=this;
if(this.map == null){
try{
const IMAGE_VERSION="2025061801";
let tplUrl="https://gis.xdadan.com/g/m/{x}/{y}/{z}.png?v="+IMAGE_VERSION;
if(this.isSatellite){
tplUrl="https://gis.xdadan.com/g/y/{x}/{y}/{z}.png?v="+IMAGE_VERSION;
}
let option = {
crossOrigin: "Anonymous",
urlTemplate: tplUrl,
subdomains: ['0', '1', '2', '3'],
attribution: '',
}
let baseLayer = new maptalks.TileLayer('base', option)
this.map = new maptalks.Map("mapContainer", {
// 默认中心点点位
center: [118.81,32.07],
// 缩放层级
zoom: this.initZoom,
// 倾斜度
pitch: 0,
// 最小缩放层级
minZoom: 1,
// 最大缩放层级
maxZoom: 18,
fpsOnInteracting: 0,
// scaleControl: {
// 'position': {'bottom':'10px','right':'10px'},
// 'maxWidth': 100,
// 'metric': true,
// 'imperial': false
// },
// centerCross : true, // 地图中心显示红色十字符号
baseLayer:baseLayer
});
}catch(ex){
console.log("===>ex==>",ex);
}
let optV={
crossOrigin: "Anonymous",
};
this.traceLayer= new maptalks.VectorLayer('traceLayer',optV).addTo(this.map);
}
this.drawTrackerLine();
},
drawTrackerLine(){
if(this.map==null) {
return;
}
if(this.traceDataList==null){
return;
}
if(this.traceDataList.length<=0){
return ;
}
const that=this;
// 清除地图上的所有标记点
this.traceLayer.clear();
this.arrPoints=[];
this.lineArr=[];
let pointsLine=[];
let lastDayTime=null;
let lastDay=null;
let showTime=null;
let isNeedMark=0;
let isNeedAlarm = 0;
// let deviceNum=this.traceDataList[0].msisdn;
let markerBallUrl="https://lbs.jtrs56.com/static/xdico/green-ball.png";
// let deviceNum=this.dataList[0].deviceName;
for(let i=0;i<this.traceDataList.length;i++){
let itemOrig=this.traceDataList[i];
let lngOrig=itemOrig.longitude/1000000;
let latOrig=itemOrig.latitude/1000000
lastDayTime=itemOrig.createTime;
let lng=null;
let lat=null;
// if(this.layerType==1)
{
// if(isInChina(latOrig,lngOrig)){
// var gcj02Item=coordtransform.wgs84togcj02(lngOrig, latOrig);
// lng=gcj02Item[0];
// lat=gcj02Item[1];
// }else
{
lng=lngOrig;
lat=latOrig;
}
}
this.lineArr.push([lng,lat]);
let pointItem=[lng,lat];
pointsLine.push(pointItem);
this.arrPoints.push(pointItem);
}
// 起点标识
this.posStart=this.lineArr[0];
let startTimeTxt=dayjs(this.traceDataList[0].createTime).format('YYYY-MM-DD HH:mm')
// this.addTextLabel(this.traceLayer,startTimeTxt,[this.posStart[0], this.posStart[1]],[5,30]);
let startMarker = new maptalks.Marker([this.posStart[0], this.posStart[1]], {
cursor : 'pointer',
symbol: {
markerFile: "https://lbs.jtrs56.com/static/xdico/icon_start.png", // 图片地址 assets目录下的地址无法识别 --踩过坑
markerWidth: 28, // 图片大小
markerHeight: 28, // 图片大小
markerDx: 0,
markerDy: 0,
markerOpacity: 1 // 图片透明度
}
});
startMarker.setZIndex(101);
startMarker.addTo(this.traceLayer)
startMarker.on('click', function (e) {
that.showTraceInfo(startMarker,that.traceDataList[0],e);
return false;
})
this.posEnd=this.lineArr[this.lineArr.length-1];
let endTimeTxt=dayjs(this.traceDataList[this.traceDataList.length-1].createTime).format('YYYY-MM-DD HH:mm')
let endMarker = new maptalks.Marker([this.posEnd[0], this.posEnd[1]], {
cursor : 'pointer',
symbol: {
markerFile: "https://lbs.jtrs56.com/static/xdico/icon_end.png", // 图片地址 assets目录下的地址无法识别 --踩过坑
markerWidth: 28, // 图片大小
markerHeight: 28, // 图片大小
markerDx: 0,
markerDy: 0,
markerOpacity: 1 // 图片透明度
}
});
endMarker.setZIndex(101);
var line = new maptalks.LineString(this.lineArr, {
visible : true,
editable : false,
cursor : 'pointer',
draggable : false,
dragShadow : false, // display a shadow during dragging
drawOnAxis : null, // force dragging stick on a axis, can be: x, y
// 'arrowStyle' : 'classic',
// 'arrowPlacement' : 'vertex-last',
// 'markerLineWidth': 1,
// 'markerWidth': 4, // 箭头宽度
// 'markerHeight': 4, // 箭头高度
smoothness: 0.2,
symbol: {
'lineColor' : '#28F',
// 'lineColor' : '#b12d29',
'lineWidth' : 4,
'lineOpacity': 1, // 线透明度
'lineDasharray': null, // 虚线样式(如果不需要虚线则留空)
lineJoin: 'round', // miter, round, bevel
lineCap: 'round', // butt, round, square
}
})
line.setZIndex(10);
line.addTo(this.traceLayer)
this.map.fitExtent(this.traceLayer.getExtent(), 0);
},
}
};
</script>
<style scoped>
.map-container {
width: 100%;
height: 100vh;
position: relative;
}
.map-view {
width: 100%;
height: 100%;
}
.map-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
z-index: 100;
}
button {
padding: 8px 16px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
}
button:hover {
background-color: #359e75;
}
:deep .maptalks-attribution {
display: none !important;
}
</style>

View File

@ -14,11 +14,9 @@
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@turf/turf": "^7.2.0",
"coordtransform": "^2.1.2", "coordtransform": "^2.1.2",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"file-saver": "2.0.5", "file-saver": "2.0.5"
"maptalks": "^1.4.1"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [

View File

@ -5,14 +5,13 @@
<template v-slot:body> <template v-slot:body>
<div style="min-height: 100%;display: flex;flex-direction: column;"> <div style="min-height: 100%;display: flex;flex-direction: column;">
<view style="position: relative;"> <view style="position: relative;">
<maptalks-map <map
:dataList="dataList" :polyline="[...polyline]"
:latitude="map.latitude"
:longitude="map.longitude"
:scale="map.scale"
style="width: 750rpx;height: 70vh;" style="width: 750rpx;height: 70vh;"
></maptalks-map> ></map>
<!-- <map :markers="map.markers" :latitude="map.latitude" :longitude="map.longitude"
style="width: 750rpx;height: 400rpx;"
></map> -->
<view style="position: absolute;top:5px;width: 95%;padding-left: 8px;padding-right: 8px"> <view style="position: absolute;top:5px;width: 95%;padding-left: 8px;padding-right: 8px">
<view class="mp-base-block"> <view class="mp-base-block">
@ -20,7 +19,7 @@
</view> </view>
</view> </view>
<view style="position: absolute;top:60vh;width: 95%;padding-left: 8px;padding-right: 8px"> <view style="position: absolute;top:62vh;width: 95%;padding-left: 8px;padding-right: 8px">
<view class="mp-base-block blackbg" @click="makePhoneCall(modelInfo.takePieceEmployeePhone)"> <view class="mp-base-block blackbg" @click="makePhoneCall(modelInfo.takePieceEmployeePhone)">
<u-row justify="between"> <u-row justify="between">
<u-row> <u-row>
@ -40,7 +39,7 @@
</view> </view>
</div> </div>
</template> </template>
<template v-slot:footer> <!-- <template v-slot:footer>
<view class="blcok-white-noradius" style="margin-top: 0;"> <view class="blcok-white-noradius" style="margin-top: 0;">
<u-row justify="space-around"> <u-row justify="space-around">
<u-button @click="goBack()" :plain="true" size="large" shape="circle" <u-button @click="goBack()" :plain="true" size="large" shape="circle"
@ -52,19 +51,15 @@
</u-button> </u-button>
</u-row> </u-row>
</view> </view>
</template> </template> -->
</tpx-layout> </tpx-layout>
</tpx-page> </tpx-page>
</template> </template>
<script> <script>
import coordtransform from 'coordtransform'; import coordtransform from 'coordtransform';
import * as apiService from "@/common/api" import * as apiService from "@/common/api"
// import BpdSendRecieverTmp from "@/components/buns-post-detail-templates/bpd-send-reciever-tmp"
import BpdMapRecieverPanel from "@/components/buns-post-detail-templates/bpd-map-reciever-panel" import BpdMapRecieverPanel from "@/components/buns-post-detail-templates/bpd-map-reciever-panel"
import maptalksMap from "@/components/map-talks/maptalks-panel"
export default { export default {
props: { props: {
@ -75,7 +70,7 @@
return this.$store.getters.dicData return this.$store.getters.dicData
}, },
}, },
components: { BpdMapRecieverPanel,maptalksMap }, components: { BpdMapRecieverPanel },
data() { data() {
return { return {
queryOption: { queryOption: {
@ -83,25 +78,16 @@
}, },
modelInfo: {}, modelInfo: {},
dataList:[], dataList:[],
polyline: [{
width: 4,
points: [],
arrowLine: true,
color: '#28f',
}],
map: { map: {
latitude: 23.106574, //纬度 latitude: 23.106574, //纬度
longitude: 113.324587, //经度 longitude: 113.324587, //经度
scale: 13, //缩放级别 scale: 6, //缩放级别
markers: [{
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
title: '出发地------',
iconPath: this.getCdnUrl('mine/kjcha.png'),
width: 50,
height: 50,
label: {
content: '发货地址',
color: '#fff',
borderRadius: '10',
bgColor: '#B12D29',
padding: '10'
}
}]
} }
} }
}, },
@ -126,6 +112,7 @@
}); });
if (resLbs && resLbs.code === 200) { if (resLbs && resLbs.code === 200) {
let lbsRecordList=resLbs.data.lbsRecordList; let lbsRecordList=resLbs.data.lbsRecordList;
if( lbsRecordList && lbsRecordList.length>0){ if( lbsRecordList && lbsRecordList.length>0){
let currentInfo=lbsRecordList[lbsRecordList.length-1]; let currentInfo=lbsRecordList[lbsRecordList.length-1];
@ -133,11 +120,11 @@
this.map.longitude=this.cvtToWgs84(currentInfo.longitude, currentInfo.latitude)[0]; this.map.longitude=this.cvtToWgs84(currentInfo.longitude, currentInfo.latitude)[0];
this.dataList=lbsRecordList; this.dataList=lbsRecordList;
const points = lbsRecordList.map(item => ({ let points = lbsRecordList.map(item => ({
latitude: this.cvtToWgs84(item.longitude, item.latitude)[1], latitude: this.cvtToWgs84(item.longitude, item.latitude)[1],
longitude: this.cvtToWgs84(item.longitude, item.latitude)[0] longitude: this.cvtToWgs84(item.longitude, item.latitude)[0]
})); }));
this.map.polyline[0].points = points; this.polyline[0].points=points;
} }
} }

View File

@ -40,6 +40,13 @@
</view> </view>
<view class="dt-block"> <view class="dt-block">
<view class="dt-tle">
<view class="t1">物流动态</view>
<view class="t2">
<u-button @click="goto(`post/locus?billCode=${searchParam.billCode}`)" shape="circle" :plain="true" custom-style="height: 50rpx;font-size:28rpx;">查看轨迹</u-button>
</view>
</view>
<u-line margin="20rpx 0 20rpx"></u-line>
<view class="mb-20"> <view class="mb-20">
<buns-locus-pos :billCode="searchParam.billCode" ref="lcusRef"></buns-locus-pos> <buns-locus-pos :billCode="searchParam.billCode" ref="lcusRef"></buns-locus-pos>
</view> </view>