echarts矢量地图基本实现

最新推荐文章于 2024-07-09 07:36:37 发布

菜鸟娇嗔

最新推荐文章于 2024-07-09 07:36:37 发布

阅读量2.3k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_53987671/article/details/123921148

版权

一、获取地图的相关数据和引入要用到的js库

1.1-引入echarts和jquery库

在bootcdn中分别搜索echarts和jquery库，点击复制script标签引入html文件中

1.2-使用ajax请求获取中国地图的json数据

http://datav.aliyun.com/portal/school/atlas/area_selector

点击上面链接进入页面，复制json数据的请求地址

二、绘制矢量地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国地图的基本实现</title>
    <!-- 引入jquery和echarts库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
    <!-- <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script> -->
    <style>
        /* 为地图容器设置样式 */
        .x{
            height: 800px;
            width: 1200px;
            margin:0 auto;
            /* border: 1px solid black; */
        }
    </style>
</head>
<body>
    <!-- 创建一个容器容纳地图 -->
    <div class="x" id="x"></div>
    <script>
        let x = document.getElementById("x")
        // 初始化echarts实例
        let mycharts = echarts.init(x)
        //通过ajax请求获取地图的相关数据
        // ./map/china.json
        $.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",function(res){
            console.log(res);
            // 地图注册
            echarts.registerMap("chinaMap",res);
            // 设置图表的配置项
            let option = {
                geo:{
                    type:"map",//设置图表类型
                    map:"chinaMap",//需与上面echarts.registerMap方法的第一个参数保持一致
                    roam:true,//设置缩放和拖动
                    label:{
                        show:true,
                    },
                    zoom:1 ,// 设置初始化的缩放比例
                    center:[116.405285,39.904989]//设置地图中心点
                }
           }
            //生成图表（地图）
            mycharts.setOption(option)   
        })
    </script>
</body>
</html>

菜鸟娇嗔

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
echarts矢量地图基本实现

一、获取地图的相关数据和引入要用到的js库1.1-引入echarts和jquery库在bootcdn中分别搜索echarts和jquery库，点击复制script标签引入html文件中1.2-使用ajax请求获取中国地图的json数据http://datav.aliyun.com/portal/school/atlas/area_selector点击上面链接进入页面，复制json数据的请求地址二、绘制矢量地图<!DOCTYPE html><htm
复制链接

扫一扫