feat: 新增鼠标点击多边形下载

README.md

@@ -18,7 +18,7 @@
 npm install
 
 # 热更新服务
-npm run watch
+npm run dev / npm run watch
 
 # 构建web
 npm run build

package.json

@@ -17,7 +17,8 @@
     "pretest": "npm run build",
     "test": "node tests/app.spec.js",
     "watch": "node scripts/watch.js",
-    "lint": "eslint . --ext js,ts,vue"
+    "lint": "eslint . --ext js,ts,vue",
+    "dev": "npm run watch"
   },
   "browserslist": [
     "Chrome 96"

packages/renderer/src/components/Home.vue

@@ -132,7 +132,7 @@ export default defineComponent({
         this.hideDrawTips();
         this._drawStartInfo = window.$notification.create({
           content: '已开启矩形绘制，右键下载瓦片',
-          duration: 5000,
+          duration: 10000,
         });
         map.startDraw();
       } else {
@@ -196,7 +196,9 @@ export default defineComponent({
       // 添加区域至地图
       const {option, geojson} = data;
       console.log(option);
-      map.addGeometry(geojson);
+      map.addGeometry(geojson, true, () => {
+        this.showSave();
+      });
       map.fitExtent();
     },
     showGrid(val) {

packages/renderer/src/utils/t-map.js

@@ -23,6 +23,9 @@ class TMap{
       zoomControl : true, // 缩放控件
       scaleControl : true, // 比例尺控件
       fog: false,
+      dragRotatePitch: false,
+      dragRotate: false,
+      dragPitch: false,
     });
     this._vectorLayer = new maptalks.VectorLayer('vector').addTo(map);
     this.map = map;
@@ -118,16 +121,43 @@ class TMap{
     }
   }
   // 添加geojson至地图
-  addGeometry(geojson) {
+  addGeometry(geojson, events = false, cb = null) {
     const geometry = maptalks.GeoJSON.toGeometry(geojson, geo => {
-      geo.setSymbol({
+      const polygonStyle = {
         lineColor: '#34495e',
         lineWidth: 2,
         polygonFill: 'rgb(135,196,240)',
         polygonOpacity: 0.6,
-      });
+      };
+      const labelStyle = {
+        'textName'  : '点击下载',
+        'textFill' : '#34495e',
+        'textPlacement' : 'polygon',
+        'textSize'  : 16,
+      };
+      if (geo.getType() === 'MultiPolygon' && geo.getGeometries().length > 1) {
+        geo.setSymbol({
+          ...polygonStyle,
+        });
+        geo.getGeometries()[0].setSymbol({
+          ...polygonStyle,
+          ...labelStyle,
+        });
+      } else {
+        geo.setSymbol({
+          ...polygonStyle,
+          ...labelStyle,
+        });
+      }
     });
     this._vectorLayer.addGeometry(geometry);
+
+    if (events && geometry && geometry.length > 0) {
+      geometry[0].on('click', (event) => {
+        if (typeof cb === 'function') cb(event);
+      });
+    }
+
   }
   // 自动适应地图范围
   fitExtent() {