echarts郑州市金水区geoJson地图区域闪烁效果实例

echarts yekong

数据可视化大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理郑州市金水区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

金水区,隶属 河南省 郑州市 ,位于郑州市主城区东北部,东临中牟县,南连管城回族区、二七区,西接中原区,北靠惠济区。介于东经113°40' ~ 113°47',北纬30°50' ~ 34°57'之间。东西最大距离22.9千米,南北最大距离17.2千米,总面积136.66平方千米。根据第七次人口普查数据,截至2020年11月1日零时,金水区常住人口为1617541人。

echarts郑州市金水区geoJson地图区域闪烁

echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.

echarts郑州市金水区geoJson地图区域闪烁

echarts郑州市金水区geoJson地图水滴状气泡图

echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.

echarts郑州市金水区geoJson地图水滴状气泡图

echarts郑州市金水区geoJson地图全局颜色渐变

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

echarts郑州市金水区geoJson地图全局颜色渐变

threejs郑州市金水区geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果对threejs感兴趣,可以观看threejs视频教程 Three.js 3D可视化

threejs郑州市金水区geoJson地图3d地图自定义贴图加CSS3D标签

threejs郑州市金水区geoJson地图3d地图添加描边效果

通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果对threejs感兴趣,可以观看threejs课程视频 WebGL/Three.js前端高薪3D可视化

threejs郑州市金水区geoJson地图3d地图添加描边效果

threejs郑州市金水区geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁,如果对threejs感兴趣,可以观看threejs视频 WebGL前端3D可视化教程

threejs郑州市金水区geoJson地图3d地图指定区域闪烁

郑州市金水区下辖有博学路街道,南阳新村街道,龙子湖街道,杜岭街道,金光路街道,东风路街道,丰庆路街道,龙源路街道,人民路街道,凤凰台街道,南阳路街道,文化路街道,未来路街道,杨金路街道,龙湖街道,丰产路街道,兴达路街道,北林路街道,国基路街道,如意湖街道,经八路街道,大石桥街道,祭城路街道,花园路街道

郑州市金水区下辖区域坐标

{"博学路街道":[113.80047196370055,34.77860732495711],"南阳新村街道":[113.63017292583768,34.78913231602642],"龙子湖街道":[113.80070575369353,34.81034681024741],"杜岭街道":[113.6621943022237,34.76094292246179],"金光路街道":[113.82892801227997,34.79008676078692],"东风路街道":[113.64592165687837,34.80271002212369],"丰庆路街道":[113.64553214344414,34.83476880005373],"龙源路街道":[113.71552051030537,34.82827372352619],"人民路街道":[113.67903576788288,34.7593539035085],"凤凰台街道":[113.70952429764144,34.74821912878345],"南阳路街道":[113.6387227345937,34.77511632687597],"文化路街道":[113.66501713092035,34.7895234796714],"未来路街道":[113.70370299381767,34.76445439922536],"杨金路街道":[113.73238757879466,34.85111368667219],"龙湖街道":[113.73538408545733,34.80988829907285],"丰产路街道":[113.69073131695926,34.78618357535881],"兴达路街道":[113.8005842981154,34.85853604573563],"北林路街道":[113.6815355165777,34.80565126452417],"国基路街道":[113.67091769981354,34.83339934697869],"如意湖街道":[113.7323116568646,34.77849971335004],"经八路街道":[113.6642329117767,34.77277969349676],"大石桥街道":[113.6478481717806,34.76628190800582],"祭城路街道":[113.74687439576977,34.7623262583555],"花园路街道":[113.6834817939246,34.76884893037388]}

说明

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

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

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

郑州市金水区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts郑州市金水区geoJson地图区域闪烁效果实例