可视化大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是红河哈尼族彝族自治州建水县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts红河哈尼族彝族自治州建水县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts红河哈尼族彝族自治州建水县geoJson地图全局颜色渐变
echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果
echarts红河哈尼族彝族自治州建水县geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
threejs红河哈尼族彝族自治州建水县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果想系统的学习threejs的话，可以观看threejs视频课程 Three.js前端3D可视化
threejs红河哈尼族彝族自治州建水县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
threejs红河哈尼族彝族自治州建水县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
红河哈尼族彝族自治州建水县 下辖有 临安镇,利民乡,南庄镇,岔科镇,面甸镇,李浩寨乡,官厅镇,普雄乡,曲江镇,甸尾乡,盘江乡,西庄镇,青龙镇,坡头乡
红河哈尼族彝族自治州建水县下辖区域坐标
{"临安镇":[102.88675773153795,23.58046239613175],"利民乡":[102.97265554038599,23.9823798841529],"南庄镇":[102.86066156441422,23.75018663627983],"岔科镇":[103.03483835225987,23.8450397852458],"面甸镇":[103.0193374312574,23.6750257893547],"李浩寨乡":[102.85032279249525,23.84000037587728],"官厅镇":[102.73577997194764,23.39443979277668],"普雄乡":[103.03281789061741,23.49827954462513],"曲江镇":[102.8146052662859,23.93597549680945],"甸尾乡":[102.70522400579631,23.77444459703536],"盘江乡":[103.10969065254709,24.03256224576485],"西庄镇":[102.72874420565435,23.65395006766317],"青龙镇":[102.70781493623917,23.52018899545327],"坡头乡":[102.86126957782042,23.35251546708074]}
红河哈尼族彝族自治州建水县行政划分代码
[{"name":"临安镇","code":"532524101000"},{"name":"利民乡","code":"532524205000"},{"name":"南庄镇","code":"532524105000"},{"name":"岔科镇","code":"532524106000"},{"name":"面甸镇","code":"532524108000"},{"name":"李浩寨乡","code":"532524202000"},{"name":"官厅镇","code":"532524102000"},{"name":"普雄乡","code":"532524201000"},{"name":"曲江镇","code":"532524107000"},{"name":"甸尾乡","code":"532524206000"},{"name":"盘江乡","code":"532524204000"},{"name":"西庄镇","code":"532524103000"},{"name":"青龙镇","code":"532524104000"},{"name":"坡头乡","code":"532524203000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
