可视化大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理荆州市公安县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
公安县位于湖北省中南部边缘,长江南岸,是江汉平原与洞庭湖平原的连接板块,素有“七省孔道”之称。全县国土面积2257平方公里,总人口106万人,辖16个乡镇。公安县始建于汉高祖5年,时名孱陵县,汉建安14年,三国刘备立营油江口,取左公刘备安营扎寨之意,改孱陵为公安,公安县由此而得名。公安县经济发展活跃,拥有凯乐塑管、荆雄棉纱、恒信衬套、双港畜禽、移栽灵、三袁蛋品、黄山头楚藏白酒等100多种名优产品。近年来,公安县深入实施工业兴县和招商引资发展战略,吸引了英国坦萨公司、巴克顿公司、意大利弗拉玛公司、香港汉兴集团等国内外知名企业落户公安。公安县交通便利,拥有完善的水运、公路、铁路交通网络,是连接中西部地区的物流集散地和中转走廊之一。
动态效果
echarts荆州市公安县geoJson地图3d地图
使用的是echarts-gl结合echarts实现的3d地图效果实例
echarts荆州市公安县geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts荆州市公安县geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
threejs荆州市公安县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果对threejs感兴趣,可以观看threejs视频课程 Three.js视频教程3D可视化
threejs荆州市公安县geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
threejs荆州市公安县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
荆州市公安县 下辖有 藕池镇,夹竹园镇,斗湖堤镇,埠河镇,章田寺乡,南平镇,闸口镇,孟家溪镇,斑竹垱镇,杨家厂镇,毛家港镇,狮子口镇,甘家厂乡,章庄铺镇,麻豪口镇,黄山头镇
荆州市公安县下辖区域坐标
{"藕池镇":[112.25838565265701,29.79997466149302],"夹竹园镇":[112.16203295815959,30.02233760688582],"斗湖堤镇":[112.21971074035133,30.02427120089199],"埠河镇":[112.17791026396637,30.20736319743331],"章田寺乡":[112.15388581152227,29.82228715354233],"南平镇":[112.04799769278506,29.86315577026961],"闸口镇":[112.21456056202422,29.9226263310787],"孟家溪镇":[112.13070295426799,29.85829730365897],"斑竹垱镇":[112.00059150161007,30.05123816248967],"杨家厂镇":[112.33500475298331,29.98992030649362],"毛家港镇":[112.04507734598874,30.0629794815794],"狮子口镇":[111.97422710362872,29.95935783605886],"甘家厂乡":[112.1216847923661,29.7195035551418],"章庄铺镇":[111.92189965365444,29.85756151702086],"麻豪口镇":[112.33914943154416,29.91074539990022],"黄山头镇":[112.21050240563852,29.69919980743277]}
荆州市公安县行政划分代码
[{"name":"藕池镇","code":"421022106000"},{"name":"夹竹园镇","code":"421022102000"},{"name":"斗湖堤镇","code":"421022101000"},{"name":"埠河镇","code":"421022100000"},{"name":"章田寺乡","code":"421022201000"},{"name":"南平镇","code":"421022109000"},{"name":"闸口镇","code":"421022103000"},{"name":"孟家溪镇","code":"421022108000"},{"name":"斑竹垱镇","code":"421022112000"},{"name":"杨家厂镇","code":"421022104000"},{"name":"毛家港镇","code":"421022113000"},{"name":"狮子口镇","code":"421022111000"},{"name":"甘家厂乡","code":"421022200000"},{"name":"章庄铺镇","code":"421022110000"},{"name":"麻豪口镇","code":"421022105000"},{"name":"黄山头镇","code":"421022107000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。