随着开发 数据可视化大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理烟台市海阳市echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
海阳市，山东省辖县级市，由烟台市代管。位于山东半岛东南部，烟台市境南部，东邻乳山、牟平，西接莱阳，北连栖霞，南濒黄海，西南隔丁字湾与即墨相望。陆地总面积1909平方千米，海域面积1829平方千米。截至2022年10月，海阳市下辖4个街道、10个镇。根据第七次人口普查结果，截至2020年11月1日零时，海阳市常住人口为582711人。
echarts烟台市海阳市geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts烟台市海阳市geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts烟台市海阳市geoJson地图3d地图自定义贴图-绿色地面
3d地图自定义贴图-绿色地面,echarts结合echarts-gl实现3d地图自定义贴图效果,通过设置 shading: 'realistic',以及realisticMaterial来设置自定义纹理贴图,当前效果为绿色地面的效果实例
threejs烟台市海阳市geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs教程视频 WebGL前端3D可视化教程
threejs烟台市海阳市geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
threejs烟台市海阳市geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
烟台市海阳市 下辖有 郭城镇,东村街道,凤城街道,二十里店镇,外向型工业加工区,行村镇,辛安镇,发城镇,小纪镇,朱吴镇,徐家店镇,方圆街道,留格庄镇,盘石店镇,龙山街道
烟台市海阳市下辖区域坐标
{"郭城镇":[121.11996344006084,37.05164228042641],"东村街道":[121.123119578131,36.790691860336],"凤城街道":[121.24654207560602,36.71278762396503],"二十里店镇":[121.0659328218212,36.75761413905835],"外向型工业加工区":[121.1909311509122,36.74878737763699],"行村镇":[120.92370577374673,36.69719508461845],"辛安镇":[120.9851605902214,36.65248717618591],"发城镇":[121.01946281143483,36.9660871988767],"小纪镇":[120.97712792530889,36.82001947173048],"朱吴镇":[121.1194299063526,36.92043672510908],"徐家店镇":[121.02493577438321,37.10461559246245],"方圆街道":[121.20826068015984,36.80871817730431],"留格庄镇":[],"盘石店镇":[121.27294295712011,36.87819393375608],"龙山街道":[121.11013340263108,36.66483707465169]}
烟台市海阳市行政划分代码
[{"name":"郭城镇","code":"370687104000"},{"name":"东村街道","code":"370687002000"},{"name":"凤城街道","code":"370687003000"},{"name":"二十里店镇","code":"370687110000"},{"name":"外向型工业加工区","code":"370687401000"},{"name":"行村镇","code":"370687108000"},{"name":"辛安镇","code":"370687109000"},{"name":"发城镇","code":"370687106000"},{"name":"小纪镇","code":"370687107000"},{"name":"朱吴镇","code":"370687112000"},{"name":"徐家店镇","code":"370687105000"},{"name":"方圆街道","code":"370687001000"},{"name":"留格庄镇","code":"370687102000"},{"name":"盘石店镇","code":"370687103000"},{"name":"龙山街道","code":"370687004000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示
