EChart显示地图信息例子

Posted on 2022-07-25 15:31 火冰·瓶阅读(375) 评论(0) 编辑收藏举报

1	`<div` `class="cen-top map"` `id="kangding_map"></div>`

function map() {
 
    var data = [
        { name: '炉城镇', value: [101.963055, 30.004495, 0] },
        { name: '惠拓', value: [101.402891, 29.666276, 0] },
        { name: '建云', value: [102.27789, 30.359193, 0] },
        { name: '益瑞', value: [102.05873, 30.102842, 0] }            
    ]      
 
    var myChart = echarts.init(document.getElementById('kangding_map'));
 
    $.getJSON("/lib/geojson/513301.json", function (geoJson) {//geojson数据来源于：http://datav.aliyun.com/portal/school/atlas/area_selector
 
        echarts.registerMap('康定市', geoJson);//#2
 
        option = {
            geo: {
                map: '康定市',
                itemStyle: {
                    normal: {//普通状态
                        areaColor: '#cfcfcf',
                        borderColor: '#fff',
                        show: false
                    },
                    emphasis: {//高亮状态
                        areaColor: '#cfcfcf',
                        borderColor: '#fff',
                        show: false
                    }
                }
            },
            series: [
                {
                    coordinateSystem: 'geo', // series坐标系类型
                    type: 'scatter', //散点图
                    data: data,
                    roam: false,
                    symbol: 'path://M512 736.981333L775.68 896l-69.76-299.904L938.666667 394.410667l-306.816-26.325334L512 85.333333 392.149333 368.085333 85.333333 394.410667l232.746667 201.685333L248.32 896z',  //五角星
                    symbolSize: 16,
                    encode: {
                        value: 2
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        lineHeight: 15,
                        show: true,
                        emphasis: {
                            textStyle: {
                                color: '#EC652A' //设置活动状态下字体样式，会跟随散点高亮
                            }
                        }
                    },
                    itemStyle: {
                        normal: {           // 散点图标普通状态下的样式
                            color: '#333'
                        },
                        emphasis: {         // 散点图标高亮状态下的样式
                            color: '#EC652A',
                        },
                        shadowBlur: 10,
                        shadowColor: '#333'
                    },
                    zlevel: 1
                }
            ]
        }
 
         
        myChart.setOption(option);
 
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            // 使用 dataIndex 来定位节点。（定义的数据的下标）
            dataIndex: 0
        });
    })
 
 
 
    window.addEventListener("resize", function () {
        myChart.resize();
    });
 
    // end基于准备好的dom，初始化echarts实例
}