echarts玉林市北流市geoJson地图点击弹出自定义弹窗实例

geoJson2 yekong

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

echarts玉林市北流市geoJson地图点击弹出自定义弹窗

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

echarts玉林市北流市geoJson地图点击弹出自定义弹窗

echarts玉林市北流市geoJson地图点击跳转到指定页面

为图标添加点击事件,点击图标,跳转到指定页面

echarts玉林市北流市geoJson地图点击跳转到指定页面

echarts玉林市北流市geoJson地图3d地图自定义贴图-绿色地面

3d地图自定义贴图-绿色地面,echarts结合echarts-gl实现3d地图自定义贴图效果,通过设置 shading: 'realistic',以及realisticMaterial来设置自定义纹理贴图,当前效果为绿色地面的效果实例

echarts玉林市北流市geoJson地图3d地图自定义贴图-绿色地面

threejs玉林市北流市geoJson地图3d地图css2d标签

通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话,可以观看threejs课程视频 WebGL/Three.js前端高薪3D可视化

threejs玉林市北流市geoJson地图3d地图css2d标签

threejs玉林市北流市geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例

threejs玉林市北流市geoJson地图3d地图

threejs玉林市北流市geoJson地图3d地图添加旋转棱锥

通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例

threejs玉林市北流市geoJson地图3d地图添加旋转棱锥

玉林市北流市 下辖有 六靖镇,西垠镇,隆盛镇,白马镇,石窝镇,大伦镇,大里镇,山围镇,平政镇,六麻镇,北流镇,塘岸镇,城北街道,城南街道,大坡外镇,清水口镇,扶新镇,新丰镇,新圩镇,新荣镇,民乐镇,民安镇,沙垌镇,清湾镇,陵城街道

玉林市北流市下辖区域坐标

{"六靖镇":[110.53129860700555,22.25165236197392],"西垠镇":[110.25541512944889,22.79290076158205],"隆盛镇":[110.50245492722814,22.51234169836421],"白马镇":[110.67451894724272,22.34161711787863],"石窝镇":[110.45096695089143,22.24248702046302],"大伦镇":[110.70583374294279,22.30456924730636],"大里镇":[110.16734109636094,22.77787469181663],"山围镇":[110.42174987947848,22.85042635141204],"平政镇":[110.54197015436881,22.35638135404683],"六麻镇":[110.4097491785235,22.41312234959992],"北流镇":[110.34804779178668,22.7018624763628],"塘岸镇":[110.31026820032591,22.60487769734225],"城北街道":[110.33600027996661,22.72423684774976],"城南街道":[110.32896621786833,22.69463797059107],"大坡外镇":[110.51347891470161,22.59359414685161],"清水口镇":[110.38673691108615,22.55927415275849],"扶新镇":[110.67266961057886,22.41883624818059],"新丰镇":[110.54301910312608,22.46311034037745],"新圩镇":[110.23335467208511,22.75936109109092],"新荣镇":[110.44891968641517,22.68107971674823],"民乐镇":[110.33444672376794,22.82225697523855],"民安镇":[110.43145320738557,22.7409517285792],"沙垌镇":[110.59712168809712,22.43531687631157],"清湾镇":[110.60793494843337,22.22890938856554],"陵城街道":[110.35792749601259,22.70676448714799]}

玉林市北流市行政划分代码

[{"name":"六靖镇","code":"450981119000"},{"name":"西垠镇","code":""},{"name":"隆盛镇","code":"450981110000"},{"name":"白马镇","code":"450981116000"},{"name":"石窝镇","code":"450981120000"},{"name":"大伦镇","code":"450981117000"},{"name":"大里镇","code":"450981107000"},{"name":"山围镇","code":"450981103000"},{"name":"平政镇","code":"450981115000"},{"name":"六麻镇","code":"450981112000"},{"name":"北流镇","code":"450981100000"},{"name":"塘岸镇","code":"450981108000"},{"name":"城北街道","code":"450981003000"},{"name":"城南街道","code":"450981002000"},{"name":"大坡外镇","code":"450981111000"},{"name":"清水口镇","code":"450981109000"},{"name":"扶新镇","code":"450981118000"},{"name":"新丰镇","code":"450981113000"},{"name":"新圩镇","code":"450981106000"},{"name":"新荣镇","code":"450981101000"},{"name":"民乐镇","code":"450981104000"},{"name":"民安镇","code":"450981102000"},{"name":"沙垌镇","code":"450981114000"},{"name":"清湾镇","code":"450981121000"},{"name":"陵城街道","code":"450981001000"}]

说明

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

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

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

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

玉林市北流市echarts地图效果实例和threejs地图效果实例下载

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