可视化大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理沈阳市浑南区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
浑南区,辽宁省沈阳市辖区,始建于1964年,因大部分辖区在浑河南岸而得名。位于沈阳市东南部,介于东经123°18'41"至123°48'19"之间,北纬41°36'10"至41°57'54"之间,区域总面积803平方公里, 辖13个街道、218个社区,是沈阳市的行政中心、全国首批国家级高新区、沈大国家自主创新示范区沈阳片区的核心区、中国(辽宁)自贸试验区的重要承载区。根据第七次人口普查数据,截至2020年11月1日零时,浑南区常住人口为798765人。
echarts沈阳市浑南区geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
echarts沈阳市浑南区geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
echarts沈阳市浑南区geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
threejs沈阳市浑南区geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果对threejs感兴趣,可以观看threejs视频 Three.js前端3D可视化教程
threejs沈阳市浑南区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
threejs沈阳市浑南区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
沈阳市浑南区 下辖有 营城子街道,东湖街道,五三街道,李相街道,桃仙街道,汪家街道,白塔街道,祝家街道,英达街道,深井子街道,高坎街道,浑河站东街道,满堂街道,王滨街道
沈阳市浑南区下辖区域坐标
{"营城子街道":[123.54019427864256,41.70464788445229],"东湖街道":[123.54797127402301,41.76657928779856],"五三街道":[123.46522080832455,41.72651624334955],"李相街道":[123.58669826223195,41.65116192377018],"桃仙街道":[123.49889983351342,41.65294785056711],"汪家街道":[123.62734526094687,41.80316425517908],"白塔街道":[123.42738884860177,41.67011008807489],"祝家街道":[123.6637395905081,41.6709531285336],"英达街道":[123.59067183935883,41.86457966427226],"深井子街道":[123.62678182228376,41.75692211047832],"高坎街道":[123.67165949492637,41.88025227550085],"浑河站东街道":[123.4046144815861,41.71438717723161],"满堂街道":[123.68682672373126,41.94205426033766],"王滨街道":[123.72795581039475,41.72492591072057]}
沈阳市浑南区行政划分代码
[{"name":"营城子街道","code":""},{"name":"东湖街道","code":"210112009000"},{"name":"五三街道","code":"210112010000"},{"name":"李相街道","code":"210112020000"},{"name":"桃仙街道","code":"210112019000"},{"name":"汪家街道","code":"210112022000"},{"name":"白塔街道","code":"210112018000"},{"name":"祝家街道","code":"210112017000"},{"name":"英达街道","code":""},{"name":"深井子街道","code":"210112016000"},{"name":"高坎街道","code":"210112014000"},{"name":"浑河站东街道","code":"210112012000"},{"name":"满堂街道","code":"210112015000"},{"name":"王滨街道","code":"210112023000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。