可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理忻州市五台县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
五台县 位于 山西省 境东北部,隶属于山西省 忻州市,属土石山区,东与河北省以太行山脊为界,面积2865平方千米,辖5镇、11乡、1个驼梁景区,495个行政村。根据第七次人口普查数据,截至2020年11月1日零时,五台县常住人口为216178人。2020年1月一11月,五台县完成地区生产总值(GDP)35.7亿元,同比增长-0.9%。
echarts忻州市五台县geoJson地图 tooltip轮播
echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.
echarts忻州市五台县geoJson地图定义颜色
echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.
echarts忻州市五台县geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
threejs忻州市五台县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果对threejs感兴趣,可以观看threejs视频课程 WebGL/Three.js前端3D可视化教程
threejs忻州市五台县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
threejs忻州市五台县geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
忻州市五台县 下辖有 沟南乡,灵境乡,陈家庄乡,高洪口乡,台怀镇,东冶镇,东雷乡,台城镇,阳白乡,白家庄镇,金岗库乡,门限石乡,建安乡,石咀乡,神西乡,耿镇镇,茹村乡,蒋坊乡,豆村镇,沟南乡,灵境乡,陈家庄乡,高洪口乡,台怀镇,东冶镇,东雷乡,台城镇,阳白乡,白家庄镇,金岗库乡,门限石乡,建安乡,石咀乡,神西乡,耿镇镇,茹村乡,蒋坊乡,豆村镇
忻州市五台县下辖区域坐标
{"沟南乡":[113.27793047607915,38.67675800441688],"灵境乡":[113.53904340564478,38.87529056680071],"陈家庄乡":[113.4460372616997,38.56741915969918],"高洪口乡":[113.52992125395808,38.67032387536795],"台怀镇":[113.58495208006394,38.98849746039075],"东冶镇":[113.16781354628972,38.65596489844901],"东雷乡":[113.18721096148829,38.81741146893786],"台城镇":[113.20580044665687,38.74203581833989],"阳白乡":[113.0663599364078,38.77310130132804],"白家庄镇":[113.30886819089125,38.58182234552095],"金岗库乡":[113.64561376462831,38.92220470879147],"门限石乡":[113.71411188440382,38.77743706600019],"建安乡":[113.16110401418251,38.58444021777449],"石咀乡":[113.72705434075142,38.92492525229818],"神西乡":[113.24791380158237,38.54313753738258],"耿镇镇":[113.58149335880259,38.73396492452073],"茹村乡":[113.36037009749205,38.72700747008196],"蒋坊乡":[113.43659120407338,38.78963095364869],"豆村镇":[113.36509776226808,38.89286195509199]}
忻州市五台县行政划分代码
[{"name":"沟南乡","code":"140922200000"},{"name":"灵境乡","code":""},{"name":"陈家庄乡","code":"140922204000"},{"name":"高洪口乡","code":"140922202000"},{"name":"台怀镇","code":""},{"name":"东冶镇","code":"140922105000"},{"name":"东雷乡","code":"140922201000"},{"name":"台城镇","code":"140922100000"},{"name":"阳白乡","code":"140922209000"},{"name":"白家庄镇","code":"140922104000"},{"name":"金岗库乡","code":""},{"name":"门限石乡","code":"140922203000"},{"name":"建安乡","code":""},{"name":"石咀乡","code":""},{"name":"神西乡","code":""},{"name":"耿镇镇","code":"140922102000"},{"name":"茹村乡","code":"140922210000"},{"name":"蒋坊乡","code":"140922207000"},{"name":"豆村镇","code":"140922103000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。