echarts铜川市耀州区geoJson地图点击弹出自定义弹窗效果实例

geoJson2 yekong

可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理铜川市耀州区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

耀州区,隶属于陕西省铜川市,地处陕西中部渭北高原南缘,铜川市境西南,北接旬邑县,南连三原县,东北与铜川市王益区、印台区毗连,东南与富平县为邻,西南与淳化县接壤。介于东经108°34′—109°06′,北纬34°48′—35°19′之间,总面积1617平方千米。截至2022年10月,耀州区下辖6个街道、8个镇。截至2022年末,耀州区常住人口18.05万人。

echarts铜川市耀州区geoJson地图点击弹出自定义弹窗

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

echarts铜川市耀州区geoJson地图点击弹出自定义弹窗

echarts铜川市耀州区geoJson地图圆形波纹状气泡图

echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.

echarts铜川市耀州区geoJson地图圆形波纹状气泡图

echarts铜川市耀州区geoJson地图tooltip自定义html

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

echarts铜川市耀州区geoJson地图tooltip自定义html

threejs铜川市耀州区geoJson地图3d地图自定义贴图加CSS3D标签

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

threejs铜川市耀州区geoJson地图3d地图自定义贴图加CSS3D标签

threejs铜川市耀州区geoJson地图3d地图红色描边闪烁警报

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

threejs铜川市耀州区geoJson地图3d地图红色描边闪烁警报

threejs铜川市耀州区geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰

threejs铜川市耀州区geoJson地图3d地图添加金色效果

铜川市耀州区 下辖有 永安路街道,天宝路街道,关庄镇,坡头镇,孙塬镇,咸丰路街道,正阳路街道,锦阳路街道,小丘镇,庙湾镇,演池乡,照金镇,瑶曲镇,石柱镇,董家河镇

铜川市耀州区下辖区域坐标

{"永安路街道":[108.98614522880646,34.91452816345665],"天宝路街道":[108.97069200582956,34.92842692186561],"关庄镇":[108.81905326620485,34.97127009819806],"坡头镇":[108.85721686306856,34.88957047973727],"孙塬镇":[109.02933964118247,34.92965919591002],"咸丰路街道":[108.91743115786679,34.8973398482953],"正阳路街道":[108.94596585768286,34.87017770870998],"锦阳路街道":[108.94070477055288,34.95832950048909],"小丘镇":[108.76711406920259,34.90210975141849],"庙湾镇":[108.75287204976158,35.17077706752505],"演池乡":[108.99439102353699,35.10807403581236],"照金镇":[108.70552381920203,35.04335059475176],"瑶曲镇":[108.8791569915891,35.22427898536519],"石柱镇":[108.91460065278358,35.05841761064105],"董家河镇":[109.00086161414147,34.98793906993513]}

铜川市耀州区行政划分代码

[{"name":"永安路街道","code":"610204001000"},{"name":"天宝路街道","code":"610204002000"},{"name":"关庄镇","code":"610204109000"},{"name":"坡头镇","code":""},{"name":"孙塬镇","code":""},{"name":"咸丰路街道","code":"610204003000"},{"name":"正阳路街道","code":"610204004000"},{"name":"锦阳路街道","code":"610204005000"},{"name":"小丘镇","code":"610204107000"},{"name":"庙湾镇","code":"610204102000"},{"name":"演池乡","code":""},{"name":"照金镇","code":"610204104000"},{"name":"瑶曲镇","code":"610204103000"},{"name":"石柱镇","code":"610204111000"},{"name":"董家河镇","code":"610204101000"}]

说明

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

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

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

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

铜川市耀州区echarts地图效果实例和threejs地图效果实例下载

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