随着开发 数据大屏可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理周口市沈丘县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
沈丘县,隶属 河南省 周口市,位于河南省东南部,豫皖交界处,居颍水中游,西临项城,东与安徽界首接壤,总面积1080平方公里,辖2个街道,15个镇,5个乡,根据第七次全国人口普查结果,截至2020年11月1日零时,沈丘县常住人口956631人。
echarts周口市沈丘县geoJson地图定义颜色
echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.
echarts周口市沈丘县geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts周口市沈丘县geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
threejs周口市沈丘县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果对threejs感兴趣,可以观看threejs课程视频 Three.js视频教程3D可视化
threejs周口市沈丘县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果对threejs感兴趣,可以观看threejs视频课程 Three.js前端3D可视化
threejs周口市沈丘县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话,可以观看threejs视频教程 Three.js视频教程3D可视化
周口市沈丘县下辖有北城街道,新安集镇,周营乡,洪山乡,范营乡,付井镇,老城镇,留福集镇,冯营乡,石槽集乡,刘湾镇,赵德营镇,白集镇,纸店镇,连池乡,刘庄店镇,北杨集乡,卞路口乡,槐店回族镇,李老庄乡,东城街道,大邢庄乡
周口市沈丘县下辖区域坐标
{"北城街道":[115.05829466350225,33.42561053299057],"新安集镇":[115.1846563891297,33.38044117518229],"周营乡":[115.21139186112327,33.32037420094915],"洪山乡":[115.27540613207238,33.38427671766449],"范营乡":[115.1106518016099,33.22906044853515],"付井镇":[115.28312034126485,33.25394248132474],"老城镇":[115.14008849103527,33.17330762207834],"留福集镇":[115.13225472845036,33.1136853753789],"冯营乡":[115.24174309048446,33.18197490417617],"石槽集乡":[115.13825686885951,33.32212559264319],"刘湾镇":[115.33005407983686,33.32009106256756],"赵德营镇":[115.20147374108639,33.24960684334252],"白集镇":[115.08222072657014,33.48037400267417],"纸店镇":[115.26388994654688,33.31895235589182],"连池乡":[115.07513551582744,33.30955089881064],"刘庄店镇":[115.06879912924529,33.15246364852081],"北杨集乡":[115.23252606515932,33.42231465258399],"卞路口乡":[115.14978419423724,33.46507016429893],"槐店回族镇":[115.0718399335145,33.37853790540644],"李老庄乡":[115.00464972639247,33.13675438383117],"东城街道":[115.11535312621419,33.40138669468735],"大邢庄乡":[115.20350726761448,33.15145628500625]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。