echarts陇南市礼县geoJson地图点击地图获取经纬度效果

echarts yekong

数据大屏可视化 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理陇南市礼县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

礼县,隶属 甘肃省 陇南市,地处甘肃省东南部,陇南市北部,东邻天水秦州区、西和县,西接宕昌、岷县,南连陇南市武都区,北与武山、甘谷县接壤。全县面积4299.92平方千米。截至2020年11月1日零时,礼县常住人口424135人。

echarts陇南市礼县geoJson地图点击地图获取经纬度

echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.

echarts陇南市礼县geoJson地图点击地图获取经纬度

echarts陇南市礼县geoJson地图 tooltip轮播

echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.

echarts陇南市礼县geoJson地图 tooltip轮播

echarts陇南市礼县geoJson地图根据经纬度显示自定义html弹窗

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

echarts陇南市礼县geoJson地图根据经纬度显示自定义html弹窗

threejs陇南市礼县geoJson地图3d地图添加旋转棱锥

通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化

threejs陇南市礼县geoJson地图3d地图添加旋转棱锥

threejs陇南市礼县geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮

 threejs陇南市礼县geoJson地图3d地图鼠标移入显示标签并高亮

threejs陇南市礼县geoJson地图3d地图添加金色效果

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

threejs陇南市礼县geoJson地图3d地图添加金色效果

陇南市礼县 下辖有 桥头乡,永兴乡,永坪乡,江口乡,沙金乡,洮坪乡,湫山乡,滩坪乡,王坝乡,白关乡,白河镇,盐官镇,石桥镇,祁山乡,红河乡,罗坝乡,肖良乡,草坪乡,雷坝乡,雷王乡,马河乡,龙林乡,三峪乡,上坪乡,中坝乡,固城乡,城关镇,宽川乡,崖城乡

陇南市礼县下辖区域坐标

{"桥头乡":[104.82282069340202,33.77492410081853],"永兴乡":[105.306331830216,34.20118355393024],"永坪乡":[105.27908732517574,34.28439269437339],"江口乡":[105.057795793017,34.05310180607833],"沙金乡":[104.76783556531134,34.01936768407556],"洮坪乡":[104.93494693036106,34.17319353911505],"湫山乡":[104.93299126137828,34.33627610341783],"滩坪乡":[104.96349100220507,33.82192161501341],"王坝乡":[104.9752469826621,33.74112863553713],"白关乡":[104.92693313481476,33.96775780794146],"白河镇":[104.8371668636068,33.85053767584535],"盐官镇":[105.47957823997811,34.26591220101147],"石桥镇":[105.10616732332072,34.16137473091743],"祁山乡":[105.39632219389006,34.19182060087911],"红河乡":[105.39554832370669,34.38957512145203],"罗坝乡":[105.05593269787654,34.32639587600921],"肖良乡":[105.10226781084327,33.75700111794106],"草坪乡":[104.82009840816505,33.6859821210671],"雷坝乡":[105.0707269991357,33.83093968069463],"雷王乡":[105.14974027009124,34.03867410975052],"马河乡":[105.38275980212364,34.32897612070244],"龙林乡":[105.07145389254937,33.94054527763034],"三峪乡":[104.98848663006098,33.65885480024562],"上坪乡":[104.76869286138758,34.20237112313599],"中坝乡":[104.98795646784805,34.04573112329156],"固城乡":[105.21651419529312,34.44263418063231],"城关镇":[105.17352627992528,34.20433123374616],"宽川乡":[105.50333486734749,34.16663270734466],"崖城乡":[105.11768336058401,34.3781927015506]}

陇南市礼县行政划分代码

[{"name":"桥头乡","code":""},{"name":"永兴乡","code":""},{"name":"永坪乡","code":""},{"name":"江口乡","code":""},{"name":"沙金乡","code":"621226224000"},{"name":"洮坪乡","code":""},{"name":"湫山乡","code":""},{"name":"滩坪乡","code":""},{"name":"王坝乡","code":""},{"name":"白关乡","code":""},{"name":"白河镇","code":"621226103000"},{"name":"盐官镇","code":"621226101000"},{"name":"石桥镇","code":"621226102000"},{"name":"祁山乡","code":""},{"name":"红河乡","code":""},{"name":"罗坝乡","code":""},{"name":"肖良乡","code":"621226231000"},{"name":"草坪乡","code":"621226228000"},{"name":"雷坝乡","code":""},{"name":"雷王乡","code":"621226219000"},{"name":"马河乡","code":"621226203000"},{"name":"龙林乡","code":""},{"name":"三峪乡","code":"621226232000"},{"name":"上坪乡","code":"621226215000"},{"name":"中坝乡","code":""},{"name":"固城乡","code":""},{"name":"城关镇","code":"621226100000"},{"name":"宽川乡","code":""},{"name":"崖城乡","code":""}]

说明

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

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

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

陇南市礼县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts陇南市礼县geoJson地图点击地图获取经纬度效果