echarts哈尔滨市双城区geoJson地图点击地图获取经纬度代码演示

geoJson2 yekong 80℃

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

双城区隶属于黑龙江省哈尔滨市,位于黑龙江省哈尔滨市西南部,地处松嫩平原腹部,松花江南岸,地势呈东高西低,地理坐标为东经125°41′至126°42′,北纬45°08′至45°43′,总面积3112平方千米 。根据第七次人口普查数据,截至2020年11月1日零时,双城区常住人口为633880人。

echarts哈尔滨市双城区geoJson地图点击地图获取经纬度

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

echarts哈尔滨市双城区geoJson地图点击地图获取经纬度

echarts哈尔滨市双城区geoJson地图根据经纬度显示自定义html弹窗

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

echarts哈尔滨市双城区geoJson地图根据经纬度显示自定义html弹窗

echarts哈尔滨市双城区geoJson地图阴影

echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.

echarts哈尔滨市双城区geoJson地图阴影

threejs哈尔滨市双城区geoJson地图3d地图CSS2D外加旋转棱锥

通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果对threejs感兴趣,可以观看threejs视频 Three.js视频教程3D可视化

threejs哈尔滨市双城区geoJson地图3d地图CSS2D外加旋转棱锥

threejs哈尔滨市双城区geoJson地图3d地图指定区域闪烁

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

threejs哈尔滨市双城区geoJson地图3d地图指定区域闪烁

哈尔滨市双城区 下辖有 临江乡,幸福满族乡,联兴满族乡,东官镇,双城镇,希勤满族乡,杏山镇,水泉乡,团结满族乡,万隆乡,五家镇,兰棱镇,单城镇,公正满族乡,周家镇,双城市街道,新兴镇,朝阳乡,永胜乡,同心满族乡,金城乡,韩甸镇,乐群满族乡,青岭满族乡,农丰满族锡伯族镇

哈尔滨市双城区下辖区域坐标

{"临江乡":[125.97672211749811,45.56653064505797],"幸福满族乡":[126.40022630912091,45.44166829890663],"联兴满族乡":[126.44273375296052,45.37492013932597],"东官镇":[126.54110341158761,45.43826163453762],"双城镇":[126.30955148228543,45.38713874834893],"希勤满族乡":[126.04059950551621,45.29675930780824],"杏山镇":[125.8660805200806,45.47697365706583],"水泉乡":[126.03139857418167,45.45589454094065],"团结满族乡":[126.01282961133163,45.37528184602043],"万隆乡":[125.78039639074942,45.42139071201123],"五家镇":[126.35112545033886,45.56340575572013],"兰棱镇":[126.18177190244305,45.20047628469391],"单城镇":[126.47422268776828,45.27499693428446],"公正满族乡":[126.28825349927774,45.52156323407041],"周家镇":[126.63355826555602,45.49069195252136],"双城市街道":[126.29459030727682,45.37812494568897],"新兴镇":[126.51029767915699,45.51996355905048],"朝阳乡":[126.32447575159509,45.250579774469],"永胜乡":[126.07227481034289,45.62118408056547],"同心满族乡":[126.1920377592939,45.30228756480372],"金城乡":[126.02310132036624,45.19754969907704],"韩甸镇":[125.84934349570413,45.27612719605517],"乐群满族乡":[126.19350478865611,45.39406236563173],"青岭满族乡":[126.5743003849235,45.35945629226197],"农丰满族锡伯族镇":[126.12918236460321,45.49534430462013]}

说明

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

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

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

哈尔滨市双城区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts哈尔滨市双城区geoJson地图点击地图获取经纬度代码演示