0.0.9 • Published 2 years ago
@qqsl/ngx-qqsl-mapbox-components v0.0.9
ngx-qqsl-mapbox-components
更新日志
0.0.9
- 更新依赖qqsl-utils至0.0.10
- 修复组件样式
0.0.8
- 更新依赖qqsl-utils至0.0.8
0.0.7
- 更新依赖qqsl-utils至0.0.7
0.0.6
- 更新依赖qqsl-utils至0.0.6
0.0.5
- MapboxUtilsModule改名为MapboxComponentsModule
- 完善README
- 修复: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
该组件是地图工具按钮的容器。其内容投影分为四部分:
- 自定义部分:该部分不需要任何特殊设置
- 操作按钮部分:需要NqMapToolBtnsComponent组件
- 图层切换部分:需要NqMapToolLayerSwitcherComponent组件
- 图例部分:需要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[] = []