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

mapbox-gl版本1.10.0以后加载echarts-gl,拖拽不了,缩放卡顿 #412

Open YOUYOUNG opened 3 years ago

YOUYOUNG commented 3 years ago

问题描述:mapbox-gl版本升级至1.10.0及以上版本后,地图拖拽不了,缩放卡顿 版本号: mapbox-gl: 1.10.0 echarts: 5.1.1 echarts-gl: 2.0.4 代码如下:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mapbox-gl@1.10.0/dist/mapbox-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.4/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('map'));
  var uploadedDataURL = 'https://iclient.supermap.io/10.0.1/examples/data/ShanghaiBuildingPrice.json';
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
  myChart.showLoading();
  $.getJSON(uploadedDataURL, function (linedata) {
    myChart.hideLoading();
    myChart.setOption({
      visualMap: {
        show: false,
        calculable: true,
        realtime: false,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026',
          ],
        },
        outOfRange: {
          colorAlpha: 0,
        },
        max: linedata[1],
      },
      mapbox: {
        center: [121.4693, 31.12307],
        zoom: 10,
        pitch: 50,
        bearing: -10,
        style: 'mapbox://styles/mapbox/light-v9',
        boxHeight: 50,
        postEffect: {
          enable: true,
          SSAO: {
            enable: true,
            radius: 2,
            intensity: 1.5,
          },
        },
        light: {
          main: {
            intensity: 1,
            shadow: true,
            shadowQuality: 'high',
          },
          ambient: {
            intensity: 0,
          },
          ambientCubemap: {
            texture: 'https://iclient.supermap.io/10.0.1/examples/data/ShanghaiBuildingPrice.hdr',
            exposure: 1,
            diffuseIntensity: 0.5,
          },
        },
      },
      series: [
        {
          type: 'bar3D',
          shading: 'realistic',
          coordinateSystem: 'mapbox',
          barSize: 0.2,
          silent: true,
          data: linedata[0],
        },
      ],
    });
  });
</script>
helgasoft commented 3 years ago

Problem description: After the mapbox-gl version is upgraded to 1.10.0 and above, the map cannot be dragged and zoomed. Drag and zoom are a little slow, but they work. Using the latest:

<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>