大屏数据可视化 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是淮安市洪泽区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts淮安市洪泽区geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
echarts淮安市洪泽区geoJson地图3d地图自定义贴图-绿色地面
3d地图自定义贴图-绿色地面,echarts结合echarts-gl实现3d地图自定义贴图效果,通过设置 shading: 'realistic',以及realisticMaterial来设置自定义纹理贴图,当前效果为绿色地面的效果实例
echarts淮安市洪泽区geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
threejs淮安市洪泽区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份,如果对threejs感兴趣,可以观看threejs教程视频 3D可视化Three.js视频教程
threejs淮安市洪泽区geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs淮安市洪泽区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
淮安市洪泽区 下辖有 蒋坝镇,三河镇,岔河镇,朱坝镇,黄集镇,万集镇,仁和镇,共和镇,东双沟镇,西顺河镇,老子山镇,高良涧镇,洪泽经济开发区
淮安市洪泽区下辖区域坐标
{"蒋坝镇":[118.747763898382,33.10721182906932],"三河镇":[118.7826275179505,33.13287420529268],"岔河镇":[119.06906890588562,33.26915810575596],"朱坝镇":[118.93228596993676,33.26991354289248],"黄集镇":[118.99993685039726,33.32363240246404],"万集镇":[118.9194553750025,33.19157474575717],"仁和镇":[119.03775712403089,33.21645444361167],"共和镇":[118.90631248282207,33.10236129618811],"东双沟镇":[118.78933415546766,33.2377089813279],"西顺河镇":[118.86650113371698,33.36248100429606],"老子山镇":[118.57288150068112,33.1908080371026],"高良涧镇":[118.85659081217128,33.3121034393459],"洪泽经济开发区":[118.87690685763383,33.32384371683155]}
淮安市洪泽区行政划分代码
[{"name":"蒋坝镇","code":"320813101000"},{"name":"三河镇","code":"320813106000"},{"name":"岔河镇","code":"320813103000"},{"name":"朱坝镇","code":""},{"name":"黄集镇","code":""},{"name":"万集镇","code":""},{"name":"仁和镇","code":""},{"name":"共和镇","code":""},{"name":"东双沟镇","code":"320813110000"},{"name":"西顺河镇","code":"320813104000"},{"name":"老子山镇","code":"320813105000"},{"name":"高良涧镇","code":""},{"name":"洪泽经济开发区","code":"320813400000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看