echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份且地图显示省份名称-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份且地图显示省份名称。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份且地图显示省份名称

先上效果图

map3d,echarts,3d,javascript,typescript

先讲下需求：
1.地图上显示各个省份的名称
2.对不同省份进行区分（项目涉及到省份排名之类的）；
3. 点击进入不同省份展示各个省份的市区信息；
4. 在省份地图上添加marker ；

讲下实现思路

1.中国地图使用geo3d 和scatter3D做文字图层，用map3d实现点击可以获取省份信息，如果单独使用geo3d，无法获取到点击的省份信息。还有一些思路写在代码中了。文章来源地址https://www.toymoban.com/news/detail-600815.html

上代码

 var dom: any = document.getElementById("container")

 myChart = echarts.init(dom);
 let geoCoordMap: any = [
  {
    "name": "北京市", "value": [116.405285, 39.904989, 0] },
  {
    "name": "天津市", "value": [117.190182, 39.125596, 0] },
  {
    "name": "河北省", "value": [114.502461, 38.045474, 0] },
  {
    "name": "山西省", "value": [112.549248, 37.857014, 0] },
  {
    "name": "内蒙古自治区", "value": [111.670801, 40.818311, 0] },
  {
    "name": "辽宁省", "value": [123.429096, 41.796767, 0] },
  {
    "name": "吉林省", "value": [125.3245, 43.886841, 0] },
  {
    "name": "黑龙江省", "value": [126.642464, 45.756967, 0] },
  {
    "name": "上海市", "value": [121.472644, 31.231706, 0] },
  {
    "name": "江苏省", "value": [118.767413, 32.041544, 0] },
  {
    "name": "浙江省", "value": [120.153576, 30.287459, 0] },
  {
    "name": "安徽省", "value": [117.283042, 31.86119, 0] },
  {
    "name": "福建省", "value": [119.306239, 26.075302, 0] },
  {
    "name": "江西省", "value": [115.892151, 28.676493, 0] },
  {
    "name": "山东省", "value": [117.000923, 36.675807, 0] },
  {
    "name": "河南省", "value": [113.665412, 34.757975, 0] },
  {
    "name": "湖北省", "value": [114.298572, 30.584355, 0] },
  {