【Echarts】加载二维地图

最新推荐文章于 2024-02-02 10:30:13 发布

程序员不丑009

最新推荐文章于 2024-02-02 10:30:13 发布

阅读量601

点赞数 1

分类专栏：前端知识文章标签： Echarts 地图南京市视觉映射前端开发

本文链接：https://blog.csdn.net/u013517229/article/details/118110889

版权

前端知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts 地图</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px;"></div>
<script type="text/javascript">
        $.get("南京市.json", function(huaianJson) {
            echarts.registerMap("nanjing", huaianJson);
            var chart = echarts.init(document.getElementById("map"));
            chart.setOption({
                backgroundColor: "#404a59",
                visualMap: {
                    type: "continuous",
                    min: 0,
                    max: 100,
                    color: ["#3ADEF1", "#0089FC", "#0057FE"],
                    show: false // 图例条
                },
                series: [
                    {
                        type: "map",
                        mapType: "nanjing",
                        // center: [104.114129, 37.550339],//当前视角的中心点
                        zoom: 1, //当前视角的缩放比例
                        roam: true, //是否开启平游或缩放
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 3
                        },
                        label: {
                            normal: {
                                show: true,
                                color: "#0089FC"
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: [
                            { name: "六合区", value: 80 },
                            { name: "浦口区", value: 90 }
                        ]
                    }
                ]
            });
        });
</script>
</body>
</html>

地图JOSN数据下载地址：http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4

参考：

一站式解决echarts实现区域地图：https://juejin.cn/post/6844903912294580231