数据可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理黑河市爱辉区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
爱辉区，隶属于 黑龙江省 黑河市。爱辉区地处黑龙江省东北部，小兴安岭北麓，是黑河市委、市政府的所在地，黑河市政治、经济、文化、教育、医疗中心。根据第七次人口普查数据，截至2020年11月1日零时，爱辉区常住人口为223832人。
echarts黑河市爱辉区geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
echarts黑河市爱辉区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts黑河市爱辉区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs黑河市爱辉区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化
threejs黑河市爱辉区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs黑河市爱辉区geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例
黑河市爱辉区 下辖有 大平林场,望峰林场,江防林场,罕达汽镇,西岗子镇,七二七林场,东方红煤矿,卡伦山林场,西岗子试验林场,兴安街道,爱辉镇,上马厂乡,幸福乡,二站乡,坤河乡,四嘉子乡,大岭林场,胜山林场,花园街道,西兴街道,海兰街道,滨南林场,西峰山乡,锦河农场,宋集屯煤矿,张地营子乡,第二良种场,奶牛场,新生乡,种畜场,三站林场,二站林场,桦皮窑林场,河南屯林场,第一良种场,西岗子煤矿,大新屯储木场
黑河市爱辉区下辖区域坐标
{"大平林场":[126.93325540794717,50.2706679116767],"望峰林场":[126.19162239962895,50.13289327411439],"江防林场":[127.333482837992,50.38598424095478],"罕达汽镇":[126.44251537426204,50.28535054803432],"西岗子镇":[127.26454014483423,49.84135147864346],"七二七林场":[126.59045330930516,50.35931703840998],"东方红煤矿":[127.26903398857972,50.06060383382444],"卡伦山林场":[127.52662767276703,50.11015501749283],"西岗子试验林场":[127.33509173834788,49.91366091603149],"兴安街道":[127.48075980987508,50.23720471936252],"爱辉镇":[127.40037767306188,50.03027326312571],"上马厂乡":[127.05191167147646,50.35724678120711],"幸福乡":[127.38208411115423,50.23279373781234],"二站乡":[126.6351925167804,49.7259732852899],"坤河乡":[127.47846909461839,49.8852426436107],"四嘉子乡":[127.48988193241208,50.15009049714547],"大岭林场":[126.56612024795318,49.50878308501485],"胜山林场":[126.79570814175015,49.49278293083258],"花园街道":[127.51350024630902,50.23520838052259],"西兴街道":[127.47112916874228,50.25247503291105],"海兰街道":[127.47555085802951,50.23856839159904],"滨南林场":[126.6444234760992,50.77745690144644],"西峰山乡":[126.9253551596187,50.64933597103673],"锦河农场":[127.04480454702917,50.05160699972447],"宋集屯煤矿":[127.30542905646732,49.91833917198024],"张地营子乡":[127.00912097186855,50.7055791852048],"第二良种场":[127.42290473759067,49.96528201519037],"奶牛场":[127.3946336697148,50.26483929360545],"新生乡":[126.53729210882763,50.71575118390641],"种畜场":[127.17806777305887,49.73037231363685],"三站林场":[126.79612500393968,49.6281584715186],"二站林场":[126.93984883286569,49.67519751989462],"桦皮窑林场":[126.73422343086935,50.69361636519525],"河南屯林场":[127.41692731620694,50.26688620767735],"第一良种场":[127.34923273773632,49.90263906489243],"西岗子煤矿":[127.34393447256511,49.9504945017179],"大新屯储木场":[127.15085422322144,50.88179118326801]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
