数据大屏可视化 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是宁德市福鼎市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts宁德市福鼎市geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts宁德市福鼎市geoJson地图3d地图自定义贴图-绿色地面
3d地图自定义贴图-绿色地面,echarts结合echarts-gl实现3d地图自定义贴图效果,通过设置 shading: 'realistic',以及realisticMaterial来设置自定义纹理贴图,当前效果为绿色地面的效果实例
echarts宁德市福鼎市geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
threejs宁德市福鼎市geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果想系统的学习threejs的话,可以观看threejs视频 Three.js前端3D可视化教程
threejs宁德市福鼎市geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
threejs宁德市福鼎市geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
宁德市福鼎市 下辖有 太姥山镇,佳阳乡,前岐镇,嵛山镇,店下镇,沙埕镇,点头镇,白琳镇,磻溪镇,管阳镇,叠石乡,山前街道,桐城街道,桐山街道,硖门畲族乡,龙安开发区,贯岭镇
宁德市福鼎市下辖区域坐标
{"太姥山镇":[120.32634496990869,27.07076665466596],"佳阳乡":[120.35343196458714,27.26747464008064],"前岐镇":[120.3180300931075,27.33021719678637],"嵛山镇":[120.3356844062219,26.94750906874659],"店下镇":[120.31034749594868,27.1606233983188],"沙埕镇":[120.53880291707294,27.07865644695038],"点头镇":[120.11970535268725,27.25269725825739],"白琳镇":[120.17645309529716,27.19686918824191],"磻溪镇":[120.06210625467881,27.11755988286791],"管阳镇":[120.04080877630108,27.30065131464668],"叠石乡":[120.11978913818035,27.37504247864859],"山前街道":[120.24371693419336,27.32480912864536],"桐城街道":[120.19692486174301,27.30279477024689],"桐山街道":[120.16150829211209,27.34787930882934],"硖门畲族乡":[120.21961672980743,27.02985909541601],"龙安开发区":[120.36171404776374,27.20240705264773],"贯岭镇":[120.22426806776866,27.38893752844851]}
宁德市福鼎市行政划分代码
[{"name":"太姥山镇","code":"350982104000"},{"name":"佳阳乡","code":"350982202000"},{"name":"前岐镇","code":"350982101000"},{"name":"嵛山镇","code":"350982109000"},{"name":"店下镇","code":"350982103000"},{"name":"沙埕镇","code":"350982102000"},{"name":"点头镇","code":"350982107000"},{"name":"白琳镇","code":"350982106000"},{"name":"磻溪镇","code":"350982105000"},{"name":"管阳镇","code":"350982108000"},{"name":"叠石乡","code":"350982201000"},{"name":"山前街道","code":"350982003000"},{"name":"桐城街道","code":"350982002000"},{"name":"桐山街道","code":"350982001000"},{"name":"硖门畲族乡","code":"350982200000"},{"name":"龙安开发区","code":"350982500000"},{"name":"贯岭镇","code":"350982100000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看