echarts-gl icon indicating copy to clipboard operation
echarts-gl copied to clipboard

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

Open YOUYOUNG opened this issue 4 years ago • 1 comments

问题描述: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/[email protected]/dist/mapbox-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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>

YOUYOUNG avatar Jun 02 '21 07:06 YOUYOUNG

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>

helgasoft avatar Jul 15 '21 21:07 helgasoft