可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理葫芦岛市连山区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
连山区，隶属辽宁省葫芦岛市，位于葫芦岛市东北部，介于北纬40°56'～40°43'，东经120°59'～120°14'之间，连山区气候属暖温带半湿润大陆性季风气候，四季分明。截至2019年，连山区下辖17个乡镇（街道），2个经济开发区，区政府驻连山街道，总面积1149.5平方千米。根据第七次人口普查数据，截至2020年11月1日零时，连山区常住人口为468110人。
echarts葫芦岛市连山区geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
echarts葫芦岛市连山区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts葫芦岛市连山区geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
threejs葫芦岛市连山区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果对threejs感兴趣，可以观看threejs教程视频 Three.js 3D可视化
threejs葫芦岛市连山区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
threejs葫芦岛市连山区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
葫芦岛市连山区 下辖有 兴工街道,化工街道,化机街道,渤海街道,连山街道,沙河营乡,寺儿堡镇,塔山乡,水泥街道,杨郊乡,钢屯镇,白马石乡,石油街道,孤竹营子乡,新台门蒙古族镇,杨家杖子经济开发区,山神庙子乡,锦郊街道,站前街道
葫芦岛市连山区下辖区域坐标
{"兴工街道":[120.83926722797793,40.76478683234828],"化工街道":[120.82513378602042,40.7545055693266],"化机街道":[120.8376267763665,40.74955641253965],"渤海街道":[120.86982144401385,40.74795044432435],"连山街道":[120.86944673800772,40.76820854483143],"沙河营乡":[120.76822596644763,40.85683189638443],"寺儿堡镇":[120.73127262608224,40.81456700674542],"塔山乡":[120.88618616668917,40.85628898919674],"水泥街道":[120.85209829225201,40.76705378579319],"杨郊乡":[120.53221882376774,40.81054914077662],"钢屯镇":[120.60432053653011,40.90209855889911],"白马石乡":[120.34882473708439,40.93421143984639],"石油街道":[],"孤竹营子乡":[120.28045201043706,40.91914209867949],"新台门蒙古族镇":[120.37799367590742,40.85007829417486],"杨家杖子经济开发区":[120.52012995162849,40.8110552528034],"山神庙子乡":[120.50707790691581,40.94776120115896],"锦郊街道":[],"站前街道":[120.86133456339547,40.75651562299378]}
葫芦岛市连山区行政划分代码
[{"name":"兴工街道","code":"211402004000"},{"name":"化工街道","code":"211402006000"},{"name":"化机街道","code":""},{"name":"渤海街道","code":"211402003000"},{"name":"连山街道","code":"211402001000"},{"name":"沙河营乡","code":"211402201000"},{"name":"寺儿堡镇","code":"211402105000"},{"name":"塔山乡","code":"211402206000"},{"name":"水泥街道","code":""},{"name":"杨郊乡","code":"211402210000"},{"name":"钢屯镇","code":"211402104000"},{"name":"白马石乡","code":"211402203000"},{"name":"石油街道","code":"211402005000"},{"name":"孤竹营子乡","code":"211402202000"},{"name":"新台门蒙古族镇","code":""},{"name":"杨家杖子经济开发区","code":"211402400000"},{"name":"山神庙子乡","code":"211402205000"},{"name":"锦郊街道","code":"211402011000"},{"name":"站前街道","code":"211402002000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
