在leftlet 中使用echart和使用leaflet.ChineseTmsProviders图层的冲突

一、在底层地图图层的选择上
1、leaflet.ChineseTmsProviders提供了简单的选择方式:
var normalMap = L.tileLayer.chinaProvider(‘Google.Normal.Map’, {
maxZoom: 18,
minZoom: 5
}),
satelliteMap = L.tileLayer.chinaProvider(‘Google.Satellite.Map’, {
maxZoom: 18,
minZoom: 5
}),
routeMap = L.tileLayer.chinaProvider(‘Google.Satellite.Annotion’, {
maxZoom: 18,
minZoom: 5
});

var baseLayers = {
“地图”: normalMap,
“影像”: satelliteMap,
“标注”: routeMap
}

2、leaflet.ChineseTmsProviders底图的图层更加的丰富和详细,例如使用Google.Satellite可以得到更加清晰地地形信息

二、在进行业务展示上echart的表现能力更加丰富,如可以通过在原有图层上叠加echart应用的到用户迁徙图
var overlay = new L.echartsLayer3(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);

三、但是leaflet.ChineseTmsProviders和echart在地图上有冲突
1、如果叠加eachart的地图应用js:echartmain.min.js
则leaflet.ChineseTmsProviders图层无法显示
2、leaflet.ChineseTmsProviders使用元素默认名称为map
eahart不能使用map这么元素名称作为div名称

你可能感兴趣的:(gis,echarts,前端,javascript)