From 467ee15584edb6228288860ddd423a518d462931 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Fri, 15 Aug 2025 14:54:16 +0800
Subject: [PATCH] md

---
 components/map-talks/maptalks-panel.vue | 309 ++++++++++++++++++++++++
 1 file changed, 309 insertions(+)
 create mode 100644 components/map-talks/maptalks-panel.vue

diff --git a/components/map-talks/maptalks-panel.vue b/components/map-talks/maptalks-panel.vue
new file mode 100644
index 0000000..6135e3a
--- /dev/null
+++ b/components/map-talks/maptalks-panel.vue
@@ -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>