随着开发 数据大屏可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理德阳市旌阳区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts德阳市旌阳区geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
echarts德阳市旌阳区geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
echarts德阳市旌阳区geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
threejs德阳市旌阳区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果对threejs感兴趣，可以观看threejs视频 Three.js前端3D可视化教程
threejs德阳市旌阳区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs德阳市旌阳区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
德阳市旌阳区 下辖有 黄许镇,工农街道,旌东街道,旌阳街道,东湖乡,城南街道,双东镇,和新镇,天元镇,孝感镇,孝泉镇,德新镇,扬嘉镇,新中镇,柏隆镇,城北街道,八角井街道
德阳市旌阳区下辖区域坐标
{"黄许镇":[104.44423889510443,31.25371186943993],"工农街道":[104.36829218845243,31.10165925879864],"旌东街道":[104.41297888830152,31.1091009272014],"旌阳街道":[104.38861129663127,31.13812732585291],"东湖乡":[104.43613652609682,31.14715875816988],"城南街道":[104.38098602090892,31.12658549923621],"双东镇":[104.51169909879039,31.17723192046195],"和新镇":[104.46942159317499,31.06702885598946],"天元镇":[104.31832772021517,31.14349174365671],"孝感镇":[104.3661471916436,31.17925869673856],"孝泉镇":[104.29201274611816,31.23737431630141],"德新镇":[104.35891507067257,31.24661760048375],"扬嘉镇":[104.3196609145494,31.18771066784869],"新中镇":[104.52052462272226,31.12628350989299],"柏隆镇":[104.34969730216235,31.31519872207781],"城北街道":[104.39631127148779,31.17204795701467],"八角井街道":[104.3821930312392,31.05833659959937]}
德阳市旌阳区行政划分代码
[{"name":"黄许镇","code":"510603100000"},{"name":"工农街道","code":""},{"name":"旌东街道","code":"510603004000"},{"name":"旌阳街道","code":"510603001000"},{"name":"东湖乡","code":""},{"name":"城南街道","code":""},{"name":"双东镇","code":"510603110000"},{"name":"和新镇","code":"510603117000"},{"name":"天元镇","code":""},{"name":"孝感镇","code":""},{"name":"孝泉镇","code":"510603101000"},{"name":"德新镇","code":"510603108000"},{"name":"扬嘉镇","code":""},{"name":"新中镇","code":"510603111000"},{"name":"柏隆镇","code":"510603103000"},{"name":"城北街道","code":""},{"name":"八角井街道","code":"510603006000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
