想用echarts的自定义图表在中国地图北京中心画个五角星,怎么做?

来源:5-14 累计用户数组件开发(下)

他门说这就是人生

2020-09-10

我的代码:

renderItem: function(params, api) {
  return {
    type: 'path',
    // 北京的中心点
    position: [39.904989, 116.405285],
    shape: {
      d: 'M807.71122 871.548878L733.483707 623.39122l204.100683-157.646049c9.290927-6.893268 13.886439-16.284098 18.481951-25.475122 4.595512-11.588683 4.595512-23.177366 0-32.36839-4.595512-11.588683-9.290927-20.87961-18.481951-27.772879-9.290927-6.993171-20.87961-9.290927-32.36839-9.290926l-257.348683-6.993171-85.916097-243.662049c-2.397659-9.290927-9.290927-18.481951-18.481952-25.475122-11.788488-7.192976-20.979512-11.788488-32.668097-11.788488s-20.87961 4.595512-30.170537 11.588683-16.284098 16.284098-20.87961 25.475122l-85.816195 243.462244-257.348683 6.993171c-11.588683 2.297756-20.87961 4.595512-30.170536 11.588683-9.290927 6.893268-16.284098 16.284098-18.481951 27.772878-4.595512 9.290927-4.595512 20.87961 0 32.568195 2.297756 9.290927 9.290927 18.681756 16.284097 25.475122h2.397659L290.716098 625.489171l-74.227513 248.057756c-2.397659 9.290927-2.397659 20.87961 2.397659 32.568195 2.297756 9.290927 9.290927 18.681756 18.481951 25.475122 9.290927 6.993171 18.481951 9.290927 30.170537 9.290927h2.297756c9.290927 0 20.87961-2.297756 30.170536-9.290927l213.291708-146.157268 213.291707 146.057365c9.290927 6.993171 18.481951 9.290927 27.772878 9.290927h2.297756c9.290927 0 20.87961-4.595512 30.170537-9.290927h2.297756c6.993171-6.893268 13.886439-16.284098 18.481951-27.772878 2.497561-11.388878 4.695415-22.977561 0.099903-32.168585z',
      x: 0,
      y: 0,
      width: 40,
      height: 40
    },
    style: {
      fill: '#ff0000'
    }
  }
}

北京的中心点我使用的是经纬度坐标,但五角星没有绘制在北京:

http://img.mukewang.com/szimg/5f5996f709ca4eb508540569.jpg

请问echarts的geo坐标系的坐标是什么坐标,我应该怎么得到北京中心点的坐标?

ps:

试了一下,也不是墨卡托坐标,因为[39.904989 * 512, 116.405285 * 512]这个坐标也不行

写回答

1回答

扬_灵

2020-09-10

同学你好,echarts的geo坐标系的坐标使用经纬度来确定地图上点的位置。坐标的选择可以通过百度地图提供的坐标拾取器选择。http://api.map.baidu.com/lbsapi/getpoint/index.html //img1.sycdn.imooc.com/szimg/5f59f4ed0964008022840440.jpg

0
1
他门说这就是人生
非常感谢!
2020-09-13
共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端,掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程