tdt-map-vue2 0.1.3 → 0.1.4

package/README.md

@@ -59,6 +59,7 @@ Vue.use(TdtMap, {
 | titleKeys | string          | 否   | -      | 指定 infos 中哪个数据有悬浮 title                     |
 | infoBtn   | {text:'xxx'}    | 否   | -      | 添加按钮，会触发全局的 mapClick 事件                  |
 | labelFn   | function        | 否   | -      | 自定义 Label，返回{content,style,anchor}，高优先级    |
+| isCustomMarker   | boolean        | 否   | -      | 是否自定义 marker，默认 false，为 true 时，会使用 initTianDiMapMarker 方法渲染 marker |
 
 - labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、style(对应样式)、anchor(label 偏移量)的对象
 

package/lib/BaseMap.vue

@@ -9,6 +9,7 @@
 import gcoord from "gcoord";
 import { installTMap } from "./utils/installMap";
 import installControls from "./utils/controls";
+import { initTianDiMapMarker } from "./utils/tianDiMapMarker";
 import markerIcon from "./map1.svg";
 
 export default {
@@ -77,6 +78,16 @@ export default {
       type: Number,
       default: 20,
     },
+    positionControl: {
+      // 是否显示缩放平移控件
+      type: Boolean,
+      default: true,
+    },
+    zoomControl: {
+      // 是否显示比例尺控件
+      type: Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -178,7 +189,7 @@ export default {
       mapInstance.disableInertia();
 
       // 初始化控制器
-      installControls(mapInstance, TMap);
+      installControls({map:mapInstance, T:TMap,positionControl:this.positionControl,zoomControl:this.zoomControl});
       mapInstance.addEventListener("click", this.removeRichInfo); // TODO
       this.addEvents();
       this.initAllMarkers(this.datas);
@@ -226,23 +237,10 @@ export default {
         this.ifChangeViewEmit = false;
 
         const bounds = this.map.getBounds(); // 获取地图可视区域
-        const [lng_sw, lat_sw] = this.gcoordTransform(
-          [bounds.kq.lng, bounds.kq.lat],
-          this.coordTrans?.to,
-          this.coordTrans?.from
-        );
-        const [lng_ne, lat_ne] = this.gcoordTransform(
-          [bounds.Lq.lng, bounds.Lq.lat],
-          this.coordTrans?.to,
-          this.coordTrans?.from
-        );
+       
 
         this.$emit("changeView", {
-          bounds: {
-            ...bounds,
-            sw: { lng: lng_sw, lat: lat_sw },
-            ne: { lng: lng_ne, lat: lat_ne },
-          },
+          bounds,
           zoom: this.map.getZoom(),
           location,
         });
@@ -264,6 +262,7 @@ export default {
 
     // 分批次渲染管线
     renderPipelinesInBatches(lines) {
+      console.log("----------renderPipelinesInBatches--------",lines);
       if (!lines || lines.length === 0) return;
       let pipelines = JSON.parse(JSON.stringify(lines));
       this.removeAllPipelines();
@@ -276,15 +275,7 @@ export default {
         );
         const batch = pipelines.slice(batchIndex, endIndex);
         batch.forEach((pipe) => {
-          const lngLatArr = pipe.coords.map(
-            (c) => new this.TMapGL.LngLat(c[0], c[1])
-          );
-          const polyline = new this.TMapGL.Polyline(lngLatArr, {
-            color: pipe.color,
-            weight: 3,
-            opacity: 0.7,
-            lineJoin: "round",
-          });
+          const polyline = this.getLine(pipe);
           this.map.addOverLay(polyline);
           // 存储管线图层，便于后续操作
           pipe.layer = polyline;
@@ -295,12 +286,30 @@ export default {
           // 异步渲染下一批，避免阻塞主线程
           requestAnimationFrame(renderBatch);
         } else {
-          console.log("所有管线渲染完成，总数：", pipelines.length);
-          this.$emit("renderLine");
+          console.log("所有管线渲染完成，总数：", pipelines.length,pipelines);
+          this.$emit("renderLine",this.pipelineLayers);
         }
       };
       renderBatch();
     },
+    getLine(pipe) {
+      const lngLatArr = pipe.points.map(
+        (c) => {
+          const coord = this.gcoordTransform(c)
+          return new this.TMapGL.LngLat(...coord)
+        }
+      );
+      console.log('--------getLine------',pipe,lngLatArr);
+      
+      const polyline = new this.TMapGL.Polyline(lngLatArr, pipe.lineOptions);
+      polyline.addEventListener("mouseover", (e) => {
+          this.$emit("lineMouseover", { line:polyline,data:pipe, e });
+      }); 
+      polyline.addEventListener("mouseout", (e) => {
+          this.$emit("lineMouseout", { line:polyline,data:pipe, e });
+      });
+      return polyline;
+    },
 
     // 清空所有管线
     removeAllPipelines() {
@@ -362,13 +371,20 @@ export default {
       const point = new this.TMapGL.LngLat(...result);
 
       if (data.labelFn) {
-        const labelRes = data.labelFn(data, point);
-        const label = new this.TMapGL.Label({
-          text: labelRes.content,
-          position: point,
-          offset: new this.TMapGL.Point(...(labelRes.anchor || [0, 0])),
-        });
-        marker = label;
+        if(data.isCustomMarker) {
+          marker = initTianDiMapMarker({
+            map: this.map, 
+            data,
+            point,
+          })
+        }else {
+          const labelRes = data.labelFn(data, point);
+          const label = new this.TMapGL.Label({
+            text: labelRes.content,
+            position: point,
+            offset: new this.TMapGL.Point(...(labelRes.anchor || [0, 0])),
+          });
+          marker = label;}
       } else {
         const icon = new this.TMapGL.Icon({
           iconUrl: data.img || markerIcon,
@@ -376,6 +392,7 @@ export default {
         });
         marker = new this.TMapGL.Marker(point, { icon });
       }
+      if(data.noClick) return
 
       marker.addEventListener("click", (e) => {
         setTimeout(() => {

package/lib/utils/controls.js

@@ -1,14 +1,18 @@
-export default (map, T) => {
-  // 创建缩放平移控件
-  const control = new T.Control.Zoom()
-  map.addControl(control)
-  const controlPosition = window.T_ANCHOR_BOTTOM_RIGHT
-  control.setPosition(controlPosition)
-
-  // 创建比例尺控件
-  const scale = new T.Control.Scale({ position: window.T_ANCHOR_BOTTOM_RIGHT })
-  setTimeout(() => {
-    scale.setOffset({ x: -60, y: 60 })
-  }, 0)
-  map.addControl(scale)
+export default ({map, T, positionControl = true, zoomControl = true}) => {
+  if(positionControl) {
+    // 创建缩放平移控件
+    const control = new T.Control.Zoom()
+    map.addControl(control)
+    const controlPosition = window.T_ANCHOR_BOTTOM_RIGHT
+    control.setPosition(controlPosition)
+  }
+  if(zoomControl) { 
+    // 创建比例尺控件
+    const scale = new T.Control.Scale({ position: window.T_ANCHOR_BOTTOM_RIGHT })
+    setTimeout(() => {
+      scale.setOffset({ x: -60, y: 60 })
+    }, 0)
+    map.addControl(scale)
+  }
+  
 }

package/lib/utils/tianDiMapMarker.js

@@ -0,0 +1,103 @@
+// 天地图自定义覆盖物实现方案
+// 对应百度地图的 BMapGL.CustomOverlay 功能
+
+/**
+ * 创建天地图自定义覆盖物
+ * @param {Object} options - 配置项
+ * @param {Object} options.map - 天地图实例
+ * @param {Array} options.data - 覆盖物数据
+ * @param {Array} options.point - marker坐标
+ * @param {Function} options.data.labelFn - 生成DOM的函数
+ * @param {Array} options.data.anchor - 锚点偏移量
+ * @returns {Object} 自定义覆盖物实例
+ */
+export function initTianDiMapMarker({
+  map,
+  data,
+  point
+}) {
+  if (!data.lng || !data.lat) {
+    return null;
+  }
+
+  // 创建自定义覆盖物类
+  const CustomOverlay = T.Overlay.extend({
+    // 初始化方法
+    initialize: function(map) {
+      console.log("----------initialize----------------",map);
+      this.map = map;
+      this.lnglat = point;
+      this.data = data;
+      // return this.onAdd(map);
+    },
+    
+    onAdd: function(map) {
+      console.log("----------onAdd----------------");
+      // 创建DOM元素
+      const div = (this._div = document.createElement('div'));
+      div.style.position = 'absolute';
+      div.style.zIndex = 1000;
+      
+      // 生成自定义DOM内容
+      if (this.data.labelFn) {
+        const domElement = this.data.labelFn(this.data);
+        div.appendChild(domElement);
+      }
+      
+      // 添加到覆盖物层
+      map.getPanes().overlayPane.appendChild(div);
+      
+      // 执行绘制
+      this.update();
+      
+      return div;
+    },
+    
+    onRemove: function () {
+      console.log("----------onRemove----------------",this._div);
+      var parent = this._div.parentNode;
+      if (parent) {
+          parent.removeChild(this._div);
+          this.map = null;
+          this._div = null;
+      }
+    },
+
+    // 绘制方法
+    update: function() {
+      console.log("----------update----------------",this.lnglat,this.data);
+      // 获取地理坐标转换为容器像素坐标
+      const pixel = this.map.lngLatToLayerPoint(this.lnglat);
+      const anchor = this.data.anchor || [0, 0];
+      console.log("----------draw----------------",this.lnglat,pixel,anchor);
+      
+      
+      // 设置DOM元素位置
+      this._div.style.left = (pixel.x + anchor[0]) + 'px';
+      this._div.style.top = (pixel.y + anchor[1]) + 'px';
+    }
+  });
+
+  // 创建自定义覆盖物实例
+  const customOverlay = new CustomOverlay(map);
+
+  return customOverlay;
+}
+
+
+// 默认导出
+export default ({
+  map,
+  data,
+  point
+}) => {
+  const overlay = initTianDiMapMarker({
+    map,
+    data,
+    point
+  });
+  
+  return {
+    overlay
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdt-map-vue2",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "基于天地图封装的组件",
   "main": "index.js",
   "scripts": {