大屏数据可视化 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理商丘市永城市echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
永城市,河南省 辖县级市,由 商丘市 代管,河南省直管县级市,位于河南省最东部,地处豫鲁苏皖四省结合部,区域性中心城市,被评为“千年古县” 河南省重点扩权县市, 素有“豫东门户”之称 。永城总面积2020平方公里。截至2020年末,辖25个乡镇、6个街道,770个行政村(社区) , 根据第七次人口普查数据,截至2020年11月1日零时,永城常住人口为1256409人。
echarts商丘市永城市geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts商丘市永城市geoJson地图全局颜色渐变
echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果
echarts商丘市永城市geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
threejs商丘市永城市geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果对threejs感兴趣,可以观看threejs教程视频 WebGL/Three.js前端高薪3D可视化
threejs商丘市永城市geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs商丘市永城市geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放
商丘市永城市下辖有酇阳镇,陈集镇,顺和镇,陈官庄乡,双桥乡,城厢乡,卧龙乡,演集镇,王集镇,苗桥镇,刘河镇,马桥镇,候岭乡,太邱镇,新桥乡,李寨镇,条河乡,蒋口镇,芒山镇,黄口乡,薛湖镇,裴桥镇,酇城镇,马牧镇,高庄镇,龙岗镇,十八里镇,城关镇,茴村镇
商丘市永城市下辖区域坐标
{"酇阳镇":[116.21156283614553,34.01718459315634],"陈集镇":[116.42548408383146,34.0353545670732],"顺和镇":[116.34045376573974,34.07565437329619],"陈官庄乡":[116.58184100817269,34.01387240249829],"双桥乡":[116.26635013352136,33.89580261145753],"城厢乡":[116.34216741313185,33.9155074430754],"卧龙乡":[116.0419528669999,33.89826290570497],"演集镇":[116.44117266921222,33.95792532923475],"王集镇":[116.17349032283015,33.91359771237802],"苗桥镇":[116.60555077930862,33.93775324657567],"刘河镇":[116.51553195519213,34.05839013824536],"马桥镇":[116.23641578387652,33.79573756471665],"候岭乡":[116.43955998081344,33.86209292128301],"太邱镇":[116.300461345741,34.11739620766568],"新桥乡":[116.27451757384804,33.83881872430295],"李寨镇":[116.15446368436913,33.76295812560996],"条河乡":[116.51348648986294,34.25621508006051],"蒋口镇":[116.2793057260726,34.03860701323821],"芒山镇":[116.4948192589596,34.17408510755975],"黄口乡":[116.35752618817038,33.82952982178963],"薛湖镇":[116.44488682044647,34.11590256458989],"裴桥镇":[116.13228862295134,33.84268491644609],"酇城镇":[116.12175324316686,33.95002766721814],"马牧镇":[116.1417327529678,34.04224048910513],"高庄镇":[116.53760169328673,33.91976253077303],"龙岗镇":[116.03233582343489,33.98031653620558],"十八里镇":[116.28208544059326,33.97852738776812],"城关镇":[116.3830597135827,33.93593566371658],"茴村镇":[116.53095030850417,33.98626306847663]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。