数据可视化大屏 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理达州市达川区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts达州市达川区geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
echarts达州市达川区geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
echarts达州市达川区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs达州市达川区geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果对threejs感兴趣，可以观看threejs教程视频 WebGL 3D可视化教程
threejs达州市达川区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
threejs达州市达川区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
达州市达川区 下辖有 福善镇,罐子乡,虎让乡,百节镇,石板镇,赵固乡,金檀乡,管村镇,沿河乡,洛车乡,渡市镇,石桥镇,银铁乡,陈家乡,五四乡,大堰乡,香隆乡,黄都乡,安仁乡,龙会乡,草兴乡,葫芦乡,赵家镇,东兴乡,大滩乡,大风乡,幺塘乡,斌郎乡,木子乡,桥湾乡,道让乡,金垭镇,万家镇,九岭乡,亭子镇,南岳镇,申家乡,双庙乡,堡子镇,大树镇,平滩乡,檀木镇,景市镇,木头乡,永进乡,江阳乡,河市镇,石梯镇,碑高乡,米城乡,花红乡,马家乡,麻柳镇,黄庭乡,翠屏街道,三里坪街道
达州市达川区下辖区域坐标
{"福善镇":[107.5704641149583,31.06137106069259],"罐子乡":[107.30484150386758,31.13754597357939],"虎让乡":[107.20899272449924,31.35088740548647],"百节镇":[107.45974358550143,31.01755186911535],"石板镇":[107.48368020221093,31.07248245104519],"赵固乡":[107.28175773063228,31.24908270846806],"金檀乡":[107.32346877269623,31.21265431193316],"管村镇":[107.31570648291523,31.18066275835145],"沿河乡":[107.0434026739766,31.23816637232864],"洛车乡":[107.15666279148323,31.3326435849311],"渡市镇":[107.27308926185796,31.06353051892953],"石桥镇":[107.10461058432125,31.29553901243467],"银铁乡":[107.09864315526853,31.20387857902442],"陈家乡":[107.2480844544279,31.1151399058858],"五四乡":[107.09650608477644,31.24156960534029],"大堰乡":[107.35449770568155,31.25947509802626],"香隆乡":[107.02906088165922,31.27879086994528],"黄都乡":[107.61106780462495,30.96914194320768],"安仁乡":[107.78494979234961,31.0302268069341],"龙会乡":[107.21172082983279,31.12836966580741],"草兴乡":[107.29188087431035,30.9887535897237],"葫芦乡":[107.75944214318211,30.98588753095687],"赵家镇":[107.40088832130618,30.96421280739583],"东兴乡":[107.63839793459763,31.0129922258335],"大滩乡":[107.7273524815388,30.98224424672712],"大风乡":[107.64570622843556,31.08473001031665],"幺塘乡":[107.38369556432261,31.16364856155197],"斌郎乡":[107.49479514502605,31.10933332729043],"木子乡":[107.38664146249594,31.0404225748734],"桥湾乡":[107.2107869405576,31.28130655468193],"道让乡":[107.17882034181858,31.38917301206951],"金垭镇":[107.39949878253769,31.07584436578811],"万家镇":[107.69498939071559,30.93314257687735],"九岭乡":[107.22766572764164,31.184438718545],"亭子镇":[107.57943371562251,31.10838540742226],"南岳镇":[107.55934697420793,30.88007803920819],"申家乡":[107.34073131357975,31.03813105274513],"双庙乡":[107.34520325344002,30.9771158803177],"堡子镇":[107.29189262636048,31.36229507761112],"大树镇":[107.6290207720076,30.90380092152371],"平滩乡":[107.51462228736295,30.93994113460366],"檀木镇":[107.71708330587114,31.07913621739291],"景市镇":[107.54421214793209,30.99953257873385],"木头乡":[107.2629498218881,31.01605487863652],"永进乡":[107.0783448725346,31.33493248914279],"江阳乡":[107.55782706712219,31.14218748647234],"河市镇":[107.3949207996612,31.13366072725751],"石梯镇":[107.18655435987529,31.23796971927705],"碑高乡":[107.42844976970535,30.92684506290809],"米城乡":[107.30662786957012,31.2956366239252],"花红乡":[107.71709061716726,31.10555615306841],"马家乡":[107.44052408051465,30.98308472224188],"麻柳镇":[107.70503155572952,31.02835772596593],"黄庭乡":[107.62132378470216,30.85108185786813],"翠屏街道":[107.47890267152117,31.17464686240947],"三里坪街道":[107.52385584831572,31.19616556086573]}
达州市达川区行政划分代码
[{"name":"福善镇","code":"511703101000"},{"name":"罐子乡","code":""},{"name":"虎让乡","code":"511703234000"},{"name":"百节镇","code":"511703108000"},{"name":"石板镇","code":""},{"name":"赵固乡","code":""},{"name":"金檀乡","code":""},{"name":"管村镇","code":"511703114000"},{"name":"沿河乡","code":""},{"name":"洛车乡","code":""},{"name":"渡市镇","code":"511703113000"},{"name":"石桥镇","code":"511703116000"},{"name":"银铁乡","code":""},{"name":"陈家乡","code":""},{"name":"五四乡","code":""},{"name":"大堰乡","code":""},{"name":"香隆乡","code":""},{"name":"黄都乡","code":""},{"name":"安仁乡","code":"511703203000"},{"name":"龙会乡","code":"511703217000"},{"name":"草兴乡","code":""},{"name":"葫芦乡","code":""},{"name":"赵家镇","code":"511703109000"},{"name":"东兴乡","code":""},{"name":"大滩乡","code":""},{"name":"大风乡","code":""},{"name":"幺塘乡","code":"511703236000"},{"name":"斌郎乡","code":""},{"name":"木子乡","code":""},{"name":"桥湾乡","code":""},{"name":"道让乡","code":""},{"name":"金垭镇","code":"511703130000"},{"name":"万家镇","code":"511703106000"},{"name":"九岭乡","code":""},{"name":"亭子镇","code":"511703100000"},{"name":"南岳镇","code":"511703105000"},{"name":"申家乡","code":""},{"name":"双庙乡","code":""},{"name":"堡子镇","code":"511703117000"},{"name":"大树镇","code":"511703104000"},{"name":"平滩乡","code":""},{"name":"檀木镇","code":""},{"name":"景市镇","code":"511703107000"},{"name":"木头乡","code":""},{"name":"永进乡","code":""},{"name":"江阳乡","code":""},{"name":"河市镇","code":"511703129000"},{"name":"石梯镇","code":"511703115000"},{"name":"碑高乡","code":""},{"name":"米城乡","code":"511703235000"},{"name":"花红乡","code":""},{"name":"马家乡","code":""},{"name":"麻柳镇","code":"511703102000"},{"name":"黄庭乡","code":""},{"name":"翠屏街道","code":"511703002000"},{"name":"三里坪街道","code":"511703001000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
