可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是鹤岗市绥滨县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
绥滨县,隶属于 黑龙江省 鹤岗市,因地处边境,又濒松花江,乃取“绥靖”(安抚)和“滨江”之意。绥滨县北以黑龙江主航道为界与俄罗斯隔江相望,东、南依松花江与同江市、富锦市带水相连,西与萝北县接壤。截至2019年末,绥滨县辖3镇、6乡、2林场、3农场、1种蓄场、1良种场,总面积3344平方公里。根据第七次人口普查数据,截至2020年11月1日零时,绥滨县常住人口为139795人。
echarts鹤岗市绥滨县geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
echarts鹤岗市绥滨县geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
echarts鹤岗市绥滨县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs鹤岗市绥滨县geoJson地图3d地图
通过threejs绘制的3d地图实例,如果对threejs感兴趣,可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化
threejs鹤岗市绥滨县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小
threejs鹤岗市绥滨县geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能
鹤岗市绥滨县 下辖有 福兴乡,北山乡,北岗乡,富强乡,二九0农场,绥滨西林场,绥东镇,忠仁镇,新富乡,绥滨镇,连生乡,普阳农场,绥滨农场,忠仁镇良种场,绥东镇种畜场,国营中兴边防林场
鹤岗市绥滨县下辖区域坐标
{"福兴乡":[131.67355895314967,47.63399725054539],"北山乡":[131.67995795678365,47.45583337575866],"北岗乡":[131.74136428303717,47.34223969623743],"富强乡":[131.59886289720953,47.29947774492615],"二九0农场":[132.1618149497642,47.60617744508394],"绥滨西林场":[131.49291490115178,47.3112705624214],"绥东镇":[132.20458279137432,47.48122938475514],"忠仁镇":[132.33053575021182,47.68375101027826],"新富乡":[131.45193282651044,47.3958114826409],"绥滨镇":[131.91484771951087,47.32255572141381],"连生乡":[131.9216502489195,47.4441835059191],"普阳农场":[131.26256106148688,47.27388113670283],"绥滨农场":[131.62240523547143,47.46648771500828],"忠仁镇良种场":[131.8072420373145,47.55152383444559],"绥东镇种畜场":[132.39883595766136,47.57323418439766],"国营中兴边防林场":[131.9843184887303,47.64595017913372]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。