随着开发 数据可视化大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理惠州市龙门县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
龙门县，隶属 广东省 惠州市 ，县境原是增城县的上龙门地区，故以龙门命县名。位于广东省中部，增江上游，东南与河源市、惠州市博罗县接壤，西南与广州市从化区、增城区毗邻，北与韶关市新丰县相连，总面积2267.2平方千米。截至2019年，龙门县共辖2个街道、7个镇、1个瑶族乡。根据第七次人口普查数据，截至2020年11月1日零时，龙门县常住人口319183人。
echarts惠州市龙门县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts惠州市龙门县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts惠州市龙门县geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
threejs惠州市龙门县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs课程视频 WebGL前端3D可视化教程
threejs惠州市龙门县geoJson地图3d地图
通过threejs绘制的3d地图实例
threejs惠州市龙门县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
惠州市龙门县下辖有麻榨镇,蓝田瑶族乡,龙门县密溪林场,南昆山生态旅游区,地派镇,平陵镇,永汉镇,龙华镇,龙江镇,龙潭镇,龙田镇,龙城街道
惠州市龙门县下辖区域坐标
{"麻榨镇":[114.06619952808346,23.43364806957083],"蓝田瑶族乡":[114.22808503544036,23.88957174855237],"龙门县密溪林场":[114.1460446960433,23.89064995675609],"南昆山生态旅游区":[113.87192107517134,23.6618927667149],"地派镇":[114.12123543683235,23.84795004462414],"平陵镇":[114.34168305291536,23.66287188211886],"永汉镇":[113.93902754136661,23.59900059045037],"龙华镇":[114.13490546433873,23.57749033486376],"龙江镇":[114.26653487452276,23.55601808744725],"龙潭镇":[114.04396753269711,23.7128360061151],"龙田镇":[114.2666392097448,23.82309479979595],"龙城街道":[114.25548074837755,23.71649878578974]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
