echarts焦作市沁阳市geoJson地图添加柱状图实例代码

echarts yekong

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

沁阳市,河南省辖县级市,由焦作市代管,位于河南省北部、焦作市西北部,地处黄河(沁河)冲积平原、太行山南麓,属暖温带大陆性气候,毗邻5个县(市),总面积623.5平方千米。截至2022年10月,沁阳市辖4个街道、6个镇、3个乡。截至2021年末,沁阳市常住人口44.78万人。

echarts焦作市沁阳市geoJson地图添加柱状图

echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.

echarts焦作市沁阳市geoJson地图添加柱状图

echarts焦作市沁阳市geoJson地图阴影

echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.

echarts焦作市沁阳市geoJson地图阴影

echarts焦作市沁阳市geoJson地图全局颜色渐变

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

echarts焦作市沁阳市geoJson地图全局颜色渐变

threejs焦作市沁阳市geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果想系统的学习threejs的话,可以观看threejs视频教程 Three.js前端3D可视化教程

threejs焦作市沁阳市geoJson地图3d地图添加金色效果

threejs焦作市沁阳市geoJson地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话,可以观看threejs视频 Three.js 3D可视化

threejs焦作市沁阳市geoJson地图3d地图自定义贴图加CSS2D标签

threejs焦作市沁阳市geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果对threejs感兴趣,可以观看threejs视频教程 WebGL/Three.js前端3D可视化教程

threejs焦作市沁阳市geoJson地图3d地图CSS3D标签

焦作市沁阳市下辖有太行街道,沁园街道,覃怀街道,崇义镇,西万镇,王曲乡,柏香镇,紫陵镇,王召乡,西向镇,山王庄镇,怀庆街道,常平乡

焦作市沁阳市下辖区域坐标

{"太行街道":[112.92142226672655,35.11639298643969],"沁园街道":[112.91614420980696,35.07170043201043],"覃怀街道":[112.94761976702753,35.06684923269165],"崇义镇":[112.83587252895339,35.01989614226115],"西万镇":[112.92069169584954,35.1739909737808],"王曲乡":[112.86506909552338,35.08479005402521],"柏香镇":[112.78067798740105,35.08106855506126],"紫陵镇":[112.78808041155506,35.18245114988554],"王召乡":[112.96869376362469,35.03654459666551],"西向镇":[112.85710522821563,35.18820543993637],"山王庄镇":[112.97455939226425,35.1926802727626],"怀庆街道":[112.95101808399595,35.11913345161005],"常平乡":[112.94801608190782,35.26060793095562]}

说明

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

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

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

焦作市沁阳市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts焦作市沁阳市geoJson地图添加柱状图实例代码