JZTXT

关于echarts自定义地图知识点

发布时间 2023-07-06 16:57:42作者: 闲时一点
<div id="dt" style="width: 1200px;height:800px;text-align: center;margin: 0 auto;"></div>
<script>
var chart = echarts.init(document.getElementById('dt'));
    var convertData = function (data) { // 处理数据函数
var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = data[i].LngAndLat;
            if (geoCoord) {
                res.push({
                    name: data[i].name,
value: geoCoord.concat(data[i].value),
href: data[i].href
});
}
        }
        console.log(res)
        return res;
};
$.get('/static/js/gzy.json',(data)=>{
        var sanData = [ // 散点数据
{name: '镇雄',value: '镇雄',LngAndLat: [104.873055,27.436267],href:'/zt/'},
{name: '昭通',value: '昭通',LngAndLat: [103.717216,27.336999],href:'/zt/'},
{name: '习水',value: '习水',LngAndLat: [106.200954,28.327826],href:'/zy/'},
{name: '绥阳',value: '绥阳',LngAndLat: [107.191024,27.951342],href:'/zy/'},
{name: '桐梓',value: '桐梓',LngAndLat: [106.826591,28.131559],href:'/zy/'},
{name: '遵义',value: '遵义',LngAndLat: [107.00637,27.70434],href:'/zy/'},
{name: '金海湖',value:'金海湖',LngAndLat: [105.46125,27.21520],href:'/bj/'},
{name: '大方',value: '大方',LngAndLat: [105.609254,27.143521],href:'/bj/'},
{name: '赫章',value: '赫章',LngAndLat: [104.726438,27.119243],href:'/bj/'},
{name: '威宁',value: '威宁',LngAndLat: [104.42058,26.77127 ],href:'/bj/'},
{name: '纳雍',value: '纳雍',LngAndLat: [105.39662,26.77171],href:'/bj/'},
{name: '织金',value: '织金',LngAndLat: [105.768997,26.668497],href:'/bj/'},
{name: '金沙',value: '金沙',LngAndLat: [106.222103,27.459693],href:'/bj/'},
{name: '黔西',value: '黔西',LngAndLat: [106.038299,27.024923],href:'/bj/'},
{name: '毕节',value: '毕节',LngAndLat: [105.31383,27.30524],href:'/bj/'},
{name: '清镇',value: '清镇',LngAndLat: [106.48562,26.57000],href:'/gy/'},
{name: '贵阳',value: '贵阳',LngAndLat: [106.67137,26.63018],href:'/gy/'}
        ];
echarts.registerMap('gzyMap',data)
        let option = {
            geo: {
                type: 'map',
map: 'gzyMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
                    show: true,  //展示标签
normal: {
                        show: true,
fontSize: 15
},
emphasis: {
                        show:true,
fontSize: 15,
color:"#fff"
}
                },
zoom: 1.2,
itemStyle: {
                    normal: {//地图默认颜色
borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
emphasis: {//地图hover默认颜色
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f3a56c",
}
                }
            },
backgroundColor: '#fff',
title: {
                text: '',
subtext: '',
left: 'center',
textStyle: {
                    color: '#000'
}
            },
series: [
                {
                    name: '',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(sanData),
encode: {
                        value: 2
},
backgroundColor: "red",
symbolSize: 0.5,
label: {
                        normal:{
                            show:true,
formatter:function(params){ //标签内容
return  params.name;
},
lineHeight: 20,
backgroundColor:'rgba(255,255,255,.9)',
borderColor:'red',
borderWidth:'1',
borderRadius: 10,
padding:[5,15,4],
color:'#000000',
fontSize: 14,
fontWeight:'normal',
},
emphasis: {
                            show: true,
borderColor:'#009fe8',
}
                    },
itemStyle: {
                        normal: {
                            show:true,
color: '#fff', //标志颜色
borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
emphasis: {
                            color: '#fff', //标志颜色
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f47920",
}
                    }
                }
            ],
// visualMap: {
            //     show:false,
            //     seriesIndex: 0 // 仅使第一个series生效
// },
}
        chart.setOption(option)
})
</script>

geo属性来绘制地图。
数据源可以去
[<script> 
var chart = echarts.init(document.getElementById('dt'));
    var convertData = function (data) { // 处理数据函数
var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = data[i].LngAndLat;
            if (geoCoord) {
                res.push({
                    name: data[i].name,
value: geoCoord.concat(data[i].value),
href: data[i].href
});
}
        }
        console.log(res)
        return res;
};
$.get('{pboot:sitetplpath}/static/js/gzy.json',(data)=>{
        var sanData = [ // 散点数据
{name: '镇雄',value: '镇雄',LngAndLat: [104.873055,27.436267],href:'/zt/'},
{name: '昭通',value: '昭通',LngAndLat: [103.717216,27.336999],href:'/zt/'},
{name: '习水',value: '习水',LngAndLat: [106.200954,28.327826],href:'/zy/'},
{name: '绥阳',value: '绥阳',LngAndLat: [107.191024,27.951342],href:'/zy/'},
{name: '桐梓',value: '桐梓',LngAndLat: [106.826591,28.131559],href:'/zy/'},
{name: '遵义',value: '遵义',LngAndLat: [107.00637,27.70434],href:'/zy/'},
{name: '金海湖',value:'金海湖',LngAndLat: [105.46125,27.21520],href:'/bj/'},
{name: '大方',value: '大方',LngAndLat: [105.609254,27.143521],href:'/bj/'},
{name: '赫章',value: '赫章',LngAndLat: [104.726438,27.119243],href:'/bj/'},
{name: '威宁',value: '威宁',LngAndLat: [104.42058,26.77127 ],href:'/bj/'},
{name: '纳雍',value: '纳雍',LngAndLat: [105.39662,26.77171],href:'/bj/'},
{name: '织金',value: '织金',LngAndLat: [105.768997,26.668497],href:'/bj/'},
{name: '金沙',value: '金沙',LngAndLat: [106.222103,27.459693],href:'/bj/'},
{name: '黔西',value: '黔西',LngAndLat: [106.038299,27.024923],href:'/bj/'},
{name: '毕节',value: '毕节',LngAndLat: [105.31383,27.30524],href:'/bj/'},
{name: '清镇',value: '清镇',LngAndLat: [106.48562,26.57000],href:'/gy/'},
{name: '贵阳',value: '贵阳',LngAndLat: [106.67137,26.63018],href:'/gy/'}
        ];
echarts.registerMap('gzyMap',data)
        let option = {
            geo: {
                type: 'map',
map: 'gzyMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
                    show: true,  //展示标签
normal: {
                        show: true,
fontSize: 15
},
emphasis: {
                        show:true,
fontSize: 15,
color:"#fff"
}
                },
zoom: 1.2,
itemStyle: {
                    normal: {//地图默认颜色
borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
emphasis: {//地图hover默认颜色
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f3a56c",
}
                }
            },
backgroundColor: '#fff',
title: {
                text: '',
subtext: '',
left: 'center',
textStyle: {
                    color: '#000'
}
            },
series: [
                {
                    name: '',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(sanData),
encode: {
                        value: 2
},
backgroundColor: "red",
symbolSize: 0.5,
label: {
                        normal:{
                            show:true,
formatter:function(params){ //标签内容
return  params.name;
},
lineHeight: 20,
backgroundColor:'rgba(255,255,255,.9)',
borderColor:'red',
borderWidth:'1',
borderRadius: 10,
padding:[5,15,4],
color:'#000000',
fontSize: 14,
fontWeight:'normal',
},
emphasis: {
                            show: true,
borderColor:'#009fe8',
}
                    },
itemStyle: {
                        normal: {
                            show:true,
color: '#fff', //标志颜色
borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
emphasis: {
                            color: '#fff', //标志颜色
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f47920",
}
                    }
                }
            ],
// visualMap: {
            //     show:false,
            //     seriesIndex: 0 // 仅使第一个series生效
// },
}
        chart.setOption(option)
        chart.on('click',function (param) {
            if(param.componentType=='series'){
                window.location = param.data.href;
}
            if(param.componentType=='series'){
                window.location = param.data.href;
}
            if(param.componentType=='geo'){
                if(param.name=='遵义市'){
                    window.location = '/zy/';
}
                if(param.name=='毕节市'){
                    window.location = '/bj/';
}
                if(param.name=='昭通市'){
                    window.location = '/zt/';
}
                if(param.name=='贵阳市'){
                    window.location = '/gy/';
}
            }
        });
})
    let city = $(".mdcate a")
    let select_city = '{$session.city}';
    for (let i=0;i<city.length;i++){
        if(select_city == city[i].getAttribute('value')) {
            city.eq(i).addClass('on')
        }
    }
</script>
    {        "name": "镇雄",        "value": [            104.873055,            27.436267,            "镇雄"        ],        "href": "/zt/"    },    {        "name": "昭通",        "value": [            103.717216,            27.336999,            "昭通"        ],        "href": "/zt/"    },    {        "name": "习水",        "value": [            106.200954,            28.327826,            "习水"        ],        "href": "/zy/"    },    {        "name": "绥阳",        "value": [            107.191024,            27.951342,            "绥阳"        ],        "href": "/zy/"    },    {        "name": "桐梓",        "value": [            106.826591,            28.131559,            "桐梓"        ],        "href": "/zy/"    },    {        "name": "遵义",        "value": [            107.00637,            27.70434,            "遵义"        ],        "href": "/zy/"    },    {        "name": "金海湖",        "value": [            105.46125,            27.2152,            "金海湖"        ],        "href": "/bj/"    },    {        "name": "大方",        "value": [            105.609254,            27.143521,            "大方"        ],        "href": "/bj/"    },    {        "name": "赫章",        "value": [            104.726438,            27.119243,            "赫章"        ],        "href": "/bj/"    },    {        "name": "威宁",        "value": [            104.42058,            26.77127,            "威宁"        ],        "href": "/bj/"    },    {        "name": "纳雍",        "value": [            105.39662,            26.77171,            "纳雍"        ],        "href": "/bj/"    },    {        "name": "织金",        "value": [            105.768997,            26.668497,            "织金"        ],        "href": "/bj/"    },    {        "name": "金沙",        "value": [            106.222103,            27.459693,            "金沙"        ],        "href": "/bj/"    },    {        "name": "黔西",        "value": [            106.038299,            27.024923,            "黔西"        ],        "href": "/bj/"    },    {        "name": "毕节",        "value": [            105.31383,            27.30524,            "毕节"        ],        "href": "/bj/"    },    {        "name": "清镇",        "value": [            106.48562,            26.57,            "清镇"        ],        "href": "/gy/"    },    {        "name": "贵阳",        "value": [            106.67137,            26.63018,            "贵阳"        ],        "href": "/gy/"    }]