tdt-map-vue2 0.1.4 → 0.1.6

package/README.md

@@ -37,8 +37,10 @@ Vue.use(TdtMap, {
 | viewDatas         | array          | 否   | []          | 数据，格式同 datas                          |
 | viewTimer         | number         | 否   | 800         | 地图视图改变防抖毫秒数                     |
 | viewLocation      | boolean        | 否   | false       | changeView 是否携带城市地址信息            |
+| positionControl      | boolean        | 否   | true       | 是否显示缩放平移控件            |
+| zoomControl      | boolean        | 否   | true       | 是否显示地图缩放控件            |
 | tk                | string         | 否   | -           | 天地图 tk                                |
-| center            | number[]       | 否   | 杭州经纬度  | 地图 center                                |
+| center            | number[]       | 否   | 天安门经纬度  | 地图 center                                |
 | zoom              | number         | 否   | 15          | 地图 zoom                                  |
 | mapOptions        | object         | 否   | -           | 百度地图初始化参数 minZoom/maxZoom/mapType |
 | denyRefresh      | boolean        | 否   | false       | 拒绝地图刷新，即地图移动或 zoom 改变不会触发 changeView 事件 |

package/lib/BaseMap.vue

@@ -22,7 +22,7 @@ export default {
     },
     center: {
       type: Array,
-      default: () => ["120.14912421539132", "30.183802187197283"],
+      default: () => ['116.404','39.915'],
     },
     zoom: {
       type: Number,
@@ -112,7 +112,7 @@ export default {
   },
 
   mounted() {
-    console.log("----------initMap----------");
+    // console.log("----------initMap----------");
     // 使用 props.tk，如果为空则使用全局配置的 tk
     installTMap(this.initMap, this.tk);
   },
@@ -142,7 +142,7 @@ export default {
     },
     lines: {
       handler() {
-        console.log("----------props.lines------------");
+        // console.log("----------props.lines------------");
 
         this.removeAllPipelines();
         this.initAllLines(this.lines);
@@ -181,12 +181,21 @@ export default {
       });
       this.map = mapInstance;
 
+      var globalSw = new TMap.LngLat(-1000, -90); // 全球西南角：西经180，南纬90
+      var globalNe = new TMap.LngLat(1000, 90);  // 全球东北角：东经180，北纬90
+      var globalBounds = new TMap.LngLatBounds(globalSw, globalNe);
+      mapInstance.setMaxBounds(globalBounds); // 拖拽超出全球范围会自动弹回
+
+      // 2. 设置最小缩放等级为3（核心，无法缩放到3级以下）
+      mapInstance.setMinZoom(3);
+
       const result = this.gcoordTransform(this.center);
       const point = new TMap.LngLat(...result);
       mapInstance.centerAndZoom(point, this.zoom);
       mapInstance.enableScrollWheelZoom();
       mapInstance.enableDoubleClickZoom();
       mapInstance.disableInertia();
+      
 
       // 初始化控制器
       installControls({map:mapInstance, T:TMap,positionControl:this.positionControl,zoomControl:this.zoomControl});
@@ -262,7 +271,7 @@ export default {
 
     // 分批次渲染管线
     renderPipelinesInBatches(lines) {
-      console.log("----------renderPipelinesInBatches--------",lines);
+      // console.log("----------renderPipelinesInBatches--------",lines);
       if (!lines || lines.length === 0) return;
       let pipelines = JSON.parse(JSON.stringify(lines));
       this.removeAllPipelines();
@@ -286,7 +295,7 @@ export default {
           // 异步渲染下一批，避免阻塞主线程
           requestAnimationFrame(renderBatch);
         } else {
-          console.log("所有管线渲染完成，总数：", pipelines.length,pipelines);
+          // console.log("所有管线渲染完成，总数：", pipelines.length,pipelines);
           this.$emit("renderLine",this.pipelineLayers);
         }
       };
@@ -299,7 +308,7 @@ export default {
           return new this.TMapGL.LngLat(...coord)
         }
       );
-      console.log('--------getLine------',pipe,lngLatArr);
+      // console.log('--------getLine------',pipe,lngLatArr);
       
       const polyline = new this.TMapGL.Polyline(lngLatArr, pipe.lineOptions);
       polyline.addEventListener("mouseover", (e) => {
@@ -330,7 +339,7 @@ export default {
 
     // 线段管理
     initAllLines(lines) {
-      console.log("----------渲染管线initAllLines--------");
+      // console.log("----------渲染管线initAllLines--------");
 
       this.renderPipelinesInBatches(lines);
     },
@@ -387,8 +396,9 @@ export default {
           marker = label;}
       } else {
         const icon = new this.TMapGL.Icon({
-          iconUrl: data.img || markerIcon,
-          iconSize: new this.TMapGL.Point(38, 54),
+          iconUrl: data.icon || markerIcon,
+          iconSize: new this.TMapGL.Point(...(data.iconSize || [30, 30])),
+          iconAnchor: new this.TMapGL.Point(...(data.iconAnchor || [0, 0])),
         });
         marker = new this.TMapGL.Marker(point, { icon });
       }
@@ -399,6 +409,12 @@ export default {
           this.$emit("markerClick", { marker, data, e });
         }, 0);
       });
+      marker.addEventListener("mouseover", (e) => {
+          this.$emit("markerMouseover", { marker, data, e });
+      });
+      marker.addEventListener('mouseout',e => {
+        this.$emit("markerMouseout", { marker, data, e })
+      })
 
       return { marker };
     },

package/package.json

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