数据可视化大屏 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理张家界市桑植县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts张家界市桑植县geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts张家界市桑植县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts张家界市桑植县geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
threejs张家界市桑植县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话，可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化
threejs张家界市桑植县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs张家界市桑植县geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
张家界市桑植县 下辖有 上洞街乡,陈家河镇,人潮溪乡,凉水口镇,利福塔镇,走马坪白族乡,龙潭坪镇,官地坪镇,廖家村镇,洪家关白族乡,桥自湾乡,沙塔坪乡,竹叶坪乡,八大公山镇,五道水镇,谷罗山乡,蹇家坡乡,洪家关乡,天星山林场,刘家坪白族乡,芙蓉桥白族乡,马合口白族乡,麦地坪白族乡,澧源镇,人潮溪镇,河口乡,上河溪乡,瑞塔铺镇,空壳树乡
张家界市桑植县下辖区域坐标
{"上洞街乡":[109.99487849303101,29.33467670886983],"陈家河镇":[109.96138066606309,29.47961945573336],"人潮溪乡":[110.61793045993429,29.6234843413488],"凉水口镇":[110.0956000616028,29.54577571989204],"利福塔镇":[110.09434532175226,29.35113442678798],"走马坪白族乡":[110.45266065158901,29.48071332007094],"龙潭坪镇":[110.17530832617622,29.68968377905021],"官地坪镇":[110.45256031447681,29.6320521622535],"廖家村镇":[109.99615354937637,29.39950078168],"洪家关白族乡":[110.07230023141572,29.4381162848085],"桥自湾乡":[110.16469674863947,29.52036610321168],"沙塔坪乡":[110.02675246540909,29.60938472933248],"竹叶坪乡":[110.56555644613702,29.49066116958722],"八大公山镇":[109.8375104104704,29.66501694675573],"五道水镇":[109.94197799021077,29.71085894285572],"谷罗山乡":[110.17933012096529,29.59377082857684],"蹇家坡乡":[109.95751650941375,29.55497166506535],"洪家关乡":[110.1717416913134,29.47511510614694],"天星山林场":[110.26130044976505,29.6316536339197],"刘家坪白族乡":[110.22460013652892,29.47801853847407],"芙蓉桥白族乡":[110.33819734139861,29.56871281140197],"马合口白族乡":[110.33232311767964,29.55039875332151],"麦地坪白族乡":[110.40236752388583,29.52228577277427],"澧源镇":[110.17028192763414,29.3976232218536],"人潮溪镇":[110.58274432492867,29.69043310382501],"河口乡":[109.84274591763808,29.56572838607206],"上河溪乡":[109.82104031707243,29.47991333236396],"瑞塔铺镇":[110.26365737024086,29.40512046843786],"空壳树乡":[110.3455403027244,29.44129546593899]}
张家界市桑植县行政划分代码
[{"name":"上洞街乡","code":"430822228000"},{"name":"陈家河镇","code":"430822106000"},{"name":"人潮溪乡","code":""},{"name":"凉水口镇","code":"430822103000"},{"name":"利福塔镇","code":"430822108000"},{"name":"走马坪白族乡","code":"430822203000"},{"name":"龙潭坪镇","code":"430822104000"},{"name":"官地坪镇","code":"430822102000"},{"name":"廖家村镇","code":"430822107000"},{"name":"洪家关白族乡","code":"430822213000"},{"name":"桥自湾乡","code":""},{"name":"沙塔坪乡","code":"430822216000"},{"name":"竹叶坪乡","code":"430822202000"},{"name":"八大公山镇","code":"430822109000"},{"name":"五道水镇","code":"430822105000"},{"name":"谷罗山乡","code":""},{"name":"蹇家坡乡","code":""},{"name":"洪家关乡","code":""},{"name":"天星山林场","code":""},{"name":"刘家坪白族乡","code":"430822207000"},{"name":"芙蓉桥白族乡","code":"430822208000"},{"name":"马合口白族乡","code":"430822210000"},{"name":"麦地坪白族乡","code":""},{"name":"澧源镇","code":"430822100000"},{"name":"人潮溪镇","code":"430822111000"},{"name":"河口乡","code":"430822224000"},{"name":"上河溪乡","code":"430822225000"},{"name":"瑞塔铺镇","code":"430822101000"},{"name":"空壳树乡","code":"430822200000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
