echarts引入json地图(乡镇级）

m0_63931867

已于 2025-03-24 12:45:40 修改

阅读量631

点赞数 9

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2025-03-24 11:41:05 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63931867/article/details/146471305

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

BIGEMAP
Bigemap系列产品-GIS行业基础软件kml\shp
下载地图数据。 KML 格式（不能直接导出KML格式，先导出bmv格式。用Bigemap 逐个打开bmv格式，选中对应的乡镇右键导出kml格式）

第二步（导入kml文件获取geoJson）
geojson.io
http://geojson.io/#map=2/20.0/0.0

导入第一步下载好的kml
在这里插入图片描述
导入所有的街道、镇数据的效果

右边红色圈的json数据就是我们需要放到echarts展示地图的geoJson数据新建 js 文件
复制右边的geoJson数据（ctrl a + ctrl + c），

注意：

var dongpingMap =  这是在geojson 数据中新增内容，其他不用修改  .此文件是dongpingMap.js

var dongpingMap = {
    "type": "FeatureCollection",
    "features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        116.3792225860848,
                        35.84428433445964
                    ],
                    [
                        116.37802058633571,
                        35.84351933200378
                    ],
                    [
                        116.37767758620403,
                        35.84296333094403
                    ],
                    [
                        116.37707658632951,
                        35.84331033197616,

代码: HTML

<!DOCTYPE html>
<html lang="en">

<head>

    
    <meta charset="UTF-8">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  <style>
   #map  {
  width: 1000px;
  height: 1000px;
  margin: auto;
  }
  </style>
  <script src="js/jquery.min.js"></script>
  <script src="js/echarts.min.js"></script>
    <script src="js/dongpingMap.js"></script>
  <script src="js/map.js"></script>

</head>
<body>
<div id="map"></div>
</body>
</html>

map.js文件内容：

$(function () {

    function dongpingChart () {

        var dongpingMapChart = echarts.init(document.getElementById('map'))

        // echarts.registerMap('dongping', dongpingMap, {})

        echarts.registerMap('dongping', dongpingMap, {})

        option = {

            geo: {

                // map: 'dongping',

                label: {

                    emphasis: {

                        show: false

                    }

                },

                roam: false,

                // zoom: 0.8,

            },

            series: [{

                type: 'map',

                mapType: 'dongping', //名称需要echarts.registerMap('dongping',dongpingMap,{})中的名称一致

                zoom: 1,

                itemStyle: {

                    normal: {

                        areaColor: 'rgba(2,37,101,.5)',

                        borderColor: 'rgba(112,187,252,.5)'

                    },

                    emphasis: {

                        areaColor: 'rgba(2,37,101,.8)',

                    }

                },

                label: {

                    show: true,

                    color: '#ffff'

                }, //显示文字

                roam: true,

                data: [],

            },],

        }

        dongpingMapChart.setOption(option, true)

        window.addEventListener('resize', function () {

            dongpingMapChart.resize()

        })

    }

    dongpingChart()

})

实现的效果图