Question

我正在构建一个用于学习目的的小角度2应用程序，我计划使用datamaps作为地图界面。

但是这个lib还没有指令，所以我试图自己热线。

我已经安装了数据地图

npm install datamaps

我正在使用来自angular-cli的ng服务，但是我无法使其正常工作，我已经尝试直接在HTML中导入它（只是为了查看它是否有效）并且它无法实现＆＃39 ;找到lib。

我从直接HTML导入中获取此信息，即使文件位于正确的位置也不会发送到浏览器

datamaps.world.hires.min.js:1 Uncaught SyntaxError: Unexpected token <

我将它添加到我的package.json中并尝试在我的组件中使用它，但也找不到它。

在我的package.json

中这样

"datamaps": "^0.5.8"

如果我使用它，我应该怎么做才能看到它：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AskTheWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="../node_modules/datamaps/dist/datamaps.world.hires.min.js"></script>
</head>
<body>
  <app-geochart-component>Loading...</app-geochart-component>
  <div id="container" style="position: relative; width: 500px; height: 500px;"></div>
  <script>
    var map = new Datamap({element: document.getElementById('container')});
  </script>
</body>
</html>

将它导入我的组件的最佳方法是什么？我已经看到数据图没有声明的类型或者我可以找到的模块（我正在使用TS 2）

到目前为止，这是我的组件

从@ angular / core＆＃39;导入{Component，OnInit，ViewChild}; 从＆＃39; ../../../ node_modules / datamaps / dist / ?????????????＆＃39;;

导入{Datamap}

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

  @ViewChild('container') canvas;

  constructor() { }

  ngOnInit() {
    var map = new Datamap(this.canvas);
  }

}

}

Answer 1

所以你知道包含脚本的方法。现在要从Angular中使用它，你有几个选择。

选项1（快速且脏但可以工作）：在组件顶部创建一个const数据图（假设库的JavaScript对象被调用＆＃34;数据映射＆＃34;）：

const Datamap;

然后在调用新数据图时使用该对象：

ngOnInit() {
  var map = new Datamap(this.canvas);
}

选项2（更复杂但更好的方法。我没有用该组件完成此操作，但所有外部组件的想法都是相同的。）通过将应用程序启动中的Datamap组件注入到应用程序启动中来引导它角度组件。

此处还记录了有关选项的更多内容：How to pass parameters rendered from backend to angular2 bootstrap method

Answer 2

而不是使用javascript来显示地图：

<script> var map = new Datamap({element: document.getElementById('container')}); </script>

创建 @ViewChild 也不必 ngOnInit（）只需添加 ngAfterContentInit（），例如：

    ngAfterContentInit():void {

       var map = new Datamap({

        element: document.getElementById('container'),
        projection: 'mercator',
        fills: {
            defaultFill: "#ABDDA4",
            authorHasTraveledTo: "#fa0fa0"
        },data: {
          USA: { fillKey: "authorHasTraveledTo" },
          JPN: { fillKey: "authorHasTraveledTo" },
          ITA: { fillKey: "authorHasTraveledTo" },
          CRI: { fillKey: "authorHasTraveledTo" },
          KOR: { fillKey: "authorHasTraveledTo" },
          DEU: { fillKey: "authorHasTraveledTo" },
        }
       });

       var colors = d3.scale.category10();
     }

Answer 3

最后在阅读this

后开始工作

不完全是我正在寻找的东西，因为它超出了角度范围，我不能将它用作组件的一部分......但至少地图现在正在显示。

将下面的行添加到angular-cli.json并且它可用。

  "scripts": [
    "../node_modules/datamaps/dist/datamaps.world.min.js"
  ],

Answer 4

将数据映射文件导入您的组件。

import * as Datamap from 'node_modules/datamaps/dist/datamaps.world.min.js';

希望这会有所帮助

Answer 5

按照以下步骤操作：

1）npm安装数据地图 2）在tsconfig.json中包含＆＃34; allowJs＆＃34;：true 3）在＆＃34; .angular-cli.json＆＃34;

中包含以下内容

"scripts": [
        "../node_modules/d3/d3.js",
        "../node_modules/topojson/build/topojson.js",
        "../node_modules/datamaps/dist/datamaps.world.min.js"
      ],

3）在html中：

4）在组件ts文件中包含以下内容：

declare var Datamap:any;
declare var d3:any;



ngAfterContentInit():void {

           var map = new Datamap({

            element: document.getElementById('container'),
            projection: 'mercator',
            fills: {
                defaultFill: "#ABDDA4",
                authorHasTraveledTo: "#fa0fa0"
            },data: {
              USA: { fillKey: "authorHasTraveledTo" },
              JPN: { fillKey: "authorHasTraveledTo" },
              ITA: { fillKey: "authorHasTraveledTo" },
              CRI: { fillKey: "authorHasTraveledTo" },
              KOR: { fillKey: "authorHasTraveledTo" },
              DEU: { fillKey: "authorHasTraveledTo" },
            }
           });

           var colors = d3.scale.category10();
         }

无法将数据映射库导入Angular 2应用的HTML中

5 个答案: