可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理连云港市海州区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts连云港市海州区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts连云港市海州区geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts连云港市海州区geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
threejs连云港市海州区geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果想系统的学习threejs的话，可以观看threejs视频课程 Three.js前端3D可视化
threejs连云港市海州区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs连云港市海州区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
连云港市海州区 下辖有 新浦经济开发区,海州经济开发区,岗埠农场,新东街道,新南街道,海州街道,路南街道,云台农场,浦西街道,宁海街道,云台街道,南城街道,朐阳街道,洪门街道,浦东街道,南云台林场,幸福路街道,花果山街道,新坝镇,板浦镇,浦南镇,锦屏镇,新海街道
连云港市海州区下辖区域坐标
{"新浦经济开发区":[119.09889557564458,34.59973078312902],"海州经济开发区":[119.19750822331645,34.55447084482708],"岗埠农场":[119.01760146719093,34.56562307151836],"新东街道":[119.2022089461987,34.60196020444563],"新南街道":[119.18645545576508,34.58116065635723],"海州街道":[119.13162116088445,34.56947375335318],"路南街道":[119.17627199898038,34.59686704142528],"云台农场":[119.31389286870422,34.59594983506656],"浦西街道":[119.14999074509589,34.61341250954622],"宁海街道":[119.24076607116953,34.53412578785981],"云台街道":[119.31987247420457,34.61014650361498],"南城街道":[119.22199202190897,34.57117159944336],"朐阳街道":[119.14157965167374,34.56485513469998],"洪门街道":[119.12086967672485,34.58943376193994],"浦东街道":[119.1783122418216,34.62797167779361],"南云台林场":[119.2851733745953,34.61670592744483],"幸福路街道":[119.13530210260089,34.5810912599915],"花果山街道":[119.24947877383576,34.63421519294489],"新坝镇":[119.1462865823463,34.4723268956058],"板浦镇":[119.29419782358939,34.49610780192344],"浦南镇":[119.08743335602978,34.65219040210959],"锦屏镇":[119.1435453502269,34.52437969548868],"新海街道":[119.15423648817382,34.59129793852237]}
连云港市海州区行政划分代码
[{"name":"新浦经济开发区","code":"320706403000"},{"name":"海州经济开发区","code":"320706404000"},{"name":"岗埠农场","code":"320706402000"},{"name":"新东街道","code":"320706017000"},{"name":"新南街道","code":"320706018000"},{"name":"海州街道","code":"320706011000"},{"name":"路南街道","code":"320706019000"},{"name":"云台农场","code":"320706406000"},{"name":"浦西街道","code":"320706016000"},{"name":"宁海街道","code":"320706014000"},{"name":"云台街道","code":"320706009000"},{"name":"南城街道","code":"320706021000"},{"name":"朐阳街道","code":"320706001000"},{"name":"洪门街道","code":"320706013000"},{"name":"浦东街道","code":""},{"name":"南云台林场","code":""},{"name":"幸福路街道","code":"320706012000"},{"name":"花果山街道","code":"320706020000"},{"name":"新坝镇","code":"320706102000"},{"name":"板浦镇","code":"320706103000"},{"name":"浦南镇","code":"320706104000"},{"name":"锦屏镇","code":"320706100000"},{"name":"新海街道","code":"320706006000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
