如何在JVectorMap上使用Creative Tim Angular Material Pro渲染区域？

Question

我正在尝试在Creative Tim Angular Material Pro页面中包含的世界的JVectorMap上显示彩色区域。

我已经在StackOverflow上找到了一些使用标准<script>标签或创建简单页面的示例，但是这些示例在被引入Creative Tim Angular Material Pro项目时不起作用。在每种情况下，地图均按照开箱即用的方式呈现（悬停，onClick事件等均可用）但区域未着色。

成功完成此任务的人能否描述他们如何进行此工作？-使用默认地图或导入Miller投影-特定的配置对象（我已经看到了提供区域值或每个区域显式颜色的示例）-我可能需要的任何事件或ElementRefs

我正在将区域数据添加到在Creative Tim项目文件中找到的地图中：

src/app/dashboard/dashboard

来自dashboard.component.ts（行164-187）：

  $('#worldMap').vectorMap({
    map: 'world_en',
    backgroundColor: 'transparent',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#b3b3b3',
    enableZoom: true,
    hoverColor: '#eee',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegions: null,
    showTooltip: true,
    onRegionClick: function (element, code, region) {
      const message = 'You clicked "'
        + region
        + '" which has the code: '
        + code.toUpperCase();

      alert(message);
    }
  });
}

将JVectorMap初始化更改为以下内容：

$('#worldMap').vectorMap({
  map: 'world_en',
  backgroundColor: 'transparent',
  borderColor: '#818181',
  borderOpacity: 0.25,
  borderWidth: 1,
  color: '#b3b3b3',
  enableZoom: true,
  hoverColor: '#eee',
  hoverOpacity: null,
  normalizeFunction: 'linear',
  scaleColors: ['#b6d6ff', '#005ace'],
  selectedColor: '#c9dfaf',
  selectedRegions: null,
  showTooltip: true,
  series: {
    regions: [{
      scale: ['#C8EEFF', '#0071A4'],
      normalizeFunction: 'polynomial',
      values: {
        'AU': 1219.72,
        'BR': 2023.53,
        'DE': 3305.9,
        'RO': 158.39,
        'GB': 2258.57,
        'US': 14624.18
      },
      attribute: 'fill'  // I saw this added in a different example but doesn't hurt or help here
    }]
  }
});

我做了三遍观察，尝试过，但是没有成功：

观察1-我找到了一个示例，该示例说明如何使用Javascript创建系列数据，该Javascript调用该系列的.setValues()方法。 （请参见http://jvectormap.com/examples/random-colors/）

const map = $('#worldMap').vectorMap('get', 'mapObject');
map.series.regions[0].setValues(this.seriesData);

[尝试此操作时，我得到并错误提示对象上不存在setValues()。

观察2-我发现可以使用的所有示例都使用JVectorMap网站上的Miller投影矢量地图。我试图使此工作正常，以防万一，但结果如下：-我可以得到'world-mill-en'地图以正确渲染（您可以看到宽度差异作为证明）-在区域悬停时，出现无法解决的JQuery错误。-我尝试了JVectorMap和其他示例中的地图文件，但都给出了相同的JQuery错误。-有些地图被命名为'world-mill'，其中JVectorMap的下载地址为'world-mill-en'

观察3-对地图对象进行查询显示，在以下位置，地图对象上存在区域序列数据：

canvas/params/series/regions[0] 

参见：

这不会在地图上显示任何更改（地图的显示与开箱即用）。

我想念一个活动吗？ Creative Tim CSS是否会覆盖区域显示？对于他们要嵌入到其产品中的产品来说似乎很奇怪。

关于我所缺少的任何技巧或见解，我们将不胜感激。谢谢

PS-这是添加最小/最大后的新图像

Answer 1

快乐的日子！

@@ Create Tim团队的Chelaruc进行了救援！参见：

https://github.com/creativetimofficial/ct-material-dashboard-pro-angular/issues/348

这里有两个问题：

1）彩色区域的数组被直接传递给JVectorMap的“ values”属性（而不是作为“ regions”属性组的属性）。

例如：

 const sample_data = {
  'us': '53.23',
  'de': '20.43',
  'au': '10.35',
  'gb': '7.87',
  'ro': '5.94',
  'br': '4.34'};

  $('#worldMap').vectorMap({
    map: 'world_en',
        backgroundColor:' #fff',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: false,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
  });

我问过如何添加一系列标记值，但尚未得到答复。没有给出关于Creative Tim模板中语法变化的原因。

2）国家/地区代码值必须为小写。我假设这是因为对象上的JQuery区分大小写（完全没有使用JQuery）。

感谢Creative Tim ...我求助于Google的GeoMap，但很高兴重新实现JVectorMap（尽管请提供Markers的示例）。