将传单弹出窗口调整为角度传单中的表格大小 [英] Adjust Leaflet popup to table size in angular leaflet

问题描述

我在 Leaflet 地图上有一个图层的弹出窗口，当您单击地图上的某个点时会出现一个弹出窗口.弹出窗口应显示一个包含该特定图层数据的表格.但是，弹出窗口不会根据表格大小进行调整:

但是当我去掉 leaflet-popup-content 的默认宽度时，弹出窗口不会出现在该点的正上方并向右移动:

我显示弹出窗口的方式如下(在我的弹出服务中):

let popupOptions = {类名:弹出"，maxWidth: 250//由于某种原因，这不会做任何事情};L.popup(popupOptions).setLatLng(latLng).setContent(this.compilePopup(PopupComponent)).openOn(地图);

您可以看到我正在注入 PopupComponent 到 Leaflet 弹出窗口中，而不仅仅是硬编码 html.下面是 this.compile 函数的样子:

private compilePopup(component: any) {const compFactory: any = this.resolver.resolveComponentFactory(component);让 compRef: any = compFactory.create(this.injector);this.appRef.attachView(compRef.hostView);compRef.onDestroy(() => this.appRef.detachView(compRef.hostView));让 div = document.createElement('div');div.appendChild(compRef.location.nativeElement);返回div；

这就是我的 PopupComponent HTML 的样子:

<table class="table table-striped table-bordered table-condensed table-hover"><tr><th *ngFor="let col of columns;">{{列}}</th></tr><tr><td *ngFor="let col of columns;">{{columnDetails[columns]}}</td></tr></ng-模板>

popup-component.ts:

import { Component, OnInit } from '@angular/core';@成分({选择器:'app-popup'，templateUrl: './popup.component.html',styleUrls: ['./popup.component.css']})导出类 PopupComponent 实现 OnInit {列详细信息:任何；列:数组<字符串>= [第 1 栏"、第 2 栏"、第 3 栏"]；构造函数(私人弹出服务:弹出服务，私人弹出商店:弹出商店){this.columnDetails= this.popupService.columnDetails;}}

我初始化 Leaflet 地图的方式是在我的 map-component.ts 中:

 选项:MapOptions = {中心:纬度(47.5786262，-122.1654623)，最小缩放:4，层数:[L.gridLayer.googleMutant({type: 'roadmap',//有效值为 'roadmap'、'satellite'、'terrain' 和 'hybrid'样式: [{特征类型:poi.business"，元素类型:标签"，造型师:[{可见性:简化"}]}]}),],变焦:5，缩放控制:假};

map-component.html:

现在我发现了另一个与 完全相同的问题 和看到您可以设置 maxWidth: "auto" 或使用 update()，但这两种解决方案对我不起作用，因为这是专门针对 Leaflet javascript 和我的m 使用 ngx-leaflet，角度传单.

我怎样才能让弹出窗口适应我的表格大小并且弹出窗口正好在我点击的标记上方?或者有没有办法将其他解决方案转换为我的代码?非常感谢任何帮助！

解决方案

您可以预先计算列的总宽度，然后将该值用作 popupOptions<的 minWidth/代码>:

const columnsWidth: number = columns.length * 80//假设每列宽度为 80pxconst popupOptions = {类名:弹出"，minWidth: columnsWidth//使用计算出的宽度...};L.popup(popupOptions)

为此，您应该为列分配固定宽度(此处使用内联样式仅用于示例目的):

...<td *ngFor="let col of columns";样式=宽度:80px">{{columnDetails[columns]}}</td>...

它将使 Leaflet 能够正确呈现弹出式布局并在地图上正确定位图钉.

参考:传单文档

I have a popup for a layer on the Leaflet map and a popup appears when you click on a point on the map. The popup should display a table with the data for that specific layer. However, the popup does not adjust to the table size:

But when I do get rid of the default width for the leaflet-popup-content the popup does not appear right above the point and gets shifted to the right:

The way I am displaying the popup is the following (in my popup service):

let popupOptions = {
   className: "popup",
   maxWidth: 250 // This doesn't do anything for some reason
};

L.popup(popupOptions)
   .setLatLng(latLng)
   .setContent(this.compilePopup(PopupComponent))
   .openOn(map);

You can see that I am injecting the PopupComponent into the Leaflet popup rather than just hardcoding the html. Here is how the this.compile function looks like:

private compilePopup(component: any) {
    const compFactory: any = this.resolver.resolveComponentFactory(component);
    let compRef: any = compFactory.create(this.injector);

    this.appRef.attachView(compRef.hostView);
    compRef.onDestroy(() => this.appRef.detachView(compRef.hostView));

    let div = document.createElement('div');
    div.appendChild(compRef.location.nativeElement);
    return div;

and this is how my PopupComponent HTML looks like:

<ng-template>
    <table class="table table-striped table-bordered table-condensed table-hover">
        <tr>
            <th *ngFor="let col of columns;">
                {{columns}}
            </th>
        </tr>
        <tr>
            <td *ngFor="let col of columns;">
                {{columnDetails[columns]}}
            </td>
        </tr>
    </table>
</ng-template>

popup-component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
  columnDetails: any;
  columns: Array<string> = ["Column 1", "Column 2", "Column 3"];


  constructor(
    private popupService: PopupService,
    private popupStore: PopupStore
  ) {
    this.columnDetails= this.popupService.columnDetails;

  }
}

and the way I am initializing my Leaflet map is in my map-component.ts where I have:

  options: MapOptions = {
    center: latLng(47.5786262, -122.1654623),
    minZoom: 4,
    layers: [
      L.gridLayer.googleMutant({
        type: 'roadmap', // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
        styles: [
          {
            featureType: "poi.business",
            elementType: "labels",
            stylers:
              [
                {
                  visibility: "simplified"
                }
              ]
          }
        ]
      }),
    ],
    zoom: 5,
    zoomControl: false
  };

map-component.html:

<div id="map"
    leaflet [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)"
    (leafletMapMove)="onMapMove($event)"
    (leafletMapZoom)="onMapZoom($event)"
    (leafletClick)="onMapClick($event)">
</div>

Now I found another question with the exact same problem as mine and saw that you can set the maxWidth: "auto" or use update(), but these two solutions do not work for me since that's specifically for Leaflet javascript and I'm using ngx-leaflet, angular leaflet.

How can I get it so the popup adjust to my table size AND that the popup is right above the marker that I click on? or is there a way to translate the other solution to my code? Any help is greatly appreciated!

解决方案

You can pre-calculate the total width of the columns and then use that value as a minWidth for the popupOptions:

const columnsWidth: number = columns.length * 80 // assuming each column width is 80px

const popupOptions = {
   className: "popup",
   minWidth: columnsWidth // use the calculated width
   ...
};

L.popup(popupOptions)

For this to work, you should assign a fixed width to the columns (using inline styling here just for example purposes):

<table>
    ...
    <td *ngFor="let col of columns" style="width: 80px">
        {{columnDetails[columns]}}
    </td>
    ...
</table>

It will enable Leaflet to render the popup layout properly and position the pin correctly on the map.

Reference: the Leaflet documentation

这篇关于将传单弹出窗口调整为角度传单中的表格大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！