md
This commit is contained in:
linfso
parent
faaa04d1e6
commit
467ee15584
309
components/map-talks/maptalks-panel.vue
Normal file
309
components/map-talks/maptalks-panel.vue
Normal file
@ -0,0 +1,309 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user