echarts-gl
echarts-gl copied to clipboard
mapbox-gl版本1.10.0以后加载echarts-gl,拖拽不了,缩放卡顿
问题描述: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>
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>