随着开发 可视化数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理襄阳市樊城区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
襄阳市樊城区是中国湖北省襄阳市的一个市辖区，位于湖北省西北部，汉江中游北岸。樊城区历史悠久，是古代著名的军事要塞，多次成为历史战争的焦点。区内有许多文化遗迹和历史名胜，如古隆中、襄阳古城墙等，吸引了众多游客。樊城区经济以工业为主，特别是汽车制造业和食品加工业较为发达。此外，该区还具有丰富的农业资源，稻谷和棉花是主要农作物。随着城市化进程的加快，樊城区正逐渐发展成为一个现代化新城区，融合了传统文化和现代生活。
动态效果
echarts襄阳市樊城区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts襄阳市樊城区geoJson地图 tooltip轮播
echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.
echarts襄阳市樊城区geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
threejs襄阳市樊城区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs教程视频 Three.js 3D可视化
threejs襄阳市樊城区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs襄阳市樊城区geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例
襄阳市樊城区 下辖有 高新区高新技术创业服务中心,屏襄门街道,经济开发区,高新区团山镇,鱼梁洲开发区,汉江街道,高新区七里河街道,清河口街道,牛首镇,中原街道,太平店镇,柿铺街道,高新区东风街道,王寨街道,米公街道,定中门街道,高新区紫贞街道,高新区高新技术产业园,高新区汽车工业园,高新区米庄镇
襄阳市樊城区下辖区域坐标
{"高新区高新技术创业服务中心":[112.12506509609224,32.0782260707812],"屏襄门街道":[],"经济开发区":[111.823850859755,32.15462578761435],"高新区团山镇":[112.11460115975092,32.12384472367248],"鱼梁洲开发区":[112.19011234704129,32.03302494067825],"汉江街道":[112.12199958357061,32.03778030854245],"高新区七里河街道":[112.13960135447769,32.06670161907972],"清河口街道":[112.15829041327397,32.0598420483543],"牛首镇":[111.99699933291441,32.11747640728888],"中原街道":[112.14410441893811,32.06531307628912],"太平店镇":[111.83058379684452,32.15345522069362],"柿铺街道":[112.06307478330368,32.06008672795188],"高新区东风街道":[112.1868883520844,32.13266534318688],"王寨街道":[112.10004122748492,32.05172036097053],"米公街道":[112.13958658903422,32.0378093942073],"定中门街道":[112.1493449023566,32.04056642741283],"高新区紫贞街道":[112.12787758409151,32.06357524380778],"高新区高新技术产业园":[112.10200585583993,32.09663117207587],"高新区汽车工业园":[],"高新区米庄镇":[]}
襄阳市樊城区行政划分代码
[{"name":"高新区高新技术创业服务中心","code":"420606572000"},{"name":"屏襄门街道","code":"420606006000"},{"name":"经济开发区","code":"420606400000"},{"name":"高新区团山镇","code":"420606170000"},{"name":"鱼梁洲开发区","code":"420606480000"},{"name":"汉江街道","code":"420606001000"},{"name":"高新区七里河街道","code":"420606071000"},{"name":"清河口街道","code":"420606005000"},{"name":"牛首镇","code":"420606100000"},{"name":"中原街道","code":"420606003000"},{"name":"太平店镇","code":"420606101000"},{"name":"柿铺街道","code":"420606008000"},{"name":"高新区东风街道","code":"420606072000"},{"name":"王寨街道","code":"420606002000"},{"name":"米公街道","code":"420606007000"},{"name":"定中门街道","code":"420606004000"},{"name":"高新区紫贞街道","code":"420606070000"},{"name":"高新区高新技术产业园","code":"420606571000"},{"name":"高新区汽车工业园","code":"420606570000"},{"name":"高新区米庄镇","code":"420606171000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
