Question

我想添加饼图。我做了一个谷歌搜索，发现像leaflet-dvf。我已经使用@ assymetric / angular2-leaflet和传单。我尝试在我的angular 2应用程序中集成leaflet-dvf。

我在index.html上添加了脚本

的index.html

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.js"></script>

map.component.ts

import { MapService } from '../../map.service';
import { Component } from '@angular/core';
import { Observer } from 'rxjs/Observer';


@Component({
  moduleId: module.id,
  selector: 'map-demo',
  templateUrl: './map.component.html',
  styleUrls: ['map.component.css']
})
export class MapDemoComponent {
  mapInstance: any;
  coords: any = [];
  mapData: any;
  // Open Street Map Definition
  LAYER_OSM = {
    id: 'openstreetmap',
    name: 'Open Street Map',
    enabled: true,
    layer: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
      maxZoom: 18,
      attribution: `Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>
                    contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
                    Imagery © <a href="http://mapbox.com">Mapbox</a>`,
      mapId: 'id',
      subdomains: ['a', 'b', 'c', 'd'],
      token: 'token'
    })
  };

  // Values to bind to Leaflet Directive
  layersControlOptions = {
    position: 'bottomright'
  };
  baseLayers = {
    'Open Street Map': this.LAYER_OSM.layer
  };
  options = {
    zoom: 10,
    center: L.latLng([40.4859372, -111.8768695])
  };


  constructor() {

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

  generateCord(data: any) {

        var circle = L.circle([item.Latitude, item.Longitude], {
          color: 'rgb(63, 61, 61)',
          fillColor: fillColor,
          fillOpacity: 0.8,
          radius: item.PRODUCTION
        }).bindTooltip(item.USER_NAME + `(${item.User_Classification}) `)
          .addTo(this.mapInstance);
        //   var marker = L.marker([item.Latitude, item.Longitude]).addTo(this.mapInstance)
        // .bindTooltip(item.USER_NAME)
        // .openTooltip();

      });
    }

  }

}

我已经安装了传单的打字，所以当我使用插件时，它会崩溃。因为两者都以L.MethodName开头。

var barChartMarker = new L.BarChartMarker(new L.LatLng(0, 0), options).addTo(this.mapInstance);

上述插件不适用于declare var方法。如何为我的传单地图添加饼图标记？

Answer 1

解决DVF库缺少打字信息的一种方法是在调用方法之前将L转换为任何信息。

let dvf:any = L as any;
let barChartMarker = new dvf.BarChartMarker(new L.LatLng(0, 0), options).addTo(this.map);

请注意，DVF文档表明主分支不适用于Leaflet 1.0。只需确保您使用的是正确版本的插件。

如何在小册子angular2上创建饼图标记？

的index.html

map.component.ts

1 个答案: