随着开发 可视化数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理德宏傣族景颇族自治州芒市echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts德宏傣族景颇族自治州芒市geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts德宏傣族景颇族自治州芒市geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
echarts德宏傣族景颇族自治州芒市geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
threejs德宏傣族景颇族自治州芒市geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份,如果想系统的学习threejs的话，可以观看threejs视频 Three.js前端3D可视化教程
threejs德宏傣族景颇族自治州芒市geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs德宏傣族景颇族自治州芒市geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
德宏傣族景颇族自治州芒市 下辖有 遮放镇,风平镇,中山乡,勐戛镇,江东乡,芒市镇,芒海镇,西山乡,轩岗乡,三台山乡,五岔路乡,勐焕街道
德宏傣族景颇族自治州芒市下辖区域坐标
{"遮放镇":[98.21004584963757,24.2086165626253],"风平镇":[98.56128867730447,24.34520106847075],"中山乡":[98.58029098756802,24.16379259952809],"勐戛镇":[98.48613972029622,24.23907158020493],"江东乡":[98.38108231079065,24.55902389256778],"芒市镇":[98.60812478061996,24.47080980773939],"芒海镇":[98.34637751396824,24.14033645695428],"西山乡":[98.17889136792569,24.30107503481151],"轩岗乡":[98.42152295411086,24.46600688822799],"三台山乡":[98.37245277861821,24.31788830601238],"五岔路乡":[98.26983737784869,24.41837910017036],"勐焕街道":[98.57560878711749,24.43146525735209]}
德宏傣族景颇族自治州芒市行政划分代码
[{"name":"遮放镇","code":"533103102000"},{"name":"风平镇","code":"533103105000"},{"name":"中山乡","code":"533103204000"},{"name":"勐戛镇","code":"533103103000"},{"name":"江东乡","code":"533103202000"},{"name":"芒市镇","code":"533103101000"},{"name":"芒海镇","code":"533103104000"},{"name":"西山乡","code":"533103203000"},{"name":"轩岗乡","code":"533103201000"},{"name":"三台山乡","code":""},{"name":"五岔路乡","code":"533103206000"},{"name":"勐焕街道","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
