echarts + GeoJSON 地图绘制（德国县级地图为例）

最新推荐文章于 2024-06-11 21:36:57 发布

小熊果汁

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量4.3k

点赞数 1

文章标签： javascript 大数据其他

本文链接：https://blog.csdn.net/qq_37972108/article/details/114291805

版权

echarts + GeoJSON 地图绘制

GeoJSON文件获取
- 德国（县级）GeoJSON文件获取
- .shp 文件转GeoJSON文件
echarts + GeoJSON绘制地图（德国为例）
- 整体代码
- 读取geojson文件组装data
结果展示

GeoJSON文件获取

德国（县级）GeoJSON文件获取

GeoJSON文件可访问：https://download.csdn.net/download/qq_37972108/15559670进行下载（该资源本人通过购买获得，供大家有偿使用）。

.shp 文件转GeoJSON文件

.shp文件可访问：https://download.csdn.net/download/qq_37972108/15559840进行下载（该资源本人通过购买获得，供大家有偿使用）。
使用在线工具mapshaper进行转换：https://mapshaper.org/

点击select选择shp文件

在这里插入图片描述

选择GeoJSON 并点击Export

在这里插入图片描述

地图展示及导出为GeoJSON文件

echarts + GeoJSON绘制地图（德国为例）

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Germany</title>
    <script src="../static/echarts.js"></script>
    <script src="../static/jquery.min.js"></script>
    <style>
        html, body, #main {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
    $.get("../static/Germany.json", function (map) { // 读取GeoJSON文件
        // 组装数据 --start
        var features = map["features"]
        data1 = []
        for (var i = 0; i < features.length; i++) {
            var properties = features[i]["properties"]
            var name1 = properties["name"]
            var Insgesamt = properties["Insgesamt"]
            var temp = {name: name1, value: Insgesamt}
            data1.push(temp)
        }
        // 组装数据 -- end
        
        var myChart = echarts.init(document.getElementById('main'));
        echarts.registerMap("luoyang", map);
        var option = {
            tooltip: {//提示框组件。
                trigger: 'item',
            },
            visualMap: { //地图图例，实现颜色渐变
                min: 0,
                max: 250000,
                left: '20%',
                top: '60%',
                inRange: {
                    color: ['green', 'yellow', 'red']
                },
                text: ['high', 'low'],
                calculable: true
            },
            series: [{
                map: "Germany",
                type: "map",
                aspectScale: 1.0,
                selectedMode: 'single',//选择类型,
                hoverable: false,//鼠标经过高亮
                roam: true,//鼠标滚轮缩放
                data: data1,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#ffffff',//区域边框色
                        areaColor: '#FFDAB9',//区域背景色
                        label: {
                            show: false,
                            textStyle: {
                                color: '#6495ED',//文字颜色
                                fontSize: 18      //文字大小
                            }
                        }
                    },
                    emphasis: {          // 选中样式--显示name
                        borderWidth: 1,
                        borderColor: '#00ffff',
                        color: '#ffffff',
                        label: {
                            show: true,
                            textStyle: {
                                color: '#ff0000'
                            }
                        }
                    }
                }
            }]
        };
        myChart.setOption(option);
    });
</script>
</body>
</html>

读取geojson文件组装data

// 组装数据
var features = map["features"]
data = []
for (var i = 0; i < features.length; i++) {
   var properties = features[i]["properties"]
   var name1 = properties["name"]
   var Insgesamt = properties["Insgesamt"]
   var temp = {name: name1, value: Insgesamt}
   data.push(temp)
}

结果展示

在这里插入图片描述

小熊果汁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts + GeoJSON 地图绘制（德国县级地图为例）

echarts + GeoJSON 地图绘制GeoJSON文件获取德国（县级）GeoJSON文件获取.shp 文件转GeoJSON文件echarts + GeoJSON绘制地图（德国为例）整体代码读取geojson文件组装data结果展示GeoJSON文件获取德国（县级）GeoJSON文件获取.shp 文件转GeoJSON文件使用在线工具mapshaper进行转换：https://mapshaper.org/点击select选择shp文件选择GeoJSON 并点击Export地图
复制链接

扫一扫