echarts宜春市樟树市geoJson地图根据经纬度显示自定义html弹窗代码演示

geoJson2 yekong

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

echarts宜春市樟树市geoJson地图根据经纬度显示自定义html弹窗

echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.

echarts宜春市樟树市geoJson地图根据经纬度显示自定义html弹窗

echarts宜春市樟树市geoJson地图迁徙图

echarts迁徙图实例,可以根据自己的需要配置飞线的颜色大小以及方向

echarts宜春市樟树市geoJson地图迁徙图

echarts宜春市樟树市geoJson地图自定义label样式

echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果

echarts宜春市樟树市geoJson地图自定义label样式

threejs宜春市樟树市geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果对threejs感兴趣,可以观看threejs教程视频 Three.js前端3D可视化

threejs宜春市樟树市geoJson地图3d地图

threejs宜春市樟树市geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁

threejs宜春市樟树市geoJson地图3d地图指定区域闪烁

threejs宜春市樟树市geoJson地图3d地图添加金色效果

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

threejs宜春市樟树市geoJson地图3d地图添加金色效果

宜春市樟树市 下辖有 中洲乡,临江镇,洲上乡,经楼镇,淦阳街道,福城街道,鹿江街道,黄土岗镇,张家山街道,省双金园艺场,樟树市工业园区,义成镇,吴城乡,店下镇,昌付镇,永泰镇,洋湖乡,观上镇,阁山镇,刘公庙镇,大桥街道

宜春市樟树市下辖区域坐标

{"中洲乡":[115.16293204184456,27.92992324311256],"临江镇":[115.37117316983804,27.98838067594723],"洲上乡":[115.43921489522643,28.00412282180805],"经楼镇":[115.40943025028187,28.09897074017369],"淦阳街道":[115.55008248022946,28.04650099721178],"福城街道":[115.51493861385954,28.05021663150604],"鹿江街道":[115.55338237089126,28.07691961484885],"黄土岗镇":[115.22437356271624,27.9195077803204],"张家山街道":[115.49004991796906,28.08295235672944],"省双金园艺场":[115.33086850989653,27.94060678244043],"樟树市工业园区":[115.5436863206715,28.02531765089537],"义成镇":[115.1842175886839,28.00201397407974],"吴城乡":[115.26267840570608,28.0284458517871],"店下镇":[115.59223666194492,27.90333496421785],"昌付镇":[115.32766758649001,27.91195531259748],"永泰镇":[115.4645605821531,27.9673202716103],"洋湖乡":[115.49982625956787,28.00650390303135],"观上镇":[115.66440513547235,28.04649962022598],"阁山镇":[115.57121107886148,27.94040796237451],"刘公庙镇":[115.31757728083076,28.07883890368133],"大桥街道":[115.57716910386252,28.06679662119875]}

宜春市樟树市行政划分代码

[{"name":"中洲乡","code":"360982200000"},{"name":"临江镇","code":"360982100000"},{"name":"洲上乡","code":"360982201000"},{"name":"经楼镇","code":"360982103000"},{"name":"淦阳街道","code":"360982001000"},{"name":"福城街道","code":"360982003000"},{"name":"鹿江街道","code":"360982002000"},{"name":"黄土岗镇","code":"360982102000"},{"name":"张家山街道","code":"360982005000"},{"name":"省双金园艺场","code":"360982500000"},{"name":"樟树市工业园区","code":"360982400000"},{"name":"义成镇","code":"360982109000"},{"name":"吴城乡","code":"360982203000"},{"name":"店下镇","code":"360982105000"},{"name":"昌付镇","code":""},{"name":"永泰镇","code":"360982101000"},{"name":"洋湖乡","code":"360982202000"},{"name":"观上镇","code":"360982108000"},{"name":"阁山镇","code":"360982106000"},{"name":"刘公庙镇","code":"360982107000"},{"name":"大桥街道","code":"360982004000"}]

说明

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

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

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

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

宜春市樟树市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts宜春市樟树市geoJson地图根据经纬度显示自定义html弹窗代码演示