ngx-qqsl-mapbox-components

更新日志

0.0.9

1. 更新依赖qqsl-utils至0.0.10
2. 修复组件样式

0.0.8

1. 更新依赖qqsl-utils至0.0.8

0.0.7

1. 更新依赖qqsl-utils至0.0.7

0.0.6

1. 更新依赖qqsl-utils至0.0.6

0.0.5

1. MapboxUtilsModule改名为MapboxComponentsModule
2. 完善README
3. 修复：NqMapLnglatInfoComponent未加入到MapboxUtilsModule中

USAGE

import { MapboxComponentsModule } from "@qqsl/ngx-qqsl-mapbox-components";

@NgModule({
  imports: [
    MapboxComponentsModule,
  ]
})
export class AppModule{}

COMPONENTS

NqMapLnglatInfoComponent

用于在地图左下角显示当前鼠标位置的经纬度

// nq-map-lnglat-info-component
@Input() lngLatInfo!:string

NqMapControlBtnComponent

用于在地图右上角显示放大、缩小、定位（定位至指定坐标）按钮

// nq-map-control-btn-component
@Input() map$!: Observable<mapboxgl.Map>
// 默认值是西宁
@Input() center: [number, number] = [101.778, 36.623]

NqMapToolComponent

该组件是地图工具按钮的容器。其内容投影分为四部分：

1. 自定义部分：该部分不需要任何特殊设置
2. 操作按钮部分：需要NqMapToolBtnsComponent组件
3. 图层切换部分：需要NqMapToolLayerSwitcherComponent组件
4. 图例部分：需要NqMapToolLegendComponent组件

<nq-map-tool
  [mapApi$]="mapApi$"
  class="map-tool"
>
  <nq-map-tool-btns nqMapToolBtnControl>
    <nq-map-tool-btn-reset nqMapToolBtnControl></nq-map-tool-btn-reset>
    <nq-measure-polygon nqMapToolBtnControl></nq-measure-polygon>
    <nq-measure-polyline nqMapToolBtnControl></nq-measure-polyline>
  </nq-map-tool-btns>
  <nq-map-tool-layer-switcher
    [token]="tiandituToken"
  >
  </nq-map-tool-layer-switcher>
  <nq-map-tool-legend-btn
    [legend]="legend"
  >
  </nq-map-tool-legend-btn>
</nq-map-tool>

NqMapToolBtnsComponent

该组件是操作按钮的父按钮（容器）。 他接受带有指令NqMapToolBtnDirective的组件作为子按钮。并通过该指令控制按钮。 具体示例见上方。

NqMapToolBtnResetComponent

操作按钮的子按钮之一，用于重置状态

NqMeasurePolygonComponent

操作按钮的子按钮之一，用于测量面

NqMeasurePolylineComponent

操作按钮的子按钮之一，用于测量线

NqMapToolBtnMarkComponent

selector: nq-map-tool-btn-mark

操作按钮的子按钮之一，用于提供定位功能（用户提供坐标以定位）

NqMapToolBtnDirective

操作按钮相关指令

AbstractMapToolPluginControl

操作按钮的基类。用户编写新的按钮时也应该继承该基类

NqMapToolLayerSwitcherComponent

用于切换图层

// nq-map-tool-layer-switcher
@Input() layer = LayerStatusEnum.CITY; // 默认图层
@Output() layerChange = new EventEmitter<LayerStatusEnum>()
@Input() token!: string // 天地图token
@Input() appName?: string // 应用名称，相同名称的应用可以保留图层状态
@Input() useHistory = false // 是否开启相同应用共享图层状态

NqMapToolLegendComponent

图例组件

// nq-map-tool-legend-btn
interface MapLegend{
  label: string,
  icon: string
}

@Input() legend: MapLegend[] = []