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

如何在echarts-x的 map3d 上添加china.json #251

Open AnShengLI opened 6 years ago

AnShengLI commented 6 years ago

require.config({ paths: { 'echarts': 'js', 'echarts-x': 'js' } });

// 然后就可以动态加载图表进行绘制啦
require([
    'echarts',
    'echarts-x',
    // ECharts-X 中 map3d 的地图绘制基于 ECharts 中的 map。
    'echarts/chart/map',
    'echarts-x/chart/map3d'
], function (ec) {
    // 跟 ECharts 一样的方式初始化
    var myChart = ec.init(document.getElementById('container'));
    myChart.setOption({
        tooltip: {
            formatter: '{b}'
        },
        series: [{
            type: 'map3d',
            mapType: 'world',
            hoverable: false,
            clickable: false,
            geoCoord: {
                "巴黎": [16.46, 39.92],           // 支持数组[经度,维度]
                "广州": [113.23, 23.16]
            },

            baseLayer: {
                backgroundColor: 'rgba(0, 150, 200, 0.5)',
                backgroundImage: 'asset/world3.png',
                quality: 'high',
            },
            light:{
                    show:"true",//是否显示日照
                    sunIntensity:1,//日照强度
                    ambientIntensity: 0.6//环境光照强度
                },
            itemStyle: {
                normal: {
                    label: {
                        show: false,

                    },
                    borderWidth: 2,
                    borderColor: "rgba(65,99,158,0.9)",
                    areaStyle: {
                        color: "rgba(0,0,52,0.2)"  
                    }
                }
            },
            roam:{
                autoRotate: false,
                focus:"China"//开始聚焦在中国
            },
            data: [{
                name:'China',
                selected: true,
                emphasis:{
                    color: 'red'
                }
            }],
            markPoint: {
                large: true,
                symbol:'circle',
                symbolSize: 8,
                effect: {
                    show: true,
                    shadowBlur: 0.4
                },
                data: [
                    {name: '巴黎'},
                    {name: '广州'}
                ]
            },
            markLine: {
                smooth: true,
                effect: {
                    show: true,
                    scaleSize: 3,
                    loop:false,
                    period: 5,             // 运动周期,值越大越慢
                    color: '#fff'
                },
                itemStyle: {
                    borderWidth: 10,
                    normal: {
                        borderWidth: 10,
                        width: 2,
                        opacity:0.5,
                        color: 'red',
                        lineStyle: {
                            type: 'solid',
                            width: 2,
                            borderWidth: 10,
                            shadowBlur: 10
                        }
                    }
                },
                data: [[
                    {name: '巴黎', value: 100},
                    {name: '广州'}
                ]],
            },
        }

        ]
    });
})
AnShengLI commented 6 years ago

通过canvas,创建china地图层,添加到map3d上,达不到效果 var canvas = document.createElement('canvas'); // 引入中国json数据 var chinaChart = echarts.init(canvas, null, { width: 4096, height: 3048 }); $.get('./geo/china.json', function (map) { echarts.registerMap('china', map); chinaChart.setOption({ series: [{ name: '中国', type: 'map', aspectScale: 1.0, roam: true, map: 'china', left: 0, top: 0, right: 0, bottom: 0, boundingCoords: [ // 定位左上角经纬度 [-180, 90], // 定位右下角经纬度 [180, -91] ], label:{ normal:{ show:true, color:'#fff', fontSize:18 }
}, itemStyle:{
normal:{
areaColor:"rgba(0,0,52,0.9)"
}
} }] }); });

在以下引用图层 surfaceLayers:{ name: 'china', type:'texture', image: chinaChart },

如此为何出来不想要的效果,求解答。

xiaozutongxue commented 2 years ago

请问china.json从哪里寻找,我找到的json数据china不显示,但是省份都是可以的,map3d和geo3d是同样的问题