echarts大同市阳高县geoJson地图点击弹出自定义弹窗效果实例

geoJson2 yekong

数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是大同市阳高县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

阳高县是 山西省 大同市 下辖县,西汉置高柳县,金改名白登县,清雍正三年(公元1725年)改称现名。阳高地处山西省东北部,北隔长城与内蒙古自治区相邻,南与浑源、广灵为界,西与云州区毗邻,东与天镇县、河北阳原接壤,总面积1598.3平方千米。根据第七次人口普查数据,截至2020年11月1日零时,阳高县常住人口为191981人。

echarts大同市阳高县geoJson地图点击弹出自定义弹窗

我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.

echarts大同市阳高县geoJson地图点击弹出自定义弹窗

echarts大同市阳高县geoJson地图局部颜色渐变

echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果

echarts大同市阳高县geoJson地图局部颜色渐变

echarts大同市阳高县geoJson地图定义颜色

echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.

echarts大同市阳高县geoJson地图定义颜色

threejs大同市阳高县geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁,如果想系统的学习threejs的话,可以观看threejs课程视频 WebGL 3D可视化教程

threejs大同市阳高县geoJson地图3d地图指定区域闪烁

threejs大同市阳高县geoJson地图3d地图自定义贴图加CSS2D标签

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

threejs大同市阳高县geoJson地图3d地图自定义贴图加CSS2D标签

threejs大同市阳高县geoJson地图3d地图红色描边闪烁警报

通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能

threejs大同市阳高县geoJson地图3d地图红色描边闪烁警报

大同市阳高县 下辖有 鳌石乡,龙泉镇,长城乡,狮子屯乡,北徐屯乡,古城镇,友宰镇,大白登镇,下深井乡,东小村镇,王官屯镇,罗文皂镇,马家皂乡,鳌石乡,龙泉镇,长城乡,狮子屯乡,北徐屯乡,古城镇,友宰镇,大白登镇,下深井乡,东小村镇,王官屯镇,罗文皂镇,马家皂乡

大同市阳高县下辖区域坐标

{"鳌石乡":[113.97715006362952,39.95883402796375],"龙泉镇":[113.743018225351,40.38717096715682],"长城乡":[113.57147467057884,40.32713855171897],"狮子屯乡":[113.889116215495,40.25870841628782],"北徐屯乡":[113.85366375032504,40.3587746917118],"古城镇":[113.91189013285268,40.13995685295836],"友宰镇":[113.88994512093582,39.9127044571265],"大白登镇":[113.80876131634275,40.24821380031641],"下深井乡":[113.74472554530252,40.19584125027341],"东小村镇":[113.89169176322872,40.04108957564112],"王官屯镇":[113.64172880580345,40.22969400249873],"罗文皂镇":[113.86784305548278,40.45155937943753],"马家皂乡":[114.0303284958168,40.11686367608923]}

大同市阳高县行政划分代码

[{"name":"鳌石乡","code":"140221212000"},{"name":"龙泉镇","code":"140221100000"},{"name":"长城乡","code":"140221201000"},{"name":"狮子屯乡","code":"140221204000"},{"name":"北徐屯乡","code":""},{"name":"古城镇","code":"140221104000"},{"name":"友宰镇","code":"140221106000"},{"name":"大白登镇","code":"140221102000"},{"name":"下深井乡","code":"140221209000"},{"name":"东小村镇","code":"140221105000"},{"name":"王官屯镇","code":"140221103000"},{"name":"罗文皂镇","code":"140221101000"},{"name":"马家皂乡","code":""}]

说明

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

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

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

大同市阳高县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts大同市阳高县geoJson地图点击弹出自定义弹窗效果实例