自己制作echarts Map 最新地图,生成最新的 echarts Map地图JSON文件

写在前面

用于echarts 首页的地图很美观实用。不过网上下载的地图也会有一些问题,比如 地图文件 不是最新的,很多区县没有;想要 乡镇的地图;地图需要拼接 等等等等,通过这篇文章你只需要花点时间就可以制作 自定义想要的地图了。我碰到的问题就是 地图不是最新的(比如南昌市的地图没有红谷滩新区,高新区,经开区等)。因为给市政府的项目,然后 他们提供了 2020 最新的南昌市的电子地图 .shp 文件(其实没有也没有关系) ,然后通过自己制作的地图实现了南昌市最新的地图效果(本文最后总结处土提供了南昌市地图下载地址),如下:
在这里插入图片描述

分析地图文件

echarts 用的地图数据文件为json 文件

  1. 获取省市县数据 (github 上面一搜索 有很多github链接)
  2. 打开一个json 数据分析如下:
    在这里插入图片描述

注意
1.构成区域的点位数组可能有多个子项(一个封闭的面就是一个子项),这样的话 geometry.type 就不是 Polygon,而是 MultiPolygon 。并且 properties.childNum 也要改变
2.geometry.type=MultiPolygon 时,geometry.coordinates 数组的子项是要多一个中括号的。 []

自己制作地图数据文件

上面分析的文件组成,发现制作地图数据文件的难点就是构成区域面的点位数组。然后发现这个就简单了。

下面说明2中方法 获取地图坐标数组

1.借助工具网站 http://geojson.io/ 绘制地图

在这里插入图片描述

通过这个网站 利用上面的工具,通过添加地图点位绘制 geometry 就可以自动生成 coordinates 坐标。拿到坐标就可以 按照上面分析的格式 制作地图了。只要愿意花时间,什么地图都可以制作了。

2.利用 arcMap 绘制地图

arcgis 是收费软件,需要破解。有gis 开发经验的人可能会更加的得心应手一点。我也是新手,以前只用过 superMap。所以安装破解了一下,需要的自取:

链接:https://pan.baidu.com/s/1EULEvcYEJCUXrOEgmQ-mcw 密码:x3x1

利用 arcMap 绘制好地图 保存的文件为 .shp 文件。需要把 .shp 文件转成geojson 。

shp 文件 转 geojson 网站工具 http://blog.giscafer.com/mapshaper-plus/
这样的话也是可以制作成功的

总结

  • 先分析数据结构
  • 绘制地图获取坐标数组
  • 按照数据结构生成文件
  • 南昌市最新地图json 文件下载 地址

本文使用的方法很笨但是有用,如果有更好的办法 欢迎评论讨论

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现echarts的3D地图效果,可以使用geo属性来生成地图。首先,需要引入坐标json数据并注册地图。可以在mounted钩子函数中使用echarts.init方法初始化echarts,并使用echarts.registerMap方法注册地图。然后,在data选项中定义option对象,通过geo属性来配置地图的样式和堆叠效果。可以根据实际效果调整top值来实现堆叠效果,zlevel值越大,图层则越往上。可以定义多个geo属性来构建多个相同的地图,每个地图可以设置不同的样式。可以通过itemStyle属性来设置地图的背景颜色、边框颜色等。最后,使用chart.setOption方法将option配置应用于echarts实例,即可实现echarts的3D地图效果。 示例代码如下: ```javascript import jiangsu from "./jiangsu.json" // 引入地图json数据 import echarts from "echarts" export default { name: "app", data() { return { option: { geo: [ { map: 'JS', label: { show: true, color: '#eee' }, itemStyle: { color: '#2075B8', // 背景颜色 borderWidth: '1', // 边框宽度 borderColor: '#fff', // 边框颜色 } }, { map: 'JS', top: '11%', zlevel: 4, itemStyle: { color: '#3C5FA1', // 背景颜色 borderWidth: '1', // 边框宽度 borderColor: '#3C5FA1', // 边框颜色 } }, { map: 'JS', top: '12%', zlevel: 3, itemStyle: { color: '#163F6C', // 背景颜色 borderWidth: '1', // 边框宽度 borderColor: '#163F6C', // 边框颜色 } }, { map: 'JS', top: '13%', zlevel: 2, itemStyle: { color: '#31A0E6', // 背景颜色 borderWidth: '1', // 边框宽度 borderColor: '#31A0E6', // 边框颜色 shadowColor: '#fff', // 外部阴影颜色 shadowBlur: '10' // 外部阴影模糊度 } } ] } } }, mounted() { let chart = echarts.init(document.getElementById('main')); echarts.registerMap('JS', jiangsu); chart.setOption(this.option); } } ``` 通过以上代码可以实现echarts的3D地图效果。在echarts的geo属性中配置不同的图层样式和堆叠效果,可以实现更加丰富的地图效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [使用Echarts实现地图3D效果](https://blog.csdn.net/m0_61644055/article/details/124194601)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值