使用echarts渲染乡镇街道地图

最新推荐文章于 2025-06-15 15:54:55 发布

ShuKKKK

最新推荐文章于 2025-06-15 15:54:55 发布

阅读量988

点赞数 24

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_33184225/article/details/144471596

使用echarts生成乡镇级地图显示（因大多地图数据获取网站只显示区县级数据）

文章目录

1.获取各个街（乡镇）地图json数据

1.1 下载街道json数据这里使用bigemap软件

bigemap下载地址下载全能版

安装打开后，点击地图高清，选择任意地区，后面在行政区域选择具体目标区域
请添加图片描述

选择地方高清后进行所需的区域进行数据的下载

请添加图片描述

选择合适的级别下载完成后找到对应文件夹中kml文件

请添加图片描述

1.2 重复下载步骤下载玩所有街道数据，使用合并网站geojson.io进行数据合并

将下载的kml数据导入，全部导入后，save使用geojson格式导出，导出后的geojson使用时无效，格式检测显示违反多边形右手原则，这里猜测与导入顺序有关。
请添加图片描述

使用geojson编辑工具导入直接导出即可，该网站不稳定偶尔进不去。导出之后json数据就可以用了

请添加图片描述

在这里插入图片描述

自此echarts所需地图数据处理完毕

2. 使用echarts在地图中进行渲染

2.1引入echarts.js 和jquery（用于获取我们的geojson数据）

	<script src="<c:url value="自己定义echarts路径，也可以通过其他方式引入"/>"></script>
	<script src="<c:url value="自己定义jquery路径，也可以通过其他方式引入"/>"></script>

2.2定义一个有高度的div块，指定id，用于echarts渲染地图使用

  <div id="townsMap" style="width: 100%; height: 800px;></div>

2.3初始化echarts实例

<script>
// 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('townsMap'));
</script>

2.4因为echarts库里没有街道地图数据，我们导入json数据，需要注册一下

这里将我们上面的处理得到的街道地图json数据存放在项目里，使用jquery获取并使用

<script>
$.getJSON('项目中地图数据存放完整路径及文件名', function (data) {
    // 指定图表的配置项和数据

    // 注册街道地图数据
    echarts.registerMap('town', data);}）
 </script>

<script>
var option = {
        geo: {
            map: 'town',//表示使用的是我们注册的地图
            roam: true,//可以拖拽
        },
        // 其他配置项...
    };
</script>

<script>
// 使用刚指定的配置项和数据显示地图。
myChart.setOption(option);
</script>


到这里基本流程及结束了，暂时是在已有的代码上修改获取的经验，如有错误不足请多多指点。主要解决json数据的获取问题，echarts使用这里不够清晰可以参考其他文章或者参考官方文档。