随着开发 数据大屏可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理乐山市峨眉山市echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts乐山市峨眉山市geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts乐山市峨眉山市geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts乐山市峨眉山市geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
threejs乐山市峨眉山市geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果对threejs感兴趣，可以观看threejs视频课程 Three.js前端3D可视化
threejs乐山市峨眉山市geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs乐山市峨眉山市geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
乐山市峨眉山市 下辖有 峨山镇,新平乡,普兴乡,川主乡,九里镇,乐都镇,沙溪乡,双福镇,大为镇,胜利镇,高桥镇,符溪镇,绥山镇,罗目镇,龙池镇,龙门乡,桂花桥镇,黄湾乡
乐山市峨眉山市下辖区域坐标
{"峨山镇":[103.47051531352912,29.56051534924222],"新平乡":[103.53176517475606,29.63037247238254],"普兴乡":[103.44424016242192,29.69100595099509],"川主乡":[103.39484944333762,29.62992245650829],"九里镇":[103.49281462265054,29.48480284505013],"乐都镇":[103.52864431437604,29.46424351348059],"沙溪乡":[103.43684032097643,29.39569093266067],"双福镇":[103.51731060157525,29.67134385183189],"大为镇":[103.25751425730192,29.38068758636065],"胜利镇":[103.50247915387382,29.58654803336391],"高桥镇":[103.39114905757509,29.50019435794438],"符溪镇":[103.57835202407736,29.61620058898849],"绥山镇":[103.46935011871591,29.62326364197574],"罗目镇":[103.45428853722687,29.50371082915987],"龙池镇":[103.28935033836005,29.41484143100957],"龙门乡":[103.38220391265583,29.32661846239368],"桂花桥镇":[103.52974590889315,29.5583367541394],"黄湾乡":[103.35532012969605,29.5611229360435]}
乐山市峨眉山市行政划分代码
[{"name":"峨山镇","code":""},{"name":"新平乡","code":""},{"name":"普兴乡","code":""},{"name":"川主乡","code":""},{"name":"九里镇","code":"511181103000"},{"name":"乐都镇","code":""},{"name":"沙溪乡","code":""},{"name":"双福镇","code":"511181108000"},{"name":"大为镇","code":"511181110000"},{"name":"胜利镇","code":""},{"name":"高桥镇","code":"511181101000"},{"name":"符溪镇","code":"511181106000"},{"name":"绥山镇","code":"511181100000"},{"name":"罗目镇","code":"511181102000"},{"name":"龙池镇","code":"511181104000"},{"name":"龙门乡","code":"511181200000"},{"name":"桂花桥镇","code":"511181109000"},{"name":"黄湾乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
