[Demo] add demo of map chart with flying lines

[xile611]

[Demo] add demo of map chart with flying lines

[FunctionEurus]

尝试了在官网散点地图demo上再组合一个折线图的思路~顺带加了流光动画。
效果及代码如下：

const response = await fetch('https://geojson.cn/api/data/china.json');
const geojson = await response.json();
VChart.registerMap('world', geojson);

const dataResponse = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/geojson/earthquake.json');
// const earthquakeData = await dataResponse.json();
const earthquakeData = {
  "values": [
    {
      "lng": 86.38,
      "lat": 43.82,
      "time": "2018-12-08 06:39:26",
      "level": "4.5",
      "depth": "10",
      "addr": "**昌吉州呼图壁县"
    },
    {
      "lng": 118.68,
      "lat": 40.21,
      "time": "2018-12-06 21:07:56",
      "level": "2.1",
      "depth": "13",
      "addr": "河北唐山市迁安市"
    },
    {
      "lng": 99.61,
      "lat": 23.92,
      "time": "2018-12-06 06:23:34",
      "level": "2.9",
      "depth": "5",
      "addr": "云南临沧市耿马县"
    },
    {
      "lng": 118.62,
      "lat": 23.36,
      "time": "2018-12-05 20:22:51",
      "level": "3.7",
      "depth": "15",
      "addr": "**海峡"
    },
    {
      "lng": 77.45,
      "lat": 40.4,
      "time": "2018-12-05 13:52:37",
      "level": "4.1",
      "depth": "17",
      "addr": "**克孜勒苏州阿图什市"
    }]
};
const center = {
  "lng": 119.2,
  "lat": 28.5,
  "addr": "浙江省金华市"
};

const spec = {
  type: 'common',
  region: [
    {
      roam: true,
      coordinate: 'geo',
      longitudeField: 'lng',
      latitudeField: 'lat',
      projection: {
        type: 'equirectangular'
      }
    }
  ],
  background: 'rgb(240, 248, 255)',
  data: [{ values: earthquakeData.values }],
  series: [
    { type: 'map', map: 'world', tooltip: { visible: false }, defaultFillColor: 'rgb(245,255,250)' },
    {
      type: 'scatter',
      xField: 'time',
      yField: 'addr',
      point: {
        style: {
          size: datum => Number(datum.depth),
          fill: 'green',
        }
      }, label: {
        visible: true,
        position: 'right',
        style: {
          fill: '#333',
          fontWeight: 'bold'
        }
      }
    },
    {
      type: 'line',
      seriesField: 'type',
      line: { style: { stroke: 'green' } },
      point: { visible: false },
      data: {
        values:
          [...earthquakeData.values.map((value, index) => ({ ...value, type: index })),
          ...earthquakeData.values.map((_, index) => ({ ...center, type: index }))]
      },
      animationNormal: {
        line: {
          loop: 500,
          duration: 2000,
          easing: 'quadIn',
          custom: VRender.StreamLight,
          customParameters: {
            streamLength: 30,
            attribute: { stroke: 'white', strokeOpacity: 0.5, lineWidth: 2 }
          }
        }
      }
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

[xile611]

@FunctionEurus 可以提交PR给我们，
示例的代码路径为：/docs/assets/examples
新增的示例需要在 docs/assets/examples/menu.json 中补充一下目录
截图的保存路径： docs/public/vchart/preview
示例本地预览方式为：

cd docs
rushx start 

@xiaoluoHe 示例的贡献文档可以再整理一下

[xiaoluoHe]

很抱歉，我在commit时遇到了这样的问题，想知道应该如何解决

$ git commit -m 'docs: add a map with flying lines demo'
The rush.json configuration requests Rush version 5.94.1
Transforming C:\Users\Admin\Desktop\VChart\common\config\rush\.npmrc
  --> "C:\Users\Admin\Desktop\VChart\common\temp\install-run\@[email protected]\.npmrc"
Installing @microsoft/rush...


Error: Unable to install package: Error: "npm install" encountered an error

尝试下：

1. 确认下是否全局安装了 rush，npm i --global @microsoft/rush
2. 在根目录下运行依次 rush purge 和 rush update

更多关于 demo task 的指南，希望能有一些帮助：

[xiaoluoHe]

@FunctionEurus 信息有点少。猜测还是 rush+pnpm 在 windows 下使用问题，rush 帮助文档里也提到可能和 npmrc 里配置有关。
我找一个 windows 电脑试试看能否复现。
如果这个问题一时难以解决，建议可以移步使用 wsl：https://code.visualstudio.com/docs/remote/wsl

[xiaoluoHe]

@FunctionEurus 问题已经定位到了，相关 pr #2710，等合并后更新代码再试一下。
若还是有问题，把 node 版本控制在 18.20.1 及以下试一试

[FunctionEurus]

想请问一下，我在demo中使用了第三方的geojson，这是否需要修改？

[xuanhun]

想请问一下，我在demo中使用了第三方的geojson，这是否需要修改？

先声明一下来源吧，

[FunctionEurus]

想请问一下，我在demo中使用了第三方的geojson，这是否需要修改？

先声明一下来源吧，

好的ovo

[FunctionEurus]

很抱歉，我在commit时遇到了这样的问题，想知道应该如何解决

$ git commit -m 'docs: add a map with flying lines demo'
The rush.json configuration requests Rush version 5.94.1
Transforming C:\Users\Admin\Desktop\VChart\common\config\rush\.npmrc
  --> "C:\Users\Admin\Desktop\VChart\common\temp\install-run\@[email protected]\.npmrc"
Installing @microsoft/rush...


Error: Unable to install package: Error: "npm install" encountered an error

[FunctionEurus]

很抱歉，我在commit时遇到了这样的问题，想知道应该如何解决

$ git commit -m 'docs: add a map with flying lines demo'
The rush.json configuration requests Rush version 5.94.1
Transforming C:\Users\Admin\Desktop\VChart\common\config\rush\.npmrc
  --> "C:\Users\Admin\Desktop\VChart\common\temp\install-run\@[email protected]\.npmrc"
Installing @microsoft/rush...


Error: Unable to install package: Error: "npm install" encountered an error

尝试下：

1. 确认下是否全局安装了 rush，npm i --global @microsoft/rush
2. 在根目录下运行依次 rush purge 和 rush update

更多关于 demo task 的指南，希望能有一些帮助：

感谢回复，已经尝试了该办法但依然无法提交。

[FunctionEurus]

okk，不过是指demo截图嘛？

[xiaoluoHe]

@FunctionEurus 麻烦提供下更详细的报错信息

[FunctionEurus]

><不好意思！就是已经安装了rush，然后根目录下依次运行rush purge和rush update之后git commit报错，错误如下