我是传单的新手。我已经按照https://github.com/Asymmetrik/ngx-leaflet上的步骤设置了地图

我正在尝试获取地图放大区域中的标记列表，这些标记可用于使对象成为焦点。我如何用 ngx-leaflet 在 angular 4 中做到这一点？

我正在开发一个 angular 应用程序，它使用传单地图来显示一些图层，我正在尝试使用 GeoJSON，但我无法创建 L.geoJSON 图层。我试图添加一个观点，我发现的每一个资源都告诉我要创建这个结构：

import { geoJSON } from 'leaflet';

geoJSON({
    type: "Point",
    coordinates: [lat,long]
});

但是当我提供应用程序时，我收到此错误：

Argument of type '{ type: "Point"; coordinates: number[]; }' is not assignable to parameter of type 'GeoJsonObject'.
Object literal may only specify known properties, and 'coordinates' does not exist in type 'GeoJsonObject'.

唯一的其他属性type是bbox?.

我确定我做错了什么，但我真的不明白是什么。

使用

"leaflet": "^1.3.1"
"@types/leaflet": "^1.2.5"
"@asymmetrik/ngx-leaflet": "^3.0.2"

我知道这是一个经常出现的问题，可以通过修复导入语句来解决。我目前有

import { LeafletModule } from 'node_modules/@asymmetrik/ngx-leaflet';
import * as L from 'leaflet';
import { } from '@types/leaflet';

我正在引用选项，因此：

options = {
    layers: [
        this.googleHybrid
    ],
    zoom: 1.49,
    zoomSnap: 0,
    center: L.latLng([180, -180])}

我觉得我遇到了这个问题，因为将传单中的所有内容都导入为 L。有什么想法吗？

编辑：我还应该补充一点，这只是在测试中出现。

出于某种原因，ng build --prod在运行ng buildLeaflet 标记图标 url时，传单标记图标 url在运行时编译错误。

我的环境：

Angular CLI: 7.0.5
Node: 11.2.0
OS: linux x64
Angular: 7.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.5
@angular-devkit/build-angular     0.10.5
@angular-devkit/build-optimizer   0.10.5
@angular-devkit/build-webpack     0.10.5
@angular-devkit/core              7.0.5
@angular-devkit/schematics        7.0.5
@angular/cli                      7.0.5
@ngtools/webpack                  7.0.5
@schematics/angular               7.0.5
@schematics/update                0.10.5
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

您可以在此网址下找到 prod env

屏幕截图显示了错误编译的图标标记 url 的示例。

我想这与Leaflet上的这个问题有关，但我不知道如何解决这个问题。

我遵循了官方的angular-cli 教程，将angular-universal集成到我现有的angular-cli应用程序中。

我可以为我的angular-cli应用程序执行SSR。但是当我尝试集成ngx-leaflet时，出现以下错误：

ReferenceError：导航器未在D：\ ng2-ssr-pwa \ dist \ server.js：40251：29定义

现在，我知道传单正在尝试访问Node上下文中不可用的导航器对象。因此，我决定延迟传单的呈现，直到此SO线程中给出的页面加载到浏览器中为止。但是我仍然遇到同样的错误。您可以在此处查看带有传单问题的演示应用程序。

./src/app/browserModuleLoader.service.ts：

import { Component, Inject, Injectable, OnInit, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable()
export class BrowserModuleLoaderService {
    private _L: any;

    public constructor(@Inject(PLATFORM_ID) private _platformId: Object) {
        this._init();
    }

    public getL() {
        return this._safeGet(() => this._L);
    }

    private _init() {
        if (isPlatformBrowser(this._platformId)) {
            this._requireLegacyResources();
        }
    }

    private _requireLegacyResources() {
        this._L = require('leaflet');
    }

    private _safeGet(getCallcack: () => any) …

我曾尝试了一段时间，现在实现这个小册子教程使用ngx-leaflet。

在遵循本教程时，绝对没有关于如何实现自定义控件或图例的明确文档。

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
}; …

我leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw在 Angular 应用程序中使用。

我已经尝试了一切，版本更改，导入模块.forRoot()而不是，在我的angular.json文件中添加 js文件，删除 node_modules，重新安装它们，从头开始遵循@ngx-leaflet-draw 上的指南一百次。

无论我做什么，当我尝试绘制矩形时，它总是会引发此错误：

即使处理程序存在并且所有处理程序都可以完美运行，除了矩形（我唯一需要的一个）

如果不是这样，我什至不知道如何为您提供更具体的信息：

• leaflet： 1.5.1
• leaflet-draw： 1.0.4
• @asymmetrik/ngx-leaflet： 6.0.1
• @asymmetrik/ngx-leaflet-draw： 5.0.1

我被这个愚蠢的错误困住了，我不知道如何克服它。请帮忙！

这是演示的回购：https : //github.com/caiusCitiriga/leaflet-rect-drawer

我在 angular 2 的 ngx-leaflet 组件方面有问题。在将 *ngif 的状态从 true 更改为 false 并在地图出现时再次从 false 更改为 true 后，没有发生图块渲染。我该怎么做才能避免这个问题？

这是我的 html 代码

<button (click)="showMap=!showMap">toggle</button>
<div *ngif="showMap">
  <div [style.height.px]="mapHeight" leaflet
       (leafletClick)="mapOnClick($event)"
       [(leafletCenter)]="mapCenter"
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)"
       [leafletLayers]="layers">
  </div>
</div>

这是我的打字稿代码

options = {
  layers: [
    tileLayer('http://tile.openstreetmap.org/...', 
    { maxZoom: 18, attribution: '...' })
  ],
  zoom: 12,
  center: latLng(35.679966, 51.4)
};

map = null;

onMapReady(map: Map) {
  this.map = map; 
}

mapOnClick(evt) {
}    

我正在 Angular 6 项目中使用 ngx-leaflet，我在我的地图中绘制了多个标记，我想在多个标记上居中和缩放传单地图

在官方文档中，您可以使用 [L.latlngBounds] 来完成，并使用其他解决方案 L.featureGroup

由于我使用的是 ngx-leaflet，我没有L变量，所以我找不到latlngBounds和featureGroup

这是我的组件：

import {latLng, tileLayer, polygon, marker, Icon, LatLngBounds} from 'leaflet';

export class CustomComponent implements OnInit {

  options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18})
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
  };

  layers = [];
  fitBounds: LatLngBounds;
}

ngOnInit() {
    for (let i = 0; i < this.locations.length; i++) {
        this.layers.push(this.locations[i].y, this.locations[i].x].setIcon(
            new Icon({
                iconSize: [25, 41],
                iconAnchor: [13, 41],
                iconUrl: 'assets/icons/marker-icon.png',
                shadowUrl: 'assets/icons/marker-shadow.png'
        }))); …

我想在 ngx-leaflet 地图上放置一个热图（使用 angular），如下图所示。

我怎样才能做到这一点？

这是示例的演示。