如何在角应用程序中包含leaflet.markercluster?

时间:2018-02-16 08:21:07

标签: javascript angular leaflet dc.js leaflet.markercluster

我正在构建一个角度应用程序,我想要包含一个传单地图并使用leaflet.markercluster。

我正在使用cdn for leaflet.markercluster

以下是我的component.ts

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

    import * as L from 'leaflet';

    declare var d3: any;
    declare var crossfilter: any;
    declare var dc: any;


    @Component({
      selector: 'app-charts',
      templateUrl: './charts.component.html',
      styleUrls: ['./charts.component.css']
    })
    export class ChartsComponent implements OnInit {

      constructor() {
      }

      ngOnInit() {
      }

      ngAfterViewInit() {

        d3.json("assets/data.json", function(data) {
          drawMarkerSelect(data);
        });

        function drawMarkerSelect(data) {
          var ndx = crossfilter(data);
          var all = ndx.groupAll();
          var groupname = "marker-select";
          var facilities = ndx.dimension(function(d) { return [d.latitude, d.longitude]; });
          var facilitiesGroup = facilities.group().reduceCount();

          var pie = dc.pieChart(".pie",groupname);

          var marker = dc.leafletMarkerChart(".map",groupname)
            .dimension(facilities)
            .group(facilitiesGroup)
            .zoom(9)
            .center([34.5019319,-117.211703])
            .width(600)
            .height(400)
            .fitOnRender(true)
            .fitOnRedraw(true)
            .cluster(true);

          var typeDim = ndx.dimension(function(d) { return d.type; });
          var typeGroup = typeDim.group().reduceCount();

          pie
            .dimension(typeDim)
            .group(typeGroup)
            .width(200)
            .height(200)
            .renderLabel(true)
            .renderTitle(true)
            .ordering(function (p) {
              return -p.value;
            });

          dc.renderAll(groupname);
          return {marker: marker, pie: pie};
        }
      }
    }

饼图看起来很好,但地图不是。

我一直收到以下错误:

  

未捕获的ReferenceError:在leaflet.markercluster.js中未定义L:1

而我甚至没有在代码中使用别名L.

任何形式的帮助将不胜感激。感谢。

0 个答案:

没有答案