数据大屏可视化 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是黔南布依族苗族自治州罗甸县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts黔南布依族苗族自治州罗甸县geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
echarts黔南布依族苗族自治州罗甸县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts黔南布依族苗族自治州罗甸县geoJson地图定义颜色
echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.
threejs黔南布依族苗族自治州罗甸县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果想系统的学习threejs的话，可以观看threejs视频教程 WebGL 3D可视化教程
threejs黔南布依族苗族自治州罗甸县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs黔南布依族苗族自治州罗甸县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
黔南布依族苗族自治州罗甸县 下辖有 罗沙乡,董王乡,边阳镇,逢亭镇,龙坪镇,大亭乡,平岩乡,木引乡,班仁乡,纳坪乡,罗妥乡,罗暮乡,罗苏乡,董架乡,红水河镇,云干乡,交砚乡,八总乡,凤亭乡,板庚乡,栗木乡,沟亭乡,沫阳镇,罗悃镇,茂井镇,董当乡
黔南布依族苗族自治州罗甸县下辖区域坐标
{"罗沙乡":[106.61357788626331,25.68677526588247],"董王乡":[106.50144460318302,25.6520133367395],"边阳镇":[106.64675786646009,25.58785590468666],"逢亭镇":[106.55129550378516,25.40075001456857],"龙坪镇":[106.70864580655723,25.41078944948549],"大亭乡":[106.94855372450131,25.31061737640017],"平岩乡":[106.992990780134,25.52166828954675],"木引乡":[106.45494759067728,25.49523611972121],"班仁乡":[106.86462153267544,25.23588017661524],"纳坪乡":[106.45069996886608,25.37565835125211],"罗妥乡":[106.69524936499384,25.22548270720905],"罗暮乡":[106.52403971452347,25.17418683521676],"罗苏乡":[106.52243769702139,25.27871362250053],"董架乡":[106.91611821211986,25.5945981886763],"红水河镇":[106.59806127879091,25.15397535595983],"云干乡":[106.75804074327581,25.51720214056392],"交砚乡":[106.5513033303659,25.55023073616006],"八总乡":[106.80834379660672,25.3954478809242],"凤亭乡":[106.78698656663292,25.26070167696028],"板庚乡":[106.61472802236655,25.48449056800893],"栗木乡":[106.7211594684544,25.6237224254322],"沟亭乡":[106.68503942868904,25.34328305299944],"沫阳镇":[106.90041440714484,25.48061266251245],"罗悃镇":[106.616233592013,25.30361998399707],"茂井镇":[106.87742694309027,25.37315205639879],"董当乡":[106.85090268096454,25.54795426264222]}
黔南布依族苗族自治州罗甸县行政划分代码
[{"name":"罗沙乡","code":""},{"name":"董王乡","code":""},{"name":"边阳镇","code":"522728108000"},{"name":"逢亭镇","code":"522728110000"},{"name":"龙坪镇","code":"522728107000"},{"name":"大亭乡","code":""},{"name":"平岩乡","code":""},{"name":"木引乡","code":""},{"name":"班仁乡","code":""},{"name":"纳坪乡","code":""},{"name":"罗妥乡","code":""},{"name":"罗暮乡","code":""},{"name":"罗苏乡","code":""},{"name":"董架乡","code":""},{"name":"红水河镇","code":"522728113000"},{"name":"云干乡","code":""},{"name":"交砚乡","code":""},{"name":"八总乡","code":""},{"name":"凤亭乡","code":"522728219000"},{"name":"板庚乡","code":""},{"name":"栗木乡","code":""},{"name":"沟亭乡","code":""},{"name":"沫阳镇","code":"522728109000"},{"name":"罗悃镇","code":"522728111000"},{"name":"茂井镇","code":"522728112000"},{"name":"董当乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
