echarts郑州市登封市geoJson地图点击地图插小旗效果实例

echarts yekong 413℃

大屏数据可视化 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是郑州市登封市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

登封市,河南省 辖县级市,由 郑州市 代管,地处郑州市西南部,东临新密市,西接伊川县,南与禹州市、汝州市交界,北与洛阳市偃师区、巩义市毗连,介于北纬34°35’~34°15’,东经112°49’~113°19’。行政区域总面积1217平方千米。截至2021年末,登封市常住人口73.22万人。

echarts郑州市登封市geoJson地图点击地图插小旗

echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.

echarts郑州市登封市geoJson地图点击地图插小旗

echarts郑州市登封市geoJson地图点击弹出自定义弹窗

我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.

echarts郑州市登封市geoJson地图点击弹出自定义弹窗

echarts郑州市登封市geoJson地图自定义label样式

echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果

echarts郑州市登封市geoJson地图自定义label样式

threejs郑州市登封市geoJson地图3d地图添加旋转棱锥

通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果想系统的学习threejs的话,可以观看threejs课程视频 Three.js视频教程3D可视化

threejs郑州市登封市geoJson地图3d地图添加旋转棱锥

threejs郑州市登封市geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL前端3D可视化教程

threejs郑州市登封市geoJson地图3d地图自定义贴图加CSS3D标签

threejs郑州市登封市geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁,如果对threejs感兴趣,可以观看threejs视频课程 WebGL/Three.js前端高薪3D可视化

threejs郑州市登封市geoJson地图3d地图指定区域闪烁

郑州市登封市下辖有阳城区镇,东华镇,卢店镇,君召乡,告成镇,唐庄乡,大冶镇,宣化镇,徐庄镇,白坪乡,石道乡,颖阳镇,中岳街道,大金店镇,少林街道,嵩阳街道,送表矿区

郑州市登封市下辖区域坐标

{"阳城区镇":[113.1344411606628,34.36192475160141],"东华镇":[113.05393721206289,34.38226712494139],"卢店镇":[113.18119614499221,34.46066561365286],"君召乡":[112.83750824332776,34.41511422510003],"告成镇":[113.14674007237733,34.3864474414197],"唐庄乡":[113.09669871921243,34.53216061910609],"大冶镇":[113.22655434902698,34.43903932883688],"宣化镇":[113.26633938115795,34.38422520410025],"徐庄镇":[113.16109829396194,34.30553053459339],"白坪乡":[113.06077729083141,34.31300401081659],"石道乡":[112.86350150872931,34.4038414763243],"颖阳镇":[112.75817784115706,34.42219812510085],"中岳街道":[113.09315223960553,34.47249546637067],"大金店镇":[112.96261046386806,34.38675882366093],"少林街道":[112.96377693194938,34.48195628027304],"嵩阳街道":[113.02699475463862,34.48030947782856],"送表矿区":[112.89973045588715,34.31750873541866]}

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

郑州市登封市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts郑州市登封市geoJson地图点击地图插小旗效果实例