@acpaas-ui/ngx-leaflet 中文文档教程

Question

@acpaas-ui/ngx-leaflet

该模块基于 Leaflet 呈现带有一些基本控件的地图组件。

Dependencies

• leaflet
• leaflet-draw
• esri-leaflet

Usage

import { LeafletMap } from '@acpaas-ui/ngx-leaflet';

将传单 CSS 样式添加到 src/angular.json 文件。

"styles": [
    "node_modules/leaflet/dist/leaflet.css",
    "node_modules/leaflet-draw/dist/leaflet.draw.css"
]

Documentation

访问我们的文档网站获取完整的操作文档和指南

Leaflet module

API

Name	Default value	Description
@Input() leafletMap: LeafletMap;	-	An instance of the Leaflet Map class.
@Input() hasSidebar: boolean;	false	Define if the map has a sidebar.
@Input() zoomLevel: number;	19	Define how far to zoom in Leaflet Zoom Level

查看Leaflet API 参考 用于 Leaflet 特定 API。

Example

import { LeafletMap, baseMapWorldGray, baseMapAntwerp } from '@acpaas-ui/ngx-leaflet';

public leafletMap: LeafletMap = new LeafletMap({
    zoom: 13, // default zoom level
    center: [51.215, 4.425], // default center point
    onAddPolygon: (layer) => {},
    onAddLine: (layer) => {},
    onEditFeature: (feature) => {},
});

public ngOnInit(): void {
    this.leafletMap.onInit.subscribe(() => {
        this.leafletMap.addTileLayer(baseMapWorldGray);
        this.leafletMap.addTileLayer(baseMapAntwerp);
    });
}

<aui-leaflet [leafletMap]="leafletMap" [hasSidebar]="true">
    <div controls top left>
        <aui-leaflet-drag-control></aui-leaflet-drag-control>
        <aui-leaflet-draw-control></aui-leaflet-draw-control>
    </div>
    <div controls top right>
        <aui-leaflet-fullscreen-control></aui-leaflet-fullscreen-control>
    </div>
    <div controls bottom left>
        <aui-leaflet-locate-control zoomLevel="16"></aui-leaflet-locate-control>
    </div>
    <div controls bottom right>
        <aui-leaflet-zoom-control></aui-leaflet-zoom-control>
    </div>
    <div>
        Content displayed in sidebar
    </div>
</aui-leaflet>

Custom services

• map: The native leaflet map instance
• addTileLayer(layer: LeafletLayer): adds a tile layer to the map. (see leaflet docs)
• addFeatureLayer(config: any): adds a feature layer to the map. (see esri leaflet docs)
• addGeoJSON(geoJson: any, config: any): add geoJSON to the map. (see leaflet docs)
• fitFeatureLayers(featureLayers): Fit the map bounds to the given feature layers.
• removeLayer(layer): removes a layer
• zoomIn(): Zoom in
• zoomOut(): Zoom out
• toggleFullscreen(): Toggle fullscreen
• locate(zoomLevel): Start zooming to current location with an optional zoom level
• setView(center, zoom): Zoom to the given center and zoom values.
• addMarker(position, options): Adds a marker to the given position. (see leaflet docs)
• addHTMLMarker: Adds an HTML marker to the given position.

Contributing

请访问我们的贡献指南，了解有关如何贡献的更多信息。