311 lines
8.2 KiB
Vue
311 lines
8.2 KiB
Vue
<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>
|
||
|
||
<!-- renderjs部分，负责处理地图DOM操作 -->
|
||
<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>
|