echarts益阳市南县geoJson地图tooltip自定义html演示实例

geoJson2 yekong

随着开发 大屏数据可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理益阳市南县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

echarts益阳市南县geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts益阳市南县geoJson地图tooltip自定义html

echarts益阳市南县geoJson地图全局颜色渐变

echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果

echarts益阳市南县geoJson地图全局颜色渐变

echarts益阳市南县geoJson地图地图排行榜效果

echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果

echarts益阳市南县geoJson地图地图排行榜效果

threejs益阳市南县geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果想系统的学习threejs的话,可以观看threejs视频课程 WebGL/Three.js前端高薪3D可视化

threejs益阳市南县geoJson地图3d地图

threejs益阳市南县geoJson地图3d地图添加描边效果

通过threejs绘制3d地图使用outlinePass 实现发光描边效果

threejs益阳市南县geoJson地图3d地图添加描边效果

threejs益阳市南县geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图

threejs益阳市南县geoJson地图3d地图自定义贴图加CSS3D标签

益阳市南县 下辖有 三仙湖镇,明山头镇,千山红镇,武圣宫镇,河坝镇,南湾湖街道,中鱼口乡,青树嘴镇,华阁镇,北洲子镇,南洲镇,乌嘴乡,厂窖镇,金盆镇,浪拔湖镇,茅草街镇,麻河口镇

益阳市南县下辖区域坐标

{"三仙湖镇":[112.31713376911134,29.18616615650726],"明山头镇":[112.57291941057524,29.26595794055386],"千山红镇":[112.44379829177007,29.13610003374261],"武圣宫镇":[112.25077634271065,29.25920604004979],"河坝镇":[112.55356735274378,29.18770607437686],"南湾湖街道":[112.50416989459512,29.14135672577389],"中鱼口乡":[112.3791515382477,29.26598291430353],"青树嘴镇":[112.42232414587514,29.20917538485991],"华阁镇":[112.6332876859772,29.2611653167558],"北洲子镇":[112.7278667996764,29.15912579837492],"南洲镇":[112.37914943892,29.34055246370194],"乌嘴乡":[112.48237153277643,29.30456197921104],"厂窖镇":[112.24746972088695,29.13494297603012],"金盆镇":[112.6334411931714,29.10871080846566],"浪拔湖镇":[112.33900629259244,29.44612583304514],"茅草街镇":[112.32015158057803,29.11170921400128],"麻河口镇":[112.28950444431308,29.31046959399152]}

益阳市南县行政划分代码

[{"name":"三仙湖镇","code":"430921128000"},{"name":"明山头镇","code":"430921102000"},{"name":"千山红镇","code":""},{"name":"武圣宫镇","code":"430921107000"},{"name":"河坝镇","code":""},{"name":"南湾湖街道","code":""},{"name":"中鱼口乡","code":""},{"name":"青树嘴镇","code":"430921103000"},{"name":"华阁镇","code":"430921126000"},{"name":"北洲子镇","code":""},{"name":"南洲镇","code":"430921125000"},{"name":"乌嘴乡","code":"430921201000"},{"name":"厂窖镇","code":"430921106000"},{"name":"金盆镇","code":""},{"name":"浪拔湖镇","code":"430921131000"},{"name":"茅草街镇","code":"430921127000"},{"name":"麻河口镇","code":"430921129000"}]

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看

益阳市南县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts益阳市南县geoJson地图tooltip自定义html演示实例