Ngx-qqsl-map-tool-btns NPM

使用方法

@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

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.