@acpaas-ui-widgets/ngx-location-viewer 中文文档教程

Question

Location Viewer Smart Widget UI (Angular)

Location Viewer Smart Widget UI 提供了一个易于使用的界面，用于显示安特卫普市内的位置或地址。

这个库在 Angular 8 中进行了测试。

Using the component

Installation

首先从 npm 安装组件：

npm install @acpaas-ui-widgets/ngx-location-viewer

然后导入模块内的组件：

import {LocationViewerModule} from '@acpaas-ui-widgets/ngx-location-viewer';

@NgModule({
  imports: [
    ...,
    LocationViewerModule
  ],
  ...
})

最后包括所需的样式：

在 index.html 文件中添加 Antwerp 核心品牌样式表：

<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/4.1.1/main.min.css">

在 angular.json 文件中添加所需的传单样式。

"styles": [
    "node_modules/leaflet/dist/leaflet.css",
    "node_modules/leaflet-draw/dist/leaflet.draw.css",
    "node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css",
    "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
    "node_modules/leaflet.markercluster/dist/MarkerCluster.css"
]

接下来，您需要配置 BFF 以将所有 Geo API 请求代理到正确的服务。

对于不同的技术，概念保持不变：

BFF 应该仅作为传递层运行，在代理之前，API KEY 被添加到请求标头中。

在 api-store 上使用“GEOAPI”创建合同

Usage

<aui-location-viewer
    ...
    (filteredResult)="onfilteredResult($event)"
></aui-location-viewer>

最小示例

<aui-location-viewer></aui-location-viewer>

完整示例

<aui-location-viewer
    [geoApiBaseUrl]="geoApiBaseUrl"
    [defaultZoom]="defaultZoom"
    [mapCenter]="mapCenter"
    [hasSidebar]="hasSidebar"
    [showLayerManagement ]="showLayerManagement"
    [showSelectionTools]="showSelectionTools"
    [showMeasureTools]="showMeasureTools"
    [showWhatIsHereButton]="showWhatIsHereButton"
    [supportingLayerOptions]="supportingLayerOptions"
    [operationalLayerOptions]="operationalLayerOptions"
    [filterLayers]="filterLayers"
    [leafletMap]="leafletMap"
    [defaultTileLayerLabel]="defaultTileLayerLabel"
    [tileLayer]="tileLayer"
    [zoomOnMarkerSelect]="zoomOnMarkerSelect"
    (addPolygon)="onAddPolygon($event)"
    (addLine)="onAddLine($event)"
    (editFeature)="onEditFeature($event)"
    (hasSidebarChange)="onHasSidebarChange($event)"
    (filteredResult)="onFilteredResult($event)"
    (layerVisibilityChange)="layerVisibilityChange($event)"
>

<p>This is shown inside the leaflet sidebar if hasSidebar is set to true.</p>

</aui-location-viewer>

strong>解释层类型

• Operational layer Operational layer is the main layer of the location viewer widget. After you have provided the setting to build this layer it is possible to filter this layer with selection tools (rectangle, polygon and filterlayer). After each selection the location viewer widget will push the filtered results of the layer. This layer will be initialized in ngOnInit with settings passed through the operationalLayerOptions input param. There are 2 possible ways to build this layer:
• Mapserver (provide url (valid mapserver url) and layerid properties)
• Markers (provide markers, isVisible and name properties)
• Supporting layer Supporting layer is only there to visualize certain objects in leaflet. This layer will be initialized in ngOnInit with settings passed through the supportingLayerOptions input param.
• Filter layers Filter layers are used to filter the operational layer by a specific object that is a polygon. After clicking on this layer the operational layer will be filtered by the objects geometry. This layer will be initialize in ngOnInit with settings passed through the filterLayerOptions input param. If name, popupLabel or propertyToDisplay properties are null, information will be used from layer information mapserver (name & displayfield).

< 层类型检查 demo，这是一个工作页面，其中包含用于测试所有可能参数的表单。

class ExampleComponent {

    /* Url to the backend-for-frontend (bff) Should function as pass through to the Geo API. */
    @Input() geoApiBaseUrl: string;
    /* The default zoom level on map load. */
    @Input() defaultZoom = 14;
    /* The initial map center on load. */
    @Input() mapCenter: Array<number> = [51.215, 4.425];
    /* Show a sidebar next to the map leaflet. A sidebar can contain any additional info you like. */
    @Input() hasSidebar = false;
    /* Shows layermangement inside the sidebar. Layermanagement is used to add or remove featurelayers. */
    @Input() showLayerManagement = true;
    /* Show selection tools */
    @Input() showSelectionTools = true;
    /* Show measure tools */
    @Input() showMeasureTools = true;
    /* show whatishere button */
    @Input() showWhatIsHereButton = true;
    /* Add supporting layers. If provided will be added as DynamicMapLayer to leaflet */
    @Input() supportingLayerOptions: SupportingLayerOptions;
    /* Add operationalLayer. If provided will be added as FeaturLayer(clustered) to leaflet */
    @Input() operationalLayerOptions: OperationalLayerOptions;
    /* Adds filter layer. If provided will be added as FeatureLayer to leaflet. Is used to filter operationallayer by geometry */
    @Input() filterLayers: FilterLayerOptions[];
    /* Leafletmap instance. If null will be initialized .*/
    @Input() leafletMap: LocationViewerMap;
    /* Default tile layer button label */
    @Input() defaultTileLayerLabel = 'Kaart';
    /* Custom leaflet tile layer, if provided, shows actions on the leaflet to toggle between default and custom tile layer. */
    @Input() tileLayer: LeafletTileLayerModel;
    /**
     * The zoom level when a marker is selected.
     * If null the zoomlevel won't change after marker selection.
     */
    @Input() zoomOnMarkerSelect? = 16;
    /* HasSideBar change */
    @Output() hasSidebarChange = new EventEmitter<boolean>();
    /* AddPolygon event */
    @Output() addPolygon = new EventEmitter<any>();
    /* AddLine event */
    @Output() addLine = new EventEmitter<any>();
    /* EditFeature event */
    @Output() editFeature = new EventEmitter<any>();
    /* Operational layer filtered: fired when using selection tools rectangle/polygon, using filter layer or clicking on marker of operational layer. */
    @Output() filteredResult = new EventEmitter<GeofeatureDetail[] | OperationalMarker[] | any>();
    /* Fire when visibility of layers was changed by the user */
    @Output() layerVisibilityChange = new EventEmitter<Layers>();

}

Demo

可以在以下位置找到现场演示： https://https://locationviewerweb-o.antwerpen.be/

您也可以选择在本地进行测试：

在根目录中运行：

npm install && ng build ngx-location-viewer && ng serve

这将安装所有必需的依赖项，为位置选择器库创建优化构建并设置位于 http://localhost:4200 的本地服务器。

Local development

安装所需的依赖项：

npm install

根据更改重建库

npm run dev

启动示例项目

ng serve

对库所做的任何更改都将在 http://localhost:4200

Support

Jasper Van Proeyen (jasper.vanproeyen @digipolis.be)

Publishing

只有 ACPaaS UI 团队发布新包。 如果您需要发布新版本，请联系我们。

Running unit tests

运行 ng test ngx-location-viewer 以通过 Karma 执行单元测试。

Further help

要获得有关 Angular CLI 的更多帮助，请使用 ng help 或查看 角度 CLI 自述文件。