可视化数据大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理贺州市钟山县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts贺州市钟山县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts贺州市钟山县geoJson地图3d地图
使用的是echarts-gl结合echarts实现的3d地图效果实例
echarts贺州市钟山县geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
threejs贺州市钟山县geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化
threejs贺州市钟山县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs贺州市钟山县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
贺州市钟山县 下辖有 公安镇,燕塘镇,花山瑶族乡,凤翔镇,同古镇,回龙镇,清塘镇,珊瑚镇,石龙镇,红花镇,钟山镇,两安瑶族乡
贺州市钟山县下辖区域坐标
{"公安镇":[111.18382854354556,24.46842686397942],"燕塘镇":[111.08231100392017,24.48614543996207],"花山瑶族乡":[111.06518465476387,24.60301047965338],"凤翔镇":[111.3695438271503,24.37470691189343],"同古镇":[111.22042591677356,24.36717504945339],"回龙镇":[111.28286055738826,24.437926124752],"清塘镇":[111.05828441912254,24.38319536881709],"珊瑚镇":[111.35834835171437,24.32631509846734],"石龙镇":[111.33047661082435,24.39954744694514],"红花镇":[111.16395708178604,24.59382951743774],"钟山镇":[111.28165670755828,24.56072734292353],"两安瑶族乡":[111.15541489404788,24.70175971677866]}
贺州市钟山县行政划分代码
[{"name":"公安镇","code":"451122109000"},{"name":"燕塘镇","code":"451122112000"},{"name":"花山瑶族乡","code":"451122200000"},{"name":"凤翔镇","code":"451122106000"},{"name":"同古镇","code":"451122108000"},{"name":"回龙镇","code":"451122104000"},{"name":"清塘镇","code":"451122111000"},{"name":"珊瑚镇","code":"451122107000"},{"name":"石龙镇","code":"451122105000"},{"name":"红花镇","code":"451122113000"},{"name":"钟山镇","code":"451122100000"},{"name":"两安瑶族乡","code":"451122201000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看