随着开发 数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理上饶市婺源县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts上饶市婺源县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts上饶市婺源县geoJson地图 visualMap控制地图颜色
echarts地图使用visualMap通过一组颜色及一组数据来实现地图不同区域根据不同数据进行颜色变化
echarts上饶市婺源县geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
threejs上饶市婺源县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果想系统的学习threejs的话,可以观看threejs教程视频 Three.js视频教程3D可视化
threejs上饶市婺源县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
上饶市婺源县 下辖有 中云镇,太白镇,思口镇,段莘乡,江湾镇,蚺城街道,沱川乡,浙源乡,清华镇,溪头乡,秋口镇,紫阳镇,许村镇,赋春镇,镇头镇,大鄣山乡,珍珠山乡
上饶市婺源县下辖区域坐标
{"中云镇":[117.69937179060005,29.24008615236308],"太白镇":[117.71900295770865,29.10117805679191],"思口镇":[117.79710058295677,29.36838577766314],"段莘乡":[117.98058708497587,29.50082864328434],"江湾镇":[118.07169380210856,29.35654062539069],"蚺城街道":[117.8698217469188,29.25112493941671],"沱川乡":[117.81552284985847,29.52442574499719],"浙源乡":[117.88075298345078,29.49048076388303],"清华镇":[117.73130693888905,29.40534947368698],"溪头乡":[118.07629401445209,29.47031969824093],"秋口镇":[117.9198240185716,29.34409067387411],"紫阳镇":[117.84642972414356,29.22672384721889],"许村镇":[117.55516069373205,29.13600092000873],"赋春镇":[117.55881817563693,29.34596750228674],"镇头镇":[117.46455169966117,29.2622220717572],"大鄣山乡":[117.67050736678853,29.48476698820674],"珍珠山乡":[117.46042438325411,29.18676151951757]}
上饶市婺源县行政划分代码
[{"name":"中云镇","code":"361130110000"},{"name":"太白镇","code":"361130109000"},{"name":"思口镇","code":"361130104000"},{"name":"段莘乡","code":"361130201000"},{"name":"江湾镇","code":"361130103000"},{"name":"蚺城街道","code":"361130001000"},{"name":"沱川乡","code":"361130205000"},{"name":"浙源乡","code":"361130204000"},{"name":"清华镇","code":"361130101000"},{"name":"溪头乡","code":"361130200000"},{"name":"秋口镇","code":"361130102000"},{"name":"紫阳镇","code":"361130100000"},{"name":"许村镇","code":"361130111000"},{"name":"赋春镇","code":"361130106000"},{"name":"镇头镇","code":"361130107000"},{"name":"大鄣山乡","code":"361130206000"},{"name":"珍珠山乡","code":"361130208000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看