0.0.9 • Published 2 years ago

@qqsl/ngx-qqsl-mapbox-components v0.0.9

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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[] = []
0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago