可视化数据大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理凉山彝族自治州越西县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts凉山彝族自治州越西县geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
echarts凉山彝族自治州越西县geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
echarts凉山彝族自治州越西县geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
threejs凉山彝族自治州越西县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份,如果对threejs感兴趣,可以观看threejs教程视频 Three.js前端3D可视化教程
threejs凉山彝族自治州越西县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
凉山彝族自治州越西县 下辖有 古二乡,河东乡,依洛地坝乡,瓦曲乃乌乡,瓦里觉乡,竹阿觉乡,大屯乡,丁山乡,大瑞乡,贡莫乡,尔觉乡,尔赛乡,德吉乡,普雄镇,拉白乡,新乡乡,新民镇,申果乡,越城镇,铁西乡,瓦普莫乡,保安藏族乡,中所镇,乃托镇,书古乡,保石乡,拉吉乡,南箐乡,大花乡,拉普乡,板桥乡,梅花乡,西山乡,瓦岩乡,申普乡,白果乡,马拖乡,乐青地乡,五里箐乡,四甘普乡,瓦曲觉乡
凉山彝族自治州越西县下辖区域坐标
{"古二乡":[102.70932533121045,28.38869528170682],"河东乡":[102.55094346213282,28.65773292269666],"依洛地坝乡":[102.6972589420005,28.47420477547285],"瓦曲乃乌乡":[102.85294590212999,28.57026901181313],"瓦里觉乡":[102.77928042013781,28.54485744017966],"竹阿觉乡":[102.73003653139844,28.45765457209985],"大屯乡":[102.54368485297076,28.69173537083155],"丁山乡":[102.52858203474332,28.60247479964985],"大瑞乡":[102.52625379110403,28.57146071990199],"贡莫乡":[102.61583772144476,28.52567982816701],"尔觉乡":[102.59833387253238,28.61516523029567],"尔赛乡":[102.67414628478123,28.38544633097732],"德吉乡":[102.70040946833979,28.56738662163652],"普雄镇":[102.66623155248723,28.53417272923556],"拉白乡":[102.610911079716,28.56808207035217],"新乡乡":[102.4776555040117,28.44552045926433],"新民镇":[102.5416553032178,28.71214774484858],"申果乡":[102.82200564808932,28.47708392924957],"越城镇":[102.53456529685825,28.64104782092866],"铁西乡":[102.59453390218027,28.6724646332078],"瓦普莫乡":[102.59591291820074,28.41566099378882],"保安藏族乡":[102.55865038035225,28.80704884901094],"中所镇":[102.47092964681266,28.57804850495272],"乃托镇":[102.6299020229023,28.74371296332023],"书古乡":[102.55528344220778,28.46251007419046],"保石乡":[102.77705274723121,28.38563234012658],"拉吉乡":[102.78748815851642,28.63934179609599],"南箐乡":[102.41620179175044,28.51934693726809],"大花乡":[102.42307898180057,28.61261164269794],"拉普乡":[102.65388244327013,28.68166595619455],"板桥乡":[102.50237273954801,28.80489224800061],"梅花乡":[102.5929499907487,28.83676447214159],"西山乡":[102.44204843866504,28.68367957035637],"瓦岩乡":[102.45633283528676,28.75818408134354],"申普乡":[102.8405799880341,28.37917785774417],"白果乡":[102.63099999625676,28.80586840767613],"马拖乡":[102.50901947785184,28.52863179339558],"乐青地乡":[102.62889100275493,28.46024431176265],"五里箐乡":[102.54961282395828,28.51900502711421],"四甘普乡":[102.67091123327518,28.62158736846796],"瓦曲觉乡":[102.84050897274312,28.43988306774723]}
凉山彝族自治州越西县行政划分代码
[{"name":"古二乡","code":""},{"name":"河东乡","code":""},{"name":"依洛地坝乡","code":""},{"name":"瓦曲乃乌乡","code":""},{"name":"瓦里觉乡","code":""},{"name":"竹阿觉乡","code":""},{"name":"大屯乡","code":""},{"name":"丁山乡","code":""},{"name":"大瑞乡","code":""},{"name":"贡莫乡","code":""},{"name":"尔觉乡","code":""},{"name":"尔赛乡","code":""},{"name":"德吉乡","code":""},{"name":"普雄镇","code":"513434104000"},{"name":"拉白乡","code":""},{"name":"新乡乡","code":""},{"name":"新民镇","code":"513434102000"},{"name":"申果乡","code":""},{"name":"越城镇","code":"513434100000"},{"name":"铁西乡","code":""},{"name":"瓦普莫乡","code":""},{"name":"保安藏族乡","code":"513434211000"},{"name":"中所镇","code":"513434101000"},{"name":"乃托镇","code":"513434103000"},{"name":"书古乡","code":""},{"name":"保石乡","code":""},{"name":"拉吉乡","code":"513434235000"},{"name":"南箐乡","code":""},{"name":"大花乡","code":""},{"name":"拉普乡","code":""},{"name":"板桥乡","code":""},{"name":"梅花乡","code":""},{"name":"西山乡","code":""},{"name":"瓦岩乡","code":""},{"name":"申普乡","code":""},{"name":"白果乡","code":""},{"name":"马拖乡","code":""},{"name":"乐青地乡","code":""},{"name":"五里箐乡","code":""},{"name":"四甘普乡","code":""},{"name":"瓦曲觉乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看