Echarts实现区级地图

最新推荐文章于 2024-12-20 21:50:34 发布

北凉悍卒

最新推荐文章于 2024-12-20 21:50:34 发布

阅读量9.5k

点赞数 8

分类专栏：前端文章标签： echarts 地图 GIS

本文链接：https://blog.csdn.net/kuankaka/article/details/90175004

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.寻找需要的地图

获取geojson地图：
Echarts 官方Geojson 数据已被禁止, 补充geojson数据获取:
[http://datav.aliyun.com/tools/atlas/]
如果需要绘制自定义区域可以只用这个网站
http://geojson.io/#map=4/35.64/103.54
推荐先用 Open-> File 打开一个需要补充区域的json 然后用方形工具描绘需要的区域;
获取js地图：
Echarts官网已关闭下载，可以取github下载地图：
[https://github.com/apache/incubator-echarts]

2.Echarts导入地图

引入jquery.js和echarts.js文件到页面

<script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src = "/js/echarts.min.js"></script>

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用示例：
JavaScript 引入示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

本例是采用第二种方式

2.完整实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>扬州市产业地图</title>
<script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src = "/js/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 1200px;height:900px;"></div>
<script type="text/javascript">
//container 为div的id 
var dom = document.getElementById("map");
//得到echarts的实例对象
var myChart = echarts.init(dom);

var optionMap = {
        tooltip : {
            trigger : 'item',
            formatter : function(a) {
                return "";
            },
            show:true,
            alwaysShowContent: true,
            enterable: true,
            backgroundColor:'rgba(255,255,255,0.7)',
            borderColor: '#019ADD',
            borderWidth: 2,
            padding: [5,10],
            textStyle: {
                color: '#000',
            }
        },
        //地图坐标系必备的配置，具体的含义可以参考api
        geo : {
            roam : false,//是否开启缩放和平移
            map : '360000',//地图名称
            zoom : 1.2,//当前视角缩放比例
            selectedMode : 'single',//选中模式
            label : {
                normal : {
                    show : true,
                    textStyle : {
                        color : '#fff'
                    }
                },
                emphasis : {
                    show : true
                }
            },
            itemStyle : {//地图区域的多边形 图形样式
                hoverAnimation : false,
                normal : {
                    color : '#0065CF',
                    borderColor : '#FFF'
                },
                emphasis : {
                    areaColor : '#A6C5BD',
                    borderColor : '#FFF',
                    opacity : 1
                }
            }
        },
        series : [ {
            type : 'effectScatter',//带有涟漪特效动画的散点（气泡）图
            coordinateSystem : 'geo',
            data : [{name:'1',value:[119.53,33.23,457]},
            	{name:'2',value:[119.58,32.86,135]},
            	{name:'3',value:[119.71,32.55,234]},
            	{name:'4',value:[119.54,32.32,89]},
            	{name:'5',value:[119.40,32.49,333]},
            	{name:'6',value:[119.18,32.38,298]}],
            symbol:'circle',
            symbolSize : 5,
            showEffectOn : 'render',
            rippleEffect : {
                scale : 10,
                brushType : 'stroke'
            },
            hoverAnimation : true,
            label : {
                normal : {
                    formatter : function(a){
                        return "";
                    },
                    show : true,
                    position:'inside',
                    offset : [0 , 20],
                    textStyle:{
                        color:'#fff'
                    }
                }
            },
            itemStyle : {
                normal : {
                    color : '#f4e925',
                    shadowBlur : 10,
                    shadowColor : '#333'
                }
            },
            zlevel : 1
        },{
            type : 'scatter',
            coordinateSystem : 'geo',
            data : [{name:'1',value:[119.53,33.23,457]},
            	{name:'2',value:[119.58,32.86,135]},
            	{name:'3',value:[119.71,32.55,234]},
            	{name:'4',value:[119.54,32.32,89]},
            	{name:'5',value:[119.40,32.49,333]},
            	{name:'6',value:[119.18,32.38,298]}],
            symbol:'pin',
            symbolSize : function(a){
                return a[2]==1?0:40;
            },
            rippleEffect : {
                scale : 10,
                brushType : 'stroke'
            },
            hoverAnimation : true,
            label : {
                normal : {
                    formatter : function(a){
                        return a.value[2];
                    },
                    show : true,
                    position: 'inside',
                    textStyle:{
                        color:'#fff'
                    }
                }
            },
            itemStyle : {
                normal : {
                    color : '#00DEFF',
                    shadowBlur : 10,
                    shadowColor : '#333'
                }
            },
            zlevel : 2
        },]
    };
	$.get('/js/yangzhou.json', function (myJson){
	    echarts.registerMap('yangzhou', myJson) //注册
	    optionMap.geo.map = 'yangzhou';
	    myChart.setOption(optionMap);
	});

</script>
</body>
</html>