echarts宁德市福安市geoJson地图点击跳转到指定页面实例代码

geoJson2 yekong

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

echarts宁德市福安市geoJson地图点击跳转到指定页面

为图标添加点击事件,点击图标,跳转到指定页面

echarts宁德市福安市geoJson地图点击跳转到指定页面

echarts宁德市福安市geoJson地图自定义引导线

echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.

echarts宁德市福安市geoJson地图自定义引导线

echarts宁德市福安市geoJson地图局部颜色渐变

echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果

echarts宁德市福安市geoJson地图局部颜色渐变

threejs宁德市福安市geoJson地图3d地图自定义贴图加CSS3D标签

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

threejs宁德市福安市geoJson地图3d地图自定义贴图加CSS3D标签

threejs宁德市福安市geoJson地图3d地图添加描边效果

通过threejs绘制3d地图使用outlinePass 实现发光描边效果

threejs宁德市福安市geoJson地图3d地图添加描边效果

threejs宁德市福安市geoJson地图3d地图css2d标签

通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名

threejs宁德市福安市geoJson地图3d地图css2d标签

宁德市福安市 下辖有 溪潭镇,潭头镇,甘棠镇,社口镇,穆阳镇,范坑乡,赛岐镇,溪尾镇,溪柄镇,阳头街道,坂中畲族乡,康厝畲族乡,穆云畲族乡,上白石镇,城阳镇,晓阳镇,松罗乡,湾坞镇,下白石镇,城北街道,湾坞工业集中区,城南街道,福安畲族开发区,罗江街道

宁德市福安市下辖区域坐标

{"溪潭镇":[119.57005025118526,27.00780933664608],"潭头镇":[119.66392146473493,27.25745581793306],"甘棠镇":[119.60865760135208,26.91683623452022],"社口镇":[119.57235213091744,27.19164521168315],"穆阳镇":[119.5128103709492,27.07677922693041],"范坑乡":[119.7101229059645,27.33979545620712],"赛岐镇":[119.69948527721034,26.94536258343188],"溪尾镇":[119.79039696884752,26.85943088993099],"溪柄镇":[119.737412188204,27.01163616877724],"阳头街道":[119.64483723122183,27.08297825715536],"坂中畲族乡":[119.61353513017949,27.09994193884906],"康厝畲族乡":[119.50083107751675,27.03834509316561],"穆云畲族乡":[119.50706962604366,27.10027957023424],"上白石镇":[119.71996964232152,27.25213383084969],"城阳镇":[119.70267602063156,27.09607869781079],"晓阳镇":[119.45430637291368,27.17552476415421],"松罗乡":[119.80480092397966,26.94447224461979],"湾坞镇":[119.7259172188906,26.8472066340049],"下白石镇":[119.67261095712915,26.77934407199882],"城北街道":[119.65060953388891,27.10106317409117],"湾坞工业集中区":[119.74446389986461,26.76206724948051],"城南街道":[119.65966521922371,27.07666160063463],"福安畲族开发区":[119.50481414090282,27.05639357272141],"罗江街道":[119.62995425976936,26.96395781357199]}

宁德市福安市行政划分代码

[{"name":"溪潭镇","code":"350981106000"},{"name":"潭头镇","code":"350981103000"},{"name":"甘棠镇","code":"350981107000"},{"name":"社口镇","code":"350981104000"},{"name":"穆阳镇","code":"350981101000"},{"name":"范坑乡","code":"350981202000"},{"name":"赛岐镇","code":"350981100000"},{"name":"溪尾镇","code":"350981109000"},{"name":"溪柄镇","code":"350981110000"},{"name":"阳头街道","code":"350981003000"},{"name":"坂中畲族乡","code":"350981201000"},{"name":"康厝畲族乡","code":"350981204000"},{"name":"穆云畲族乡","code":"350981203000"},{"name":"上白石镇","code":"350981102000"},{"name":"城阳镇","code":"350981112000"},{"name":"晓阳镇","code":"350981105000"},{"name":"松罗乡","code":"350981206000"},{"name":"湾坞镇","code":"350981111000"},{"name":"下白石镇","code":"350981108000"},{"name":"城北街道","code":"350981002000"},{"name":"湾坞工业集中区","code":"350981502000"},{"name":"城南街道","code":"350981001000"},{"name":"福安畲族开发区","code":"350981501000"},{"name":"罗江街道","code":"350981004000"}]

说明

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

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

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

4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看

宁德市福安市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts宁德市福安市geoJson地图点击跳转到指定页面实例代码