可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理沈阳市苏家屯区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
苏家屯区隶属于辽宁省沈阳市，位于浑河南岸，距沈阳市中心10千米，下辖12个街道，行政区域总面积782平方千米。根据第七次人口普查数据，截至2020年11月1日零时，苏家屯区常住人口为524336人。
echarts沈阳市苏家屯区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts沈阳市苏家屯区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts沈阳市苏家屯区geoJson地图3d地图
使用的是echarts-gl结合echarts实现的3d地图效果实例
threejs沈阳市苏家屯区geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁,如果对threejs感兴趣，可以观看threejs教程视频 WebGL前端3D可视化教程
threejs沈阳市苏家屯区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
threejs沈阳市苏家屯区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
沈阳市苏家屯区 下辖有 八一街道,林盛街道,民主街道,湖西街道,中兴街道,临湖街道,佟沟街道,大沟街道,姚千街道,永乐街道,沙河街道,王纲街道,红菱街道,解放街道,陈相街道,十里河街道,白清街道
沈阳市苏家屯区下辖区域坐标
{"八一街道":[123.26802828708644,41.60429649678579],"林盛街道":[123.3554170555638,41.59298566133487],"民主街道":[123.34283308163815,41.64408835219421],"湖西街道":[123.3258149206562,41.67452303490769],"中兴街道":[123.37480968265848,41.67535769240861],"临湖街道":[123.27202783100392,41.67414092729753],"佟沟街道":[123.54798852191021,41.6042787558455],"大沟街道":[123.44909200036018,41.50118340739084],"姚千街道":[123.60526464655564,41.55161959111692],"永乐街道":[123.17848637782768,41.57242466896385],"沙河街道":[123.41462692214424,41.59359387436709],"王纲街道":[123.17470546839874,41.63569806688304],"红菱街道":[123.2715513314818,41.55230576779667],"解放街道":[123.34523026631364,41.68476786714252],"陈相街道":[123.50798925664779,41.54669893265272],"十里河街道":[123.37116695805398,41.52824869434042],"白清街道":[123.70741475119686,41.56298420821537]}
沈阳市苏家屯区行政划分代码
[{"name":"八一街道","code":""},{"name":"林盛街道","code":"210111009000"},{"name":"民主街道","code":"210111003000"},{"name":"湖西街道","code":""},{"name":"中兴街道","code":"210111005000"},{"name":"临湖街道","code":""},{"name":"佟沟街道","code":"210111018000"},{"name":"大沟街道","code":""},{"name":"姚千街道","code":""},{"name":"永乐街道","code":"210111015000"},{"name":"沙河街道","code":"210111010000"},{"name":"王纲街道","code":""},{"name":"红菱街道","code":""},{"name":"解放街道","code":"210111001000"},{"name":"陈相街道","code":"210111012000"},{"name":"十里河街道","code":"210111011000"},{"name":"白清街道","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
