可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是河源市东源县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
东源县,隶属 广东省 河源市 。位于广东省东北部、东江中上游,东邻龙川县、五华县,南接源城区和紫金县,西连龙门县、新丰县,北靠和平县、连平县,总面积4070平方公里。截至2022年10月,东源县下辖20个镇、1个乡。2021年,东源县户籍人口58.68万人。
echarts河源市东源县geoJson地图自定义label样式
echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果
echarts河源市东源县geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
echarts河源市东源县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs河源市东源县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果想系统的学习threejs的话,可以观看threejs教程视频 3D可视化Three.js视频教程
threejs河源市东源县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小
threejs河源市东源县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
河源市东源县下辖有叶潭镇,顺天镇,骆湖镇,黄村镇,黄田镇,新回龙镇,双江镇,康禾镇,新港镇,曾田镇,柳城镇,涧头镇,漳溪乡,灯塔镇,船塘镇,蓝口镇,锡场镇,上莞镇,义合镇,仙塘镇,半江镇
河源市东源县下辖区域坐标
{"叶潭镇":[115.20236476817848,23.87854425749559],"顺天镇":[114.7841479938949,24.10896656648486],"骆湖镇":[114.8815730077976,24.06531700202613],"黄村镇":[115.24496775256799,23.82002460151036],"黄田镇":[114.96014388798474,23.8407548264963],"新回龙镇":[114.45671824859073,23.77473970591445],"双江镇":[114.67435541810558,23.95746494254174],"康禾镇":[115.10136796246954,23.79101822070024],"新港镇":[114.6552634756699,23.8165574744279],"曾田镇":[114.96445615270474,23.99339014859515],"柳城镇":[115.09874617070876,24.05428754385252],"涧头镇":[114.67746627645332,24.0807474681297],"漳溪乡":[114.90944615782746,24.11051384358577],"灯塔镇":[114.82733012562312,23.98694324234638],"船塘镇":[114.93227398316019,24.18698423418755],"蓝口镇":[115.07196919245118,23.95514160436129],"锡场镇":[114.49365870385896,23.92671822072471],"上莞镇":[115.01083248310829,24.10648232159094],"义合镇":[114.88566613088713,23.83757059190822],"仙塘镇":[114.7763548100199,23.83959226376302],"半江镇":[114.53718433409551,24.04587263499046]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。