大屏数据可视化 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理绍兴市越城区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts绍兴市越城区geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts绍兴市越城区geoJson地图3d地图
使用的是echarts-gl结合echarts实现的3d地图效果实例
echarts绍兴市越城区geoJson地图3d地图自定义图标
echarts 3d地图添加自定义图标实例
threejs绍兴市越城区geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁,如果对threejs感兴趣,可以观看threejs视频 WebGL/Three.js前端高薪3D可视化
threejs绍兴市越城区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs绍兴市越城区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
绍兴市越城区 下辖有 沥海街道,富盛镇,塔山街道,斗门街道,灵芝镇,皋埠街道,鉴湖街道,东浦街道,东湖街道,孙端街道,陶堰街道,北海街道,城南街道,府山街道,稽山街道,马山街道,迪荡街道
绍兴市越城区下辖区域坐标
{"沥海街道":[120.74057154744146,30.15975360942547],"富盛镇":[120.7316508815047,29.93262356992012],"塔山街道":[120.58574407802723,29.99278670681702],"斗门街道":[120.61358313571967,30.08308489219277],"灵芝镇":[120.55604304267982,30.06117535669434],"皋埠街道":[120.67587299940499,29.96774955928223],"鉴湖街道":[120.56435992771115,29.92095474721808],"东浦街道":[120.52706961737087,30.04471337644395],"东湖街道":[120.65002147662597,30.02795259415954],"孙端街道":[120.70465780594941,30.06238337601512],"陶堰街道":[120.73567984936076,30.01370268846065],"北海街道":[120.56048380124484,30.01901029322818],"城南街道":[120.5802290993164,29.96523673094561],"府山街道":[120.55555539820972,29.98516975309478],"稽山街道":[120.61660438902854,29.97268181440295],"马山街道":[120.6507053959534,30.07265402323873],"迪荡街道":[120.60070737423081,30.01424832956525]}
绍兴市越城区行政划分代码
[{"name":"沥海街道","code":"330602017000"},{"name":"富盛镇","code":"330602108000"},{"name":"塔山街道","code":"330602001000"},{"name":"斗门街道","code":"330602012000"},{"name":"灵芝镇","code":""},{"name":"皋埠街道","code":"330602013000"},{"name":"鉴湖街道","code":"330602011000"},{"name":"东浦街道","code":"330602010000"},{"name":"东湖街道","code":"330602008000"},{"name":"孙端街道","code":"330602015000"},{"name":"陶堰街道","code":"330602016000"},{"name":"北海街道","code":"330602004000"},{"name":"城南街道","code":"330602005000"},{"name":"府山街道","code":"330602002000"},{"name":"稽山街道","code":"330602006000"},{"name":"马山街道","code":"330602014000"},{"name":"迪荡街道","code":"330602007000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看