Question

尝试从数据地图绘制地图上的圆弧时，如下所示：https://datamaps.github.io/

我得到一个空弧，使用以下代码并显示在此处：http://jsfiddle.net/yausern/qbgewhss/1/

var map = new Datamap(
    {
        element: document.getElementById('container'),
        fills: {
            defaultFill: "#ABDDA4",
            win: '#0fa0fa'
        },
        data: {
            'CHN': { fillKey: 'win' },
            'SWE': { fillKey: 'win' },

        }
    }
);
map.arc(
    [
        {
            origin: 'CHN',
            destination: 'SWE',
            options: {
                strokeWidth: 2,
                strokeColor: 'rgba(100, 10, 200, 0.4)',
                greatArc: true
            }

        }
    ],
    {
        strokeWidth: 1, arcSharpness: 1.4
    }

)

我在这里缺少什么？

Answer 1

使用此处的高分辨率版本时可以使用：https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.hires.min.js

但是我不能在JSFiddle中使用它，在控制台中收到以下错误消息：

Refused to execute script from 'https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.hires.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

当我下载脚本并在本地引用它时，它在使用Python 3的http.server

时有效

Answer 2

根据API，似乎arcs插件接受国家/地区名称。我尝试了几件事，从使用scope:'world'到引用插件，但没有成功。

无论如何，这可能不是你的解决方案，但你可以随时使用纬度和经度：

{
  origin: {
      latitude: 60.1282,
      longitude: 18.6435
  },
  destination: {
      latitude: 35.8617,
      longitude: 104.1954
}

这是小提琴：http://jsfiddle.net/gerardofurtado/59seachL/

Datamaps中的空弧

2 个答案: