2

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

我正在将 cdn 用于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：L 未在 leaflet.markercluster.js:1 中定义

而我什至没有在代码中使用别名 L。

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

4

0 回答 0