自定义绘制地图（Echarts）

需求说明：

今天本来在认认真真摸鱼的时候，突然接到一个客户需求，说是做一个首页，首页里面有一个本市的地图，通过点击不同的区域的地图块，然后跳转到对应区域的办公系统。

实践：

虽然作为一个后端程序员，但是这个小前端还是有信心的，然后就去Echarts官网找，后来发现一个问题，因为客户需求中有明确要求7个区县，但是地图中只有6个，有一个新区是才划分出来的。那么问题来了，新区怎么划分坐标，只能根据客户提供的图片来画，关键就是怎么定义坐标。

但是这并不能难道机智的我，因为精确度要求不高，所以就画一个大概，首先去地图选择器找一个对应的地图Json，推荐使用阿里的地图选择器；

有一个包含子区域选项，勾选以后才会区分区域模块，然后下载下来就OK。

当然，这个不是我想要的完整的，所以还需要将这个完善一下，这里就要用到另一个网站：http://geojson.io

这个网站可以进行自定义区域模块，打开以后点击左上角：Open>File ，将刚刚我们下载的JSON文件导入进去，就会显示你JSON文件中定位的区域。

点击红框的地方进行标点，然后就放大地图，按照自己想要的形状进行疯狂点点点，注意最后一个点与第一个点重叠就会形成一个完整的地图块。然后点击地图块保存即可，将右边的坐标JSON复制出来就可以了。

接下来就是将JSON引入到Echarts中使用就可以了。

记录一下，感觉以后还会用到，如果有更好的希望给我讲一下哈

自定义绘制地图（Echarts）相关推荐

世界地图自定义绘制结合echarts，实现点击介绍项目
接到项目,要求西澳地图,点击相应的地方出现当地旅游项目.开整. 1.DateV只有国内的边界图,不适合,如果只是做国内的直接去DataV.GeoAtlas地理小工具系列这里拿GeoJson就好了. 2 ...
使用udig绘制地图点的样式
最新有个需求,绘制地图样式,在此使用udig自定义绘制地图点的样式,代码如下: <?xml version="1.0" encoding="ISO-8859-1&q ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
echarts实现自定义扩展地图-中国七大区域图
相信很少用echarts的人第一次接触时会有很多疑惑,比如,在百度突然看到一段代码,感觉莫名奇妙,不知道怎么用.正所谓熟能生巧,当你专一用echarts一个月后,你会发现其实任何技术并没有想象那么难. ...
echarts r 地图_用R与Stata绘制地图，让文稿shinly起来
有时候,我们在写文稿时,可能会涉及到数据的"统计制图"这一个环节.比如我们会遇到这样一批数据集,绘制全国31个省人均GDP的空间分布特征,以探索不同地区的经济发展水平差异. 这时候 ...
百度地图之自定义绘制功能
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) 我们可以在地图上绘制各种自定义的图形,包括点.折线.圆.多边形等等,尤其绘制点和折线非常实用,点可以用来标识所 ...
echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
echarts使用中过程中的常用配置属性常见问题及绘制地图
echarts使用中的常见的问题 1.给折线图画一条水准线 2.图表自适应容器 3.x轴文字过长显示不全的问题 4.echarts的点击事件 5.数据中如果有空值时如何实现连接空值或者显示断开 6. ...

自定义绘制地图（Echarts）

需求说明：

实践：

自定义绘制地图（Echarts）相关推荐

最新文章

热门文章