随着开发 大屏数据可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理黔南布依族苗族自治州惠水县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts黔南布依族苗族自治州惠水县geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
echarts黔南布依族苗族自治州惠水县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts黔南布依族苗族自治州惠水县geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
threejs黔南布依族苗族自治州惠水县geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能,如果对threejs感兴趣，可以观看threejs教程视频 3D可视化Three.js视频教程
threejs黔南布依族苗族自治州惠水县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
threejs黔南布依族苗族自治州惠水县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
黔南布依族苗族自治州惠水县 下辖有 摆榜乡,摆金镇,斗底乡,断杉镇,王佑镇,甲戎乡,甲烈乡,羡塘乡,芦山镇,长安乡,长田乡,雅水镇,三都镇,和平镇,大坝乡,大龙乡,高镇镇,鸭绒乡,好花红乡,太阳乡,宁旺乡,岗度乡,打引乡,抵季乡,抵麻乡
黔南布依族苗族自治州惠水县下辖区域坐标
{"摆榜乡":[106.89916990374407,25.9795954862113],"摆金镇":[106.80123558229144,26.10986121066356],"斗底乡":[106.85350597075205,26.01729506653096],"断杉镇":[106.5797913360814,25.79648156849206],"王佑镇":[106.48318217322995,25.83267130767234],"甲戎乡":[106.5766172471325,25.92629727980445],"甲烈乡":[106.7967049190456,26.16441549736127],"羡塘乡":[106.80258040495781,25.80179090156921],"芦山镇":[106.48490730381866,25.91027096504416],"长安乡":[106.44118475175581,25.77300154001223],"长田乡":[106.66142162678545,26.24571411727327],"雅水镇":[106.75626060979381,25.99103075051886],"三都镇":[106.62747594527119,26.06033903395782],"和平镇":[106.67097499153383,26.11838507175118],"大坝乡":[106.74771494819556,26.24119199759431],"大龙乡":[106.57689723837566,26.09707103948755],"高镇镇":[106.69953433362792,26.18936725760986],"鸭绒乡":[106.7190926488631,26.0460487302953],"好花红乡":[106.6119891268321,25.99685985709626],"太阳乡":[106.78380230797524,25.89665955208893],"宁旺乡":[106.94843572627589,26.09375755255937],"岗度乡":[106.97453366765043,26.14880710395933],"打引乡":[106.51069863233985,25.73475917353032],"抵季乡":[106.67561195837337,25.79421522593908],"抵麻乡":[106.66317351800151,25.92153674324954]}
黔南布依族苗族自治州惠水县行政划分代码
[{"name":"摆榜乡","code":""},{"name":"摆金镇","code":"522731103000"},{"name":"斗底乡","code":""},{"name":"断杉镇","code":"522731105000"},{"name":"王佑镇","code":"522731107000"},{"name":"甲戎乡","code":""},{"name":"甲烈乡","code":""},{"name":"羡塘乡","code":""},{"name":"芦山镇","code":"522731106000"},{"name":"长安乡","code":""},{"name":"长田乡","code":""},{"name":"雅水镇","code":"522731104000"},{"name":"三都镇","code":""},{"name":"和平镇","code":""},{"name":"大坝乡","code":""},{"name":"大龙乡","code":""},{"name":"高镇镇","code":""},{"name":"鸭绒乡","code":""},{"name":"好花红乡","code":""},{"name":"太阳乡","code":""},{"name":"宁旺乡","code":""},{"name":"岗度乡","code":""},{"name":"打引乡","code":""},{"name":"抵季乡","code":""},{"name":"抵麻乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
