大屏数据可视化 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是安阳市滑县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
滑县,隶属 河南省 安阳市 ,是河南省直管县,地处豫北平原,与濮阳、延津、浚县、长垣、封丘、内黄接壤,南距郑州市130公里,北距安阳市70公里,东北距濮阳市53公里,西南距新乡市70公里,西北距鹤壁新市区25公里。全县面积1814平方公里,耕地面积201万亩。
echarts安阳市滑县geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts安阳市滑县geoJson地图热力图
echarts通过heatmap实现热力图效果
echarts安阳市滑县geoJson地图定义颜色
echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.
threejs安阳市滑县geoJson地图3d地图
通过threejs绘制的3d地图实例,如果对threejs感兴趣,可以观看threejs课程视频 Three.js前端3D可视化教程
threejs安阳市滑县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果对threejs感兴趣,可以观看threejs视频教程 Three.js前端3D可视化
threejs安阳市滑县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果想系统的学习threejs的话,可以观看threejs教程视频 WebGL前端3D可视化教程
安阳市滑县下辖有老店镇,新区管委会,瓦岗寨乡,赵营乡,万古镇,上官镇,城关镇,留固镇,大寨乡,小铺乡,枣村乡,桑村乡,焦虎乡,王庄镇,牛屯镇,道口镇,慈周寨乡,高平镇,八里营乡,半坡店乡,四间房乡,白道口镇,老爷庙乡
安阳市滑县下辖区域坐标
{"老店镇":[114.53042716095466,35.43538442512784],"新区管委会":[114.5398828595423,35.52535249026012],"瓦岗寨乡":[114.58587125460551,35.3270186027739],"赵营乡":[114.89252978154265,35.56663135668347],"万古镇":[114.75361702434742,35.43924254573376],"上官镇":[114.64079341481687,35.4293299244689],"城关镇":[114.57882863608373,35.55293165510228],"留固镇":[114.68831144281886,35.51423836673678],"大寨乡":[114.90423494389321,35.4988543522021],"小铺乡":[114.47733352180879,35.51933748960282],"枣村乡":[114.64076916461482,35.59385023027896],"桑村乡":[114.93171290078189,35.42476107763333],"焦虎乡":[114.5331904016353,35.31524638944256],"王庄镇":[114.45084934733114,35.4787554424699],"牛屯镇":[114.45241756560844,35.26915031833522],"道口镇":[114.50607823552991,35.58439618238287],"慈周寨乡":[114.65956553640365,35.34470993191056],"高平镇":[114.76542472811798,35.37148030499242],"八里营乡":[114.80087160207601,35.54241461195046],"半坡店乡":[114.4546171967021,35.37137613510568],"四间房乡":[114.8239865478279,35.64339329315786],"白道口镇":[114.72782858258518,35.63294575685374],"老爷庙乡":[114.86330358639299,35.43573955176767]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。