使用方法

@Input参数

// 第一次得到map实例后调用 可选
@Input() measureHookOnceGetMap?: (curMeasure: MapStatusEnum, setMeasure: (measure: MapStatusEnum) => void) => void;

// 第一次得到map实例后调用 可选
@Input() layerHookOnceGetMap?: (layer: LayerEnum, setLayer: (layer: LayerEnum) => void) => void;

// 每次切换测量状态前调用 可选
@Input() beforeSwitchMeasure?: (curMeasure: MapStatusEnum, nextMeasure: MapStatusEnum) => void;

// 每次切换测量状态后调用 可选
@Input() afterSwitchMeasure?: () => void;

// 每次切换图层前调用 可选
@Input() beforeSwitchLayer?: (curLayer: LayerEnum, nextLayer: LayerEnum) => void;

// 可选 是否记忆图层选择，如果为true，则会存入localStorage，每次初始化时取出，若取出无数据，则默认第一个选项，其key为'qqsl-map-layer'
@Input() memoLayer = false;

// 可选 是否记忆图层选择，如果为true，则会存入localStorage，次初始化时取出，若取出无数据，则默认第一个选项其key为'qqsl-map-measure'
@Input() memoMeasure = false;

// *必填 使用ReplaySubject传递map与mousetool的实例，如果使用subject，有可能导致next在subscribe之前
@Input() mouseToolSubject: ReplaySubject<any> | undefined;

// *必填
@Input() mapSubject: ReplaySubject<any> | undefined;

// 可选
@Input() legendTemplateRef?: TemplateRef<any>

@Input() showMeasure = true;
@Input() showLayer = true;

@Output() listenMeasureChange = new EventEmitter<MapStatusEnum>();

// 均可选，在每次绘制完点线面后调用
@Input() afterDrawLine?: (event: any) => void
@Input() afterDrawArea?: (event: any) => void
@Input() afterDrawMark?: (event: any) => void

// 以下参数只会初始化一次，第二次修改无效
// 是否开启绘制功能，默认不开启, 
@Input() canDraw: boolean

// 是否开启打点功能
@Input() canSetTemporaryMarker = false

在对应的ngModule中引入

import { NgxQqslMapToolBtnsModule } from 'ngx-qqsl-map-tool-btns'

在模板中使用

<ngx-qqsl-map-tool-btns></ngx-qqsl-map-tool-btns>

引入css

@import "ngx-qqsl-map-tool-btns/src/assets/index.css";
@import "ngx-qqsl-map-tool-btns/src/assets/qqsl-map-tool-btns-iconfont.css";

使用了qqsl-common-utils中关于地图的公共方法与接口

开发时相关命令行

 ng serve demo --port 8099
 ng build ngx-qqsl-map-tool-btns --watch

CommonPackages

This project was generated with Angular CLI version 13.2.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.