可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理南阳市卧龙区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
卧龙区，隶属河南省南阳市，位于南阳市中心城区西部，东与宛城区、方城县相邻，西与镇平县接壤，南界新野县，北连南召县，是南阳市党、政、军机关所在地，是全市的政治、经济、文化、商贸中心，是南阳市中心城区发展壮大的基本空间和重要载体。全区总面积1017平方公里。
echarts南阳市卧龙区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts南阳市卧龙区geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
echarts南阳市卧龙区geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
threejs南阳市卧龙区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣，可以观看threejs视频课程 Three.js前端3D可视化教程
threejs南阳市卧龙区geoJson地图3d地图
通过threejs绘制的3d地图实例，如果对threejs感兴趣，可以观看threejs视频课程 Three.js 3D可视化
threejs南阳市卧龙区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果想系统的学习threejs的话，可以观看threejs视频课程 WebGL前端3D可视化教程
南阳市卧龙区下辖有光武街道,张衡街道,梅溪街道,武侯街道,潦河坡镇,车站街道,靳岗街道,卧龙岗街道,百里奚街道,安皋镇,蒲山镇,谢庄乡,潦河镇,王村乡,石桥镇,英庄镇,陆营镇,七里园乡,青华镇,龙王沟风景区街道,七一街道
南阳市卧龙区下辖区域坐标
{"光武街道":[112.51713906053621,33.01663695480477],"张衡街道":[112.55277111522497,33.03618130236073],"梅溪街道":[112.52337582123442,32.99975549293536],"武侯街道":[112.49338390468645,32.98460177482936],"潦河坡镇":[112.39702849074503,33.21350882513788],"车站街道":[112.50795402032153,33.00114776342546],"靳岗街道":[112.47353803873517,33.03929254797659],"卧龙岗街道":[112.48797315078949,32.96261022590369],"百里奚街道":[112.49948407191565,33.01059557168568],"安皋镇":[112.37731374580288,33.11979495381868],"蒲山镇":[112.5666366629342,33.11849550688919],"谢庄乡":[112.45224610265674,33.12629072299979],"潦河镇":[112.44253356814943,32.91665974471469],"王村乡":[112.43089365823366,33.01499030113798],"石桥镇":[112.59407058807386,33.18925486220637],"英庄镇":[112.4383905633762,32.75699464307871],"陆营镇":[112.45089361024074,32.84470404488089],"七里园乡":[112.55716383952588,33.05125525657527],"青华镇":[112.35719295263405,32.86681520686616],"龙王沟风景区街道":[112.51357528571288,33.21166241145624],"七一街道":[112.51924532379056,32.98564391194962]}
