echarts曲靖市麒麟区geoJson地图点击弹出自定义弹窗效果

geoJson2 yekong

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

echarts曲靖市麒麟区geoJson地图点击弹出自定义弹窗

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

echarts曲靖市麒麟区geoJson地图点击弹出自定义弹窗

echarts曲靖市麒麟区geoJson地图区域闪烁

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

echarts曲靖市麒麟区geoJson地图区域闪烁

echarts曲靖市麒麟区geoJson地图迁徙图

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

echarts曲靖市麒麟区geoJson地图迁徙图

threejs曲靖市麒麟区geoJson地图3d地图添加描边效果

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

threejs曲靖市麒麟区geoJson地图3d地图添加描边效果

threejs曲靖市麒麟区geoJson地图3d地图

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

threejs曲靖市麒麟区geoJson地图3d地图

threejs曲靖市麒麟区geoJson地图3d地图添加金色效果

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

threejs曲靖市麒麟区geoJson地图3d地图添加金色效果

曲靖市麒麟区 下辖有 三宝镇,东山镇,沿江乡,珠街乡,茨营乡,越州镇,西城街道,建宁街道,太和街道,文华街道,白石江街道,益宁街道,南宁街道,潇湘街道,寥廓街道

曲靖市麒麟区下辖区域坐标

{"三宝镇":[103.82839189769206,25.36731999071245],"东山镇":[104.06352614310794,25.23135277959738],"沿江乡":[103.86898984863333,25.45850631015329],"珠街乡":[103.92340527549075,25.51526923281784],"茨营乡":[103.96221644705764,25.36491436671724],"越州镇":[103.89334704193351,25.25788593067204],"西城街道":[103.7222425426708,25.53232811809785],"建宁街道":[103.78454638532648,25.52268001425716],"太和街道":[103.79379023537012,25.54891637818107],"文华街道":[103.82147267490592,25.50035197650855],"白石江街道":[103.82130072474236,25.53108639138656],"益宁街道":[103.79465360464201,25.45375627306446],"南宁街道":[103.8081974452639,25.48479065818301],"潇湘街道":[103.7252532646817,25.40241965057748],"寥廓街道":[103.76591951479979,25.47661882883112]}

曲靖市麒麟区行政划分代码

[{"name":"三宝镇","code":""},{"name":"东山镇","code":"530302103000"},{"name":"沿江乡","code":""},{"name":"珠街乡","code":""},{"name":"茨营乡","code":""},{"name":"越州镇","code":"530302102000"},{"name":"西城街道","code":"530302005000"},{"name":"建宁街道","code":"530302002000"},{"name":"太和街道","code":"530302008000"},{"name":"文华街道","code":"530302007000"},{"name":"白石江街道","code":"530302003000"},{"name":"益宁街道","code":"530302006000"},{"name":"南宁街道","code":"530302001000"},{"name":"潇湘街道","code":"530302009000"},{"name":"寥廓街道","code":"530302004000"}]

说明

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

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

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

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

曲靖市麒麟区echarts地图效果实例和threejs地图效果实例下载

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