ecomfe / echarts-gl

Extension pack for Apache ECharts, providing globe visualization and 3D plots.
BSD 3-Clause "New" or "Revised" License
2.6k stars 844 forks source link

geo3d与lines3D和scatter3D结合时,lines展示异常 #430

Open kakahanhaoniao opened 2 years ago

kakahanhaoniao commented 2 years ago
$.getJSON(
  ROOT_PATH + '/data-gl/asset/data/buildings.json',
  function (buildingsGeoJSON) {
    echarts.registerMap('buildings', buildingsGeoJSON);
    var regions = buildingsGeoJSON.features.map(function (feature) {
      return {
        name: feature.properties.name,
        value: Math.max(Math.sqrt(feature.properties.height), 0.1),
        height: Math.max(Math.sqrt(feature.properties.height), 0.1)
      };
    });
    myChart.setOption({
      geo3D: {
        room: true,
        map: 'world',
        boxHeight: 5,
        instancing: false,
        itemStyle: {
          color: 'rgb(5,101,123)',
          borderWidth: 0.8,
          opacity: 0.5,
          borderColor: 'rgb(62,215,213)'
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 12,
          opacity: 1,
          backgroundColor: 'rgba(0,0,0,0)'
        },
        emphasis: {
          label: {
            show: true,
            color: '#ffffff',
            fontSize: 12,
            backgroundColor: 'rgba(0,23,11,0)'
          }
        },
        light: {
          main: {
            color: '#fff',
            intensity: 1.2,
            shadow: false,
            alpha: 55,
            beta: 10
          },
          ambient: { intensity: 0.3 }
        },
        viewControl: { panMouseButton: 'right', alpha: 70 },
        zlevel: -10
      },
      series: [
        {
          type: 'lines3D',
          name: '',
          coordinateSystem: 'geo3D',
          show: true,
          effect: {
            show: true,
            period: 6,
            trailWidth: 5,
            trailOpacity: 0.5,
            trailLength: 0.2,
            constantSpeed: 5
          },
          blendMode: 'lighter',
          lineStyle: { width: 0.2, opacity: 0.02 },
          data: [
            {
              value: 123,
              coords: [
                [116.41995, 40.18994],
                [114.143142, 22.643377]
              ],
              fromName: '北京',
              toName: '深圳'
            },
            {
              value: 124,
              coords: [
                [102.87442, 25.387092],
                [114.143142, 22.643377]
              ],
              fromName: '昆明',
              toName: '深圳'
            },
            {
              value: 125,
              coords: [
                [108.797426, 34.10671],
                [114.143142, 22.643377]
              ],
              fromName: '西安',
              toName: '深圳'
            },
            {
              value: 126,
              coords: [
                [103.931804, 30.652329],
                [114.143142, 22.643377]
              ],
              fromName: '成都',
              toName: '深圳'
            },
            {
              value: 127,
              coords: [
                [87.783748, 43.739398],
                [114.143142, 22.643377]
              ],
              fromName: '乌鲁木齐',
              toName: '深圳'
            },
            {
              value: 128,
              coords: [
                [127.966759, 45.648633],
                [114.143142, 22.643377]
              ],
              fromName: '哈尔滨',
              toName: '深圳'
            },
            {
              value: 129,
              coords: [
                [91.091762, 30.037072],
                [114.143142, 22.643377]
              ],
              fromName: '拉萨',
              toName: '深圳'
            },
            {
              value: 130,
              coords: [
                [108.797426, 34.10671],
                [114.143142, 22.643377]
              ],
              fromName: '西安',
              toName: '深圳'
            },
            {
              value: 131,
              coords: [
                [103.931804, 30.652329],
                [114.143142, 22.643377]
              ],
              fromName: '成都',
              toName: '深圳'
            }
          ],
          zlevel: 2
        },
        {
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          name: '',
          distance: 50,
          show: true,
          opacity: 1,
          label: { position: 'top' },
          emphasis: {
            label: { show: false },
            itemStyle: { borderWidth: 5, opacity: 1 }
          },
          data: [
            {
              name: '朝阳',
              value: [120.021858, 41.516568, 233, { name: '朝阳', value: 233 }]
            },
            {
              name: '北京',
              value: [116.41995, 40.18994, 210, { name: '北京', value: 210 }]
            },
            {
              name: '深圳',
              value: [114.143142, 22.643377, 100, { name: '深圳', value: 100 }]
            },
            {
              name: '成都',
              value: [103.931804, 30.652329, 77, { name: '成都', value: 77 }]
            },
            {
              name: '西安',
              value: [108.797426, 34.10671, 125, { name: '西安', value: 125 }]
            },
            {
              name: '哈尔滨',
              value: [
                127.966759,
                45.648633,
                178,
                { name: '哈尔滨', value: 178 }
              ]
            },
            {
              name: '拉萨',
              value: [91.091762, 30.037072, 66, { name: '拉萨', value: 66 }]
            },
            {
              name: '乌鲁木齐',
              value: [87.783748, 43.739398, 88, { name: '乌鲁木齐', value: 88 }]
            },
            {
              name: '昆明',
              value: [102.87442, 25.387092, 88, { name: '昆明', value: 88 }]
            }
          ],
          zlevel: 1
        }
      ]
    });
  }
);

上述展示效果,基本无法看到攻击线 image

调整geo3D的三维场景中的高度值后,展示效果稍微好一些,但是散点3d原总是展示的为半个圆

image

最后,echarts5对于性能是有提升的,但是echarts-gl貌似没有这方面的处理,反而感觉渲染更慢了

helgasoft commented 2 years ago

@liuyu322, maybe you borrowed from the example code?
I don't think you need buildings.json. Data is huge and probable reason for your performance issue. image

Here is the code updated with a China map + some improvements in elevation.

Code ``` geo3D Demo
```