数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是济宁市曲阜市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
曲阜，山东省辖县级市，鲁国故都。由济宁市代管，是孔子故乡，黄帝生地、神农故都、商殷故国、周汉鲁都，是东方文化重要发祥地，被誉为“东方圣城”，亦被称为“东方耶路撒冷”。地处山东省西南部，北距省会济南135千米，东连泗水、西抵兖州、南临邹城、北望泰山，辖8个镇、4个街道，457个村居，总面积815平方千米。截至2021年末，曲阜市常住人口为62.23万人。
echarts济宁市曲阜市geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts济宁市曲阜市geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
echarts济宁市曲阜市geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
threejs济宁市曲阜市geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs视频 3D可视化Three.js视频教程
threejs济宁市曲阜市geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs济宁市曲阜市geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
济宁市曲阜市 下辖有 防山镇,吴村镇,姚村镇,尼山镇,息陬镇,王庄镇,陵城镇,书院街道,小雪街道,时庄街道,石门山镇,鲁城街道
济宁市曲阜市下辖区域坐标
{"防山镇":[117.11579255648138,35.58625855928985],"吴村镇":[116.98337541662153,35.74285306901272],"姚村镇":[116.91045353970625,35.66232112490505],"尼山镇":[117.15272975230255,35.5072590356823],"息陬镇":[117.05416985395212,35.53100399417431],"王庄镇":[117.03252968182747,35.6641449839755],"陵城镇":[116.90913875510626,35.52785393218977],"书院街道":[117.01662491650103,35.61669333453476],"小雪街道":[116.98341185219232,35.52203468334685],"时庄街道":[116.90418102217471,35.59508585295515],"石门山镇":[117.07163514028167,35.74291208215741],"鲁城街道":[116.99011400324551,35.59639045449822]}
济宁市曲阜市行政划分代码
[{"name":"防山镇","code":"370881111000"},{"name":"吴村镇","code":"370881101000"},{"name":"姚村镇","code":"370881102000"},{"name":"尼山镇","code":"370881105000"},{"name":"息陬镇","code":"370881109000"},{"name":"王庄镇","code":"370881108000"},{"name":"陵城镇","code":"370881103000"},{"name":"书院街道","code":"370881002000"},{"name":"小雪街道","code":"370881004000"},{"name":"时庄街道","code":"370881003000"},{"name":"石门山镇","code":"370881110000"},{"name":"鲁城街道","code":"370881001000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示
