我正在构建一个角度应用程序,我想要包含一个传单地图并使用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.
任何形式的帮助将不胜感激。感谢。