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>
|