feat: paintBrushTool

SoulLyoko · Nov 9, 2021 · fef1a6c · fef1a6c
1 parent 04faddc
commit fef1a6c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 4 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -3,5 +3,5 @@
 
 npm run cp
 # npm run dts
-git add .
+git add
 npx lint-staged --allow-empty $1
diff --git a/docs/.vitepress/components/demo-mousetool/index.vue b/docs/.vitepress/components/demo-mousetool/index.vue
@@ -4,12 +4,14 @@
   <button @click="openTool('polylineTool')">画线</button>
   <button @click="openTool('rectangleTool')">画矩形</button>
   <button @click="openTool('circleTool')">画圆</button>
+  <button @click="openTool('paintBrushTool')">画笔</button>
   <br />
   <button @click="clearTool('markTool')">清除标点</button>
   <button @click="clearTool('polygonTool')">清除面</button>
   <button @click="clearTool('polylineTool')">清除线</button>
   <button @click="clearTool('rectangleTool')">清除矩形</button>
   <button @click="clearTool('circleTool')">清除圆</button>
+  <button @click="clearTool('paintBrushTool')">清除画笔</button>
   <button @click="clearTool()">清除全部</button>
   <div class="mapDiv">
     <tdt-map :center="state.center" :zoom="state.zoom">

diff --git a/packages/mousetool/types.ts b/packages/mousetool/types.ts
@@ -9,6 +9,7 @@ export interface ToolInstances {
   polylineTool?: T.PolylineTool;
   rectangleTool?: T.RectangleTool;
   circleTool?: T.CircleTool;
+  paintBrushTool?: T.PaintBrushTool;
 }
 
 export interface ToolEvents {

diff --git a/packages/mousetool/use/const.ts b/packages/mousetool/use/const.ts
@@ -12,7 +12,9 @@ export const NATIVE_PROPS = {
   /** 矩形的配置项 */
   rectangleTool: { type: Object as PropType<T.RectangleToolOptions>, default: () => ({}) },
   /** 圆形的配置项 */
-  circleTool: { type: Object as PropType<T.CircleToolOptions>, default: () => ({}) }
+  circleTool: { type: Object as PropType<T.CircleToolOptions>, default: () => ({}) },
+  /** 画笔的配置项 */
+  paintBrushTool: { type: Object as PropType<T.PaintBrushToolOptions>, default: () => ({}) }
 };
 
 export const OTHER_PROPS = {};
@@ -35,7 +37,8 @@ export const OTHER_EVENTS = {
       e.polygonTool instanceof T.PolygonTool &&
       e.polylineTool instanceof T.PolylineTool &&
       e.rectangleTool instanceof T.RectangleTool &&
-      e.circleTool instanceof T.CircleTool
+      e.circleTool instanceof T.CircleTool &&
+      e.paintBrushTool instanceof T.PaintBrushTool
     );
   }
 };

diff --git a/packages/mousetool/use/init.ts b/packages/mousetool/use/init.ts
@@ -3,7 +3,7 @@ import { Props } from "./";
 import { toIcon } from "../../utils";
 
 export function useInit(props: Props, map: T.Map) {
-  const { markTool, polygonTool, polylineTool, rectangleTool, circleTool } = props;
+  const { markTool, polygonTool, polylineTool, rectangleTool, circleTool, paintBrushTool } = props;
   const instances: ToolInstances = {};
   if (markTool) {
     if (markTool.icon) {
@@ -19,5 +19,6 @@ export function useInit(props: Props, map: T.Map) {
   polylineTool && (instances.polylineTool = new T.PolylineTool(map, polylineTool));
   rectangleTool && (instances.rectangleTool = new T.RectangleTool(map, rectangleTool));
   circleTool && (instances.circleTool = new T.CircleTool(map, circleTool));
+  paintBrushTool && (instances.paintBrushTool = new T.PaintBrushTool(map, paintBrushTool));
   return instances;
 }
diff --git a/packages/types/tianditu/mousetool.d.ts b/packages/types/tianditu/mousetool.d.ts
@@ -190,4 +190,22 @@ declare namespace T {
     /** 用户所有绘制的圆对象 */
     allCircles: Circle[];
   }
+
+  class PaintBrushTool extends Mousetool<any> {
+    /** 在地图容器中，创建一个可以随意画线的画笔工具 */
+    constructor(map: Map, opts?: PaintBrushToolOptions);
+    /** 获取工具中所有绘制的圆 */
+    getLayers(): SVG[];
+    /** 启用 */
+    enable(): void;
+    /** 禁用 */
+    disable(): void;
+  }
+
+  interface PaintBrushToolOptions {
+    /** 保持工具的连续可用性 */
+    keepdrawing: boolean;
+    /** 	画笔留下笔迹的样式 */
+    style: { color: string; weight: number; opacity: number };
+  }
 }