可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理达州市渠县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts达州市渠县geoJson地图3d地图自定义贴图-绿色地面
3d地图自定义贴图-绿色地面,echarts结合echarts-gl实现3d地图自定义贴图效果,通过设置 shading: 'realistic',以及realisticMaterial来设置自定义纹理贴图,当前效果为绿色地面的效果实例
echarts达州市渠县geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts达州市渠县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs达州市渠县geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁,如果想系统的学习threejs的话，可以观看threejs课程视频 WebGL/Three.js前端3D可视化教程
threejs达州市渠县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
threejs达州市渠县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
达州市渠县 下辖有 水口乡,河东乡,青神乡,双土乡,和乐乡,土溪镇,大义乡,汇北乡,李渡乡,流溪乡,涌兴镇,柏水乡,李馥乡,汇东乡,板桥乡,汇南乡,临巴镇,义和乡,千佛乡,宋家乡,岩峰镇,巨光乡,报恩乡,拱市乡,嘉禾乡,天星镇,卷硐乡,白兔乡,宝城镇,贵福镇,射洪乡,安北乡,锡溪乡,青丝乡,定远乡,屏西乡,平安乡,琅琊镇,望溪乡,渠北乡,蔡和乡,万寿乡,文崇镇,青龙乡,三板乡,静边镇,新市乡,有庆镇,望江乡,丰乐乡,三汇镇,清溪场镇,东安乡,中滩乡,渠江镇,鲜渡镇,鹤林乡,龙凤乡,龙潭乡,渠南乡
达州市渠县下辖区域坐标
{"水口乡":[107.00610134571414,31.0717179162954],"河东乡":[107.04089991338654,30.94815673840169],"青神乡":[106.99952371430604,31.03029297818335],"双土乡":[107.01275617621607,30.75992537698761],"和乐乡":[106.85095062631939,30.93522747699051],"土溪镇":[107.06151939232096,31.01190534586409],"大义乡":[107.02700509331991,31.19703207045855],"汇北乡":[107.15208507640043,31.06730980063366],"李渡乡":[106.94679202782909,30.77315100099881],"流溪乡":[107.08069158429245,30.96734511676066],"涌兴镇":[107.06744685037089,31.10860193385803],"柏水乡":[106.96646918766336,31.1976008593616],"李馥乡":[107.00669371910485,30.9484828145312],"汇东乡":[107.20809086839422,31.04811238295576],"板桥乡":[106.94854042180921,30.944666266963],"汇南乡":[107.1991295289271,30.98483352526215],"临巴镇":[107.07153956798632,30.8992191482993],"义和乡":[106.98619568907145,31.22853122032151],"千佛乡":[106.92971243879165,31.10997842891816],"宋家乡":[106.69884874716183,30.89590342784935],"岩峰镇":[106.95262467762834,31.06805700745712],"巨光乡":[106.89949339203173,31.02467311717352],"报恩乡":[107.12132748757111,31.17420373686436],"拱市乡":[106.75335039189628,30.89105496081643],"嘉禾乡":[106.83049946034731,30.76764247594169],"天星镇":[107.00272066663062,30.81901824467776],"卷硐乡":[107.06360614507673,30.75002620560954],"白兔乡":[106.85302417382712,31.0567484294135],"宝城镇":[106.76369797798814,30.83780266048657],"贵福镇":[106.98640059422624,31.13440151449032],"射洪乡":[106.8154475929147,30.85729705202387],"安北乡":[107.05597384359874,31.17428991679954],"锡溪乡":[107.02969370148253,30.8412274500051],"青丝乡":[106.88933338372166,30.97493112498211],"定远乡":[106.78318825948116,30.81309783089878],"屏西乡":[106.88653358644004,30.85261090982141],"平安乡":[107.06682110816017,31.07917628375918],"琅琊镇":[106.99391967994353,30.70746348187215],"望溪乡":[106.96682576417162,30.6717453573981],"渠北乡":[106.98311448834016,30.89645742646939],"蔡和乡":[106.89913972996642,31.07428074336094],"万寿乡":[106.9202899232707,30.98127261251611],"文崇镇":[107.17742126479506,31.16676974383777],"青龙乡":[106.91699922753847,30.90406821127618],"三板乡":[106.95198364152469,31.00004961963746],"静边镇":[106.84877397173261,30.99525501735042],"新市乡":[106.70023924559915,30.85965098987024],"有庆镇":[106.84111265827437,30.807707611558],"望江乡":[106.87525568279139,30.91082970294857],"丰乐乡":[107.14681979308516,31.10612037760826],"三汇镇":[107.141851512015,31.04264332644568],"清溪场镇":[106.80959794478184,30.92043646501218],"东安乡":[107.13319760499326,30.95836291517648],"中滩乡":[106.88646833220021,30.80243864749236],"渠江镇":[106.95586025163482,30.84265652582467],"鲜渡镇":[106.89643131142122,30.74655034439107],"鹤林乡":[106.80549769925486,30.97934025947873],"龙凤乡":[106.73690955547843,30.94405342988291],"龙潭乡":[107.08518837389997,30.85255762036888],"渠南乡":[106.93472284840345,30.80992101855885]}
达州市渠县行政划分代码
[{"name":"水口乡","code":""},{"name":"河东乡","code":""},{"name":"青神乡","code":""},{"name":"双土乡","code":""},{"name":"和乐乡","code":""},{"name":"土溪镇","code":"511725103000"},{"name":"大义乡","code":"511725220000"},{"name":"汇北乡","code":""},{"name":"李渡乡","code":""},{"name":"流溪乡","code":""},{"name":"涌兴镇","code":"511725106000"},{"name":"柏水乡","code":""},{"name":"李馥乡","code":""},{"name":"汇东乡","code":""},{"name":"板桥乡","code":""},{"name":"汇南乡","code":""},{"name":"临巴镇","code":"511725102000"},{"name":"义和乡","code":""},{"name":"千佛乡","code":""},{"name":"宋家乡","code":""},{"name":"岩峰镇","code":"511725108000"},{"name":"巨光乡","code":"511725224000"},{"name":"报恩乡","code":"511725215000"},{"name":"拱市乡","code":"511725236000"},{"name":"嘉禾乡","code":""},{"name":"天星镇","code":""},{"name":"卷硐乡","code":""},{"name":"白兔乡","code":""},{"name":"宝城镇","code":"511725111000"},{"name":"贵福镇","code":"511725107000"},{"name":"射洪乡","code":""},{"name":"安北乡","code":"511725216000"},{"name":"锡溪乡","code":""},{"name":"青丝乡","code":""},{"name":"定远乡","code":""},{"name":"屏西乡","code":""},{"name":"平安乡","code":""},{"name":"琅琊镇","code":"511725114000"},{"name":"望溪乡","code":""},{"name":"渠北乡","code":""},{"name":"蔡和乡","code":""},{"name":"万寿乡","code":""},{"name":"文崇镇","code":"511725105000"},{"name":"青龙乡","code":""},{"name":"三板乡","code":""},{"name":"静边镇","code":"511725109000"},{"name":"新市乡","code":""},{"name":"有庆镇","code":"511725112000"},{"name":"望江乡","code":"511725231000"},{"name":"丰乐乡","code":""},{"name":"三汇镇","code":"511725104000"},{"name":"清溪场镇","code":"511725110000"},{"name":"东安乡","code":""},{"name":"中滩乡","code":""},{"name":"渠江镇","code":""},{"name":"鲜渡镇","code":"511725113000"},{"name":"鹤林乡","code":""},{"name":"龙凤乡","code":""},{"name":"龙潭乡","code":""},{"name":"渠南乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
